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

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

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

この記事では、

  • 「join」メソッドとは?
  • 基本的な構文
  • 文字列(String)に変換
  • 「join」で改行を実現
  • 「join」と「split」で置換
  • 「join」メソッドは遅いのか?

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

「join」メソッドとは?

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

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

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

基本的な構文

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

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

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

文字列(String)に変換してみよう

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

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

実行結果

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

実行結果

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

配列(Array)をカンマ区切りで連結する!

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

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

実行結果

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

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

実行結果

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

「join」で改行する方法

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

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

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

実行結果

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

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

【JavaScript入門】エスケープ処理とescape関数の使い方まとめ
更新日 : 2019年4月24日

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

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

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

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

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

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

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

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

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

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

実行結果

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

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

実行結果

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

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

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

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

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

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

実行結果

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

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

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

【JavaScript入門】joinや+演算子で配列や文字列を連結・結合する
更新日 : 2019年4月20日

まとめ

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

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

  • 配列データに「join」を付与することで、各要素が連結されて文字列になる
  • 「join」の引数に区切り文字を指定することができる
  • 「join」の引数はデフォルトでカンマ区切りが設定されている
  • 「join」の引数に、「/n」や「<br>」などを使うことで改行ができる
  • 「split」メソッドを組み合わせると「置換」処理ができる
  • 文字連結の処理速度も意識しながらプログラムをしよう

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説