【JavaScript入門】joinや+演算子で配列や文字列を連結・結合する

こんにちは、ライターのマサトです！　今回は、JavaScriptにおけるさまざまな文字列の「連結・結合」方法について学習していきましょう！

この記事では、

という基本的な内容から、

などの応用的な使い方に関しても解説していきます。この記事で文字列の「連結・結合」方法をしっかり学習して自分のスキルアップを目指しましょう！

文字列の連結・結合とは？

JavaScriptで文字列を「連結・結合」するケースは、プログラム内で動的に「文字」と「文字」を繋ぎ合わせる作業を指すことが多いでしょう。そこで最も一般的に使われるのが「＋」演算子です！

// 文字と文字を連結して1つの文字列にする
var str = 文字 + 文字

「＋」演算子は、数値の計算などによく使われています。文字を連結する場合にもよく使われるので忘れないようにしましょう。実際の使用例が次のサンプルです。

var result = '今日は' + '良い天気です！';

console.log( result );

出力結果

今日は良い天気です！

となります。

この例では、「今日は」という文字列と、「良い天気です！」という文字列を「＋」演算子でつなげて1つの文字列として出力できているのが分かります。これは最も基本的な例ですが、JavaScriptでは他にもさまざまな使い方ができるので1つずつ詳しく見ていきましょう！

変数と文字列を連結しよう！

次に、「文字列」と「変数」の連結方法について学習しましょう。先ほどのサンプルでは、「文字」と「文字」を単純に繋ぎ合わせた例でしたが、実は文字列を代入した「変数」も連結することが可能です！

次のサンプルを見てください。

var str = 'ですね！'
var result = '今日は' + '良い天気' + str;

console.log( result );

出力結果

今日は良い天気ですね！

この例では「ですね！」という文字列を代入した変数「str」を、文字列に「＋」演算子で連結・結合しているのが分かります。このように、文字列同士だけでなく変数も同時に連結できるので、動的に違う言葉を組み込めるのが面白いところでしょう。

文字列と数値を連結しよう！

今度は、文字列だけでなく「数値」も混在させて連結・結合を実行してみましょう！　ただし、「数値」を扱う時は「型」に注意が必要です。次のサンプル例を見てください。

//「 文字列」と「数値」の組み合わせ
var result = '合計：' + 1 + 2;

console.log( result );

出力結果

合計：12

これまで通り、文字列と数値を「+」で繋げていますが、「合計：3」ではなく「合計：12」と表示されているのがポイントです。この例の場合では、最初に文字列「合計：」と数値の「1」が連結されますが、この時に数値「1」は文字列型に変換されるのです。

続けて、文字列「合計：1」と数値「2」が組み合わさりますが、こちらも「2」が文字列に変換されて、結果的に「合計：12」となるわけです！　JavaScriptはこのような仕様になっているため、数値を計算させる時は先に実行しておく必要があります。

次のコード例では、「① ( )」を使う方法と「② 変数」を使う方法で数値を先に計算して出力しています！

// 事例①
// 「( )」を使って先に計算を実行
var result = '合計は、' + ( 1 + 2 );

console.log( '①の結果：' + result );



// 事例②
// 計算結果を変数に代入する
var num = 1 + 2;
var result = '合計は、' + num;

console.log( '②の結果：' + result );

出力結果

①の結果：合計は、3

②の結果：合計は、3

①の（ ）を使った方法の場合、文字列内に計算処理を直接記述できるのが特徴です。
②の変数を使えば動的に中身を変えられる拡張性の高いプログラムを書くことができます。

①、②どちらの方法を使っても結果は同じになるので、ケースバイケースで使い分けていくようにしましょう。また、上記の例では、JavaScriptの仕様により数値が文字列に自動的に変換されていましたが、場合によっては開発者が意図的に変換したい場合もあります。

その方法については以下の記事が参考になりますので、興味のある方は確認してみて下さい。

文字列を改行するための連結方法！

次に、文字列の「改行」について学習しましょう。ここでは「文字列内の改行」と「ソースコード内の改行」の2点について解説していきます。

まずは基本となる「文字列内の改行」ですが、次のコードを見てください！

var lists = 'サンプル\nテキスト';

console.log( lists );

出力結果

サンプル
テキスト

