【JavaScript入門】joinで配列を連結する方法(改行/置換)

こんにちは、ライターのマサトです！

今回は、配列の要素を連結して文字列にすることができる「join」メソッドを学習していきましょう！

この記事では、

などの基本的な内容から、応用的な方法についても解説していきます。この記事で、「join」メソッドを楽しく学習していきましょう！

「join」メソッドとは？

それでは、まず最初に「join」メソッドの基本的な知識から身につけていきましょう！

「join」メソッドは「Arrayオブジェクト」の組み込みメソッドとして標準で用意されており、配列の要素を繋げて文字列に変換することができる便利な機能が提供されています。

これにより、配列データから特定の文字列を生成したり、置換メソッドと同等の機能を実現できたりします。このように、幅広い使い方が考えられるのでぜひこの機会にマスターできるように頑張りましょう！

基本的な構文

「join」メソッドの使い方を学ぶために、まずは基本的な構文から見ていきましょう。一般的によく使われる構文は次のとおりです！

var array = 配列;

array.join( separator );

配列データに「join」メソッドを繋げるだけで、配列の各要素がすべて連結されて「文字列」として生成されるようになっています。

「join」メソッドの引数に指定できる「separator」というのは、配列の各要素を繋げるときに任意の文字列を挿入できる仕組みになります。（これについては次の項目で解説します）

文字列（String）に変換してみよう

それでは、実際に「join」メソッドを使ってみましょう！

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

var array = ['2017', '08', '03'];
var result = array.join('-');

console.log( result );

実行結果

2017-08-03

この例では、joinメソッドの引数である「separator」に「 – (ハイフン)」を代入しているので、生成される文字列は配列の要素を「 – 」で連結したものになっているわけです。また、配列の要素をそのまま連結したい場合は、引数に「空文字」を指定すればOKです。

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

console.log( result );

実行結果

今日の天気は雨でした

引数の「separator」に空文字の「”」を代入することで配列の各要素に何も挿入しない設定になるので、要素をそのまま連結することができるわけです！

配列（Array）をカンマ区切りで連結する！

今度は、配列の各要素を「カンマ区切り」で連結する方法を学習しましょう！

といっても方法は簡単で、「join」メソッドの引数に「 , (カンマ)」を代入してあげれば良いだけです。

var array = ['りんご', 'バナナ', 'いちご', 'メロン'];
var result = array.join( ',' );

console.log( result );

実行結果

りんご,バナナ,いちご,メロン

このように、引数へ「 , 」を代入するとそのまま各要素の間に挿入されるようになります。

ちなみに、「join」メソッドの引数に代入するデフォルト設定が「 , 」なので、実は引数を省略することも可能です。

var array = ['りんご', 'バナナ', 'いちご', 'メロン'];
var result = array.join();

console.log( result );

実行結果

りんご,バナナ,いちご,メロン

このように、引数を省略すると自動的にカンマ区切りになるということも覚えておきましょう！

「join」で改行する方法

エスケープシーケンスの「/n」で区切る方法

これまで、配列の各要素を連結した結果がいずれも1行の文字列になっていましたが、場合によっては要素毎に改行をして表示したいこともあるでしょう。そこで、「join」メソッドを使って改行を行う方法を解説します！

まず、コンソール画面に出力する際の改行方法ですが、この場合はエスケープシーケンスの「/n」を活用することで改行を行うことができます。

var array = ['りんご', 'バナナ', 'いちご', 'メロン'];

console.log( array.join('n') );

実行結果

りんご
バナナ
いちご
メロン

このように、引数へ「/n」を代入することで、各要素毎にエスケープシーケンスの効果が適用されるので、出力結果では改行されて表示することができるわけです。

「/n」などのエスケープシーケンスについてはこちらの記事で解説しているので、ぜひ確認してください。

改行タグの<br>で区切る方法

Web上で改行するには
タグを使用します。

次のサンプルは、連結した文字列をWeb上へ表示する例です。

//HTMLの要素を取得
var info = document.getElementById('info');
var array = ['りんご', 'バナナ', 'いちご', 'メロン'];

//HTMLの改行タグ「<br>」を代入する
var result = array.join('<br>');

info.innerHTML = result;

このサンプルのように、今度は改行タグである「<br>」を引数に代入することで、Webに表示される各要素を改行できるわけです。

「join」メソッドは、今回ご紹介したサンプルのように、引数に何を代入するかによってさまざまなバリエーションの文字列を生成することが出来るので忘れないようにしましょう！

「join」と「split」で置換してみよう！

さて、「join」メソッドの便利な使い方を把握したところで、今度は応用技を学習していきましょう！

利用するのは、文字列を分割して配列に変換してくれる「split」メソッドです。この「split」メソッドと、これまで学習してきた「join」メソッドを組み合わせると、なんと「置換」を行うことが出来るようになります。

そこで、まずは「split」メソッドの機能を簡単にご紹介します。

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

var str = '2017/05/10';

//文字列を「/」で分割して配列に格納する
var result = str.split( '/' );

console.log( result );

実行結果

["2017", "05", "10"]

「split」メソッドは、文字列内で分割したい箇所の文字を引数に指定することで、文字列を1つの要素として配列データに変換してくれます。ここで勘の良い人なら気付いているかもしれませんが、この生成された配列をさらに「join」で再び文字列に連結することができるわけですね。

次のサンプルでは、新しい文字を引数に代入して「置換」を行っています。

var str = '2017/05/10';

var result = str.split('/');

//区切り文字を「-」に指定
console.log( result.join('-') );

実行結果

2017-05-10

もともとの文字列は「2017/05/10」でしたが、実行結果を見ると最終的に「2017-05-10」という形式に置換できているのが分かります。もちろん、「str.split(‘/’).join(‘-‘)」のように1行で簡潔に記述しても結果は同じなので覚えておきましょう！

このように、「文字列」→「配列」→「文字列」という変換処理を組み合わせることで、まったく違うメソッドの使い方ができるというのは面白いですね。

「join」メソッドは遅いのか？

さて、ここまで「join」メソッドの基本から応用まで学習してきました。

ここでは、さらに知識を深めるために、「join」メソッドの速度について解説しておきます。文字列を連結する方法として、「join」以外にも「+」演算子があってどちらもよく使う手法ですが、より高速に処理されるのはどちらでしょうか？

実際に測定してみましょう！

var count = 100000;
var str;
  
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の連結：');

実行結果

+の連結：: 24.958ms

joinの連結：: 169.199ms

この例では、文字連結を「join」「+」それぞれで10万回処理した時間を計測しています。実際には、このようなプログラミングをする機会はないと思いますが、処理にかかった時間で言うと「+」演算子の方が圧倒的に速いということが分かります。

ただし、「join」メソッドが遅いからダメということではなく、配列に格納されている文字列を連結するにはやはり「join」メソッドを使うことになります。そのため、まずは「+」演算子による連結が可能かを検討しながらケース・バイ・ケースで活用していくのがベストでしょう。

ちなみに、文字連結には他にも「concat」メソッドや「+=」などを使った方法もあるので、これらをすべて計測したデータについては次の記事で詳しく解説しているのでぜひ参考にしてみてください！

まとめ

今回は、配列の各要素を連結して文字列に変換できる「join」メソッドを学習しました！

ここで、もう一度ポイントをおさらいしておきましょう！

これらの内容を抑えながら、ぜひ自分のプログラムにも積極的に活用できるように挑戦してみてください！