この例では、エスケープシーケンスの「\n」を改行したい箇所に挿入することで、出力結果は見事に改行された状態で表示されているのが分かります。「\n」を挿入するだけなので、とても簡単で扱いやすい構文と言えるでしょう。

このエスケープシーケンスについては、次の記事で基本から応用まで分かりやすく解説しているので、ぜひ参考にしてみてください！

次に「ソースコード内の改行」についてですが、これは例えば文字列がとても長い文章の場合にコードの見た目を分かりやすくするために有効です。次のサンプル例をみてください。

var lists = 'サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト';

この例のように、文字列が長文の場合コードが見づらくなってしまいますよね。そこで、文字列を任意の箇所で切り分けて、「＋」演算子を付与した部分で改行することで見やすくできるわけです！

var lists = 'サンプルテキストサンプルテキストサンプルテキスト' +
            'サンプルテキストサンプルテキストサンプルテキスト' +
            'サンプルテキストサンプルテキストサンプルテキスト' +
            'サンプルテキストサンプルテキストサンプルテキスト';

この例のように、改行してインデントも揃えるとさらに見やすくなりますね。

もちろん、長文以外にも複数の文字列を連結・結合する必要がある場合でも、同じように「＋」演算子と改行を組み合わせることでコードを整理して見やすくすることができます。

文字列の連結とundefined・NaNの関係

JavaScriptでは、変数を定義した時に初期値を設定しないと値が自動的に「undefined」になります。これは、少し言い方を変えると「undefined」というただの文字列が、自動的に変数へ代入されていると考えても良いでしょう。

この点を踏まえたうえで、次のコード例を見てください。

var str1;
var str2 = '';

console.log( 'こんにちは' + str1 );
console.log( 'こんにちは' + str2 );

実行結果

こんにちはundefined
こんにちは

この例では、変数「str1」は定義しただけで初期値は設定していませんが、「str2」は空白を初期値として設定しています。実行結果を見ると分かりますが、str1は初期値を入れてないので「こんにちは」に続けてundefinedが一緒に出力されていますね。

str2は初期値を空白にしているので、文字列と連結しても「undefined」の文字は出力されません。つまり、文字列と連結を想定する変数は、あらかじめ空白の初期値を入れておく方が良いと言えるでしょう。

また、「数値」を扱う時にも初期値は重要です。「文字列＋数値」は文字列型に変換されると前述しましたが、初期値が設定されていない変数を扱う場合は予期せぬ結果になることも少なくありません。

次のコード例を見てください！

var str1;
var str2 = '';

console.log( str1 + 10 );
console.log( str2 + 10 );

実行結果

NaN
10

この例では、初期値が設定されていない「str1」と数値「10」を連結していますが、結果は「NaN」という表示に変わっていますね。これは「数値ではない」ことを表しているのですが、「undefined10」のような表示にならないのがポイントです。

JavaScriptは状況に応じて自動的に表示が変化したり、今回のように初期値が変化することがあるので十分な理解をしておくことがエラー回避に繋がります。

ちなみに、undefinedが自動的に挿入されるサンプル例や、どのように判定すれば良いのか？　などの疑問は次の記事が分かりやすいので参考にしてみてください。

「join」メソッドを使った配列要素の連結・結合

ちょっと変わった文字列の連結方法として、配列メソッドの「join」を使うのも有効でしょう。「join」は、配列の各要素を繋げて1つの文字列にすることが可能で、あらかじめ配列内に必要な文字列を格納しておけるので役立つケースも多いでしょう。

次のコード例を見てください。

var array = ["今日の天気は", "雨", "でした"];
var result = array.join('');

console.log( result );

出力結果

今日の天気は雨でした

この例では、配列要素に「今日の天気は」「雨」「でした」という文字列が格納されており、これらをjoinメソッドですべて連結して1つの文字列として出力しています。配列を操作すれば、さまざまな文字列を生成できるようになるので活用範囲も広いでしょう。

また、「join」メソッドは引数を指定することで、任意の文字列を連結部分に挿入するなど便利な手法がいくつかあります。これについては、次の記事で活用技も含めて解説しているので是非参考にしてみてください！

concatで配列を結合する方法

ここでは、concatメソッドで2つの配列を結合する方法を解説します。concatメソッドは呼び出し元の配列の後ろに引数に指定した配列を追加します。次のプログラムで確認してみましょう。

var array1 = ['sa', 'mu'];
var array2 = ['ra', 'i'];
var result = array1.concat(array2);

console.log(result);

実行結果：

sa,mu,ra,i

このようにして、2つの配列を結合することができました。concatメソッドの使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

同じ文字列の繰り返し方法について

これまでは、異なる文字列をどのようにして連結・結合するか？　というケースについて学習してきました。今度ははまったく同じ文字列を任意の数だけ連結する方法について解説していきます。

例えば、次のようなコード例を見てください。

var str = 'サンプル';

//文字列strを4回繰り返す
var result = str + str + str + str;

console.log( result );

実行結果

サンプルサンプルサンプルサンプル

この例では、「サンプル」という文字列を変数「str」に代入し、「＋」演算子で4回繰り返し連結しているのが分かります。この方法でも同じ文字列を連結することはできますが、プログラムとしては非常に単調で間違いやすいと言えるでしょう。

そこで、最近のモダンブラウザであれば、Stringオブジェクトのrepeatメソッドを使う方法が多くなってきました。

var str = 'サンプル';

//文字列を4回繰り返す
var result = str.repeat(4);

console.log( result );

実行結果

サンプルサンプルサンプルサンプル

repeatメソッドは、引数に「繰り返し回数」を指定することで、任意の文字列を自由に繰り返すことが出来るので便利です。ただし、古いブラウザなどに対応しなければいけない場合はこのメソッドを利用することができません。

そこで、古くから利用されている簡単な方法として、配列のjoinメソッドを使う手法を解説しておきます。

次のコード例を見てください。

var str = 'サンプル';

//文字列を4回繰り返す
var result = Array(5).join( str );

console.log( result );

実行結果

サンプルサンプルサンプルサンプル

この例では、まず最初に「Array(5)」とすることで空の「5つの要素」を格納した配列を作ります。次に、その配列にjoinメソッドを使って引数に文字列「str」を指定することで、空の要素同士を文字列「str」で連結することになります。

イメージとしては、「（空要素）サンプル（空要素）サンプル（空要素）サンプル（空要素）サンプル（空要素）」のようなカタチで連結されているわけです。（空要素は存在しないので、出力しても何も表示されず「サンプル」だけが連結されたように見えます）

高速な連結・結合方法について

これまでご紹介してきたように、JavaScriptでは「＋」演算子や「join」メソッドなどを使って文字列を連結することができました。そこで、どの手法が最もパフォーマンスが良く処理速度が速いのかを調べるために、「console.time」を使ってそれぞれ計測してみました。（今回はStringメソッドの「concat」も一緒に調べています）

今回、計測したプログラムは次の通りです。

var count = 100000;
var str;

str = '';
console.time('+=の連結：');
for (var i = 0; i < count; i++) {
  str += 'あいうえお';
}
console.timeEnd('+=の連結：');


str = '';
console.time('+の連結：');
for (var i = 0; i < count; i++) {
  str = str + 'あいうえお';
}
console.timeEnd('+の連結：');


a = ['あ', 'い', 'う', 'え', 'お'];
console.time('joinの連結：');
for (var i = 0; i < count; i++) {
  str = a.join("");
}
console.timeEnd('joinの連結：');


str = '';
console.time('concatの連結：');
for (var i = 0; i < count; i++) {
  str = str.concat('あいうえお');
}
console.timeEnd('concatの連結：');

実行結果

+=の連結：: 54.876ms
+の連結：: 41.562ms
joinの連結：: 199.398ms
concatの連結：: 57.388ms

実行結果は、それぞれ5回計測した平均値となっています。

この結果からだと、最もパフォーマンスが悪いのは「join」メソッドを使った例で、最もパフォーマンスが良かったのは「＋」演算子で連結した方法ということになります。ただし、今回はChromeブラウザのみの計測であり、またプログラムの方法によっても差が出てくるためあくまで参考程度の数値として考えておいてください。

まとめ

今回は、JavaScriptにおける文字列の連結方法について、さまざまな手法を学習しました。

最後にもう一度おさらいをしておきましょう！

上記内容を踏まえながら、ぜひ自分のプログラムにも取り入れて実践するようにしてみてください！