【JavaScript】joinで文字列を結合する | 改行やsplitとの組み合わせも説明します

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・JavaScriptを使って配列から文字列を生成する方法が知りたい!
・JavaScriptのjoin()メソッドの使い方が知りたい!
・join()メソッドを使って改行する方法が知りたい!

というお悩みを解決する記事になっています。


この記事の内容

・JavaScriptのjoin()メソッドの使い方
・join()メソッドの引数の有無による挙動の違いについて
・join()メソッドを使った応用テクニック【改行/split()との組み合わせ】


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

join()メソッドの使い方

基本的な使い方

join()メソッドの基本的な使い方は以下の通りです。

array.join("区切り文字");

join()メソッドは、レシーバである配列(上記では”array”)の全要素を連結した文字列を返します。

注意事項としては、join()メソッドは、引数を省略した場合と省略しなかった場合で結果が異なってくるということです。

まずは、引数を指定した場合と指定しなかった場合で、挙動がどのように変わるのかについて解説していきます。

join()メソッドの引数を指定しなかった場合

まずは、join()メソッドの引数を指定しなかった場合についてです。

引数を省略した場合は、配列の各要素に格納されている文字列を、カンマ「,」でつなぎ合わせたものが結果として返されます。

// 連結対象の配列
let array = ['This', 'is', 'a', 'pen'];

console.log(array.join()); // 結果:This,is,a,pen

サンプルコードを実行してみると、コンソール上に「This,is,a,pen」が出力されます。

単純にjoin()メソッドを呼び出した場合は、カンマを区切り文字として連結されることが分かります。

そのため、JavaScriptでcsvファイルを作成する場合に最適です。

join()メソッドの引数を指定した場合

つづいて、引数を指定した場合についてです。

引数を指定した場合は、引数で指定した文字列を区切り文字として、文字列をつなぎ合わせたものが戻り値となります。

// 連結対象の配列
let array = ['This', 'is', 'a', 'pen'];

// 「:」を区切り文字として連結
console.log(array.join(':')); // 結果:This:is:a:pen

// 「abc」を区切り文字として連結
console.log(array.join('abc')); // 結果:Thisabcisabcaabcpen

// 空白文字を区切り文字として連結
console.log(array.join(' ')); // 結果:This is a pen

// 区切り文字を入れずに連結
console.log(array.join('')); // 結果:Thisisapen

サンプルコードでは、さまざまな区切り文字を指定して文字列を連結する処理を実装しています。

また、14行目のように空文字を指定することで、配列内の文字列をそのまま連結させることも可能です。

区切り文字を指定しないつもりで引数を省略しても、先述したようにカンマが区切り文字として自動設定されてしまうことに注意してください。

配列内の要素が配列/オブジェクトの場合

JavaScriptでは、配列の中に配列やオブジェクトを含めたりすることができます。

そうした状況でjoin()メソッドを呼び出したときの挙動について、以下のサンプルコードで確認してみましょう。

// 連結対象の配列(多重配列)
let array1 = [[['This', 'That'], 'There'], 'is', 'a', 'pen'];

console.log(array1.join()); // 結果:This,That,There,is,a,pen

// 連結対象の配列(オブジェクトを含む)
let array2 = ['This', 'is', 'a', {name: 'pen', maker: 'uni'}];

console.log(array2.join()); // 結果:This,is,a,[object Object]

配列内に配列を含んでいる場合、その配列の中身に格納されている文字列も連結した結果が返されます。

一方、オブジェクトを含んでいる場合は中身が展開されません

実際にコンソール出力を見てみると、オブジェクトの部分は「[object Object]」と出力されていることが分かります。

配列にnullやundefinedが含まれていた場合

レシーバの配列にnullundefinedが含まれていた場合、join()メソッドはそれらを空文字として出力します

let array = ['This',, 'a', 'pen'];
console.log(array.join()); // 結果:This,,a,pen
あわせて読みたい

今回の記事は、 Javascriptの「null」って何?nullと他の値の違いは?nullとundefinedの違いが分からない というお悩みをお持ちの方に向けた記事になっています。 Javascriptには様々なデー[…]

プログラミングイメージ
あわせて読みたい

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・undefinedってなに?・JavaScriptでundefinedを判定するにはどうしたらいいの?・undefinedとnullの違いがわからない... […]

JavaScriptでundefinedを判定する方法6選 | typeofとvoid 0がおすすめ

join()メソッドを使った応用例

続いては、join()メソッドを使った応用例を2つご紹介します。

join()メソッドの使い方次第で、より複雑な処理を実装できるようになりますので、この機会にマスターしておきましょう。

join()メソッドを使って改行する

join()メソッドを使って文字列を改行する方法は、以下の2つがあります。

  • \nを引数に指定する
  • <br>タグを引数に指定する

join()メソッドの引数に\nを指定する

join()メソッドを使って文字列を改行させるためには、join()メソッドの引数に改行を示すエスケープシーケンスを指定します。

エスケープシーケンスとは、文字を出力する際にカーソルを移動させたりタブ文字を入力したりなど、文字出力の制御に利用される特殊な文字列のことです。

\n」は改行を示すエスケープシーケンスであり、この文字列自体はコンソール出力されない代わりに、文字列の改行が行われます。

これを区切り文字として引数に設定することで、配列の各文字列ごとに改行処理が施されているのです。

// 連結対象の配列(オブジェクトを含む)
let array = ['This', 'is', 'a', 'pen'];

// 改行を示すエスケープシーケンスを区切り文字として指定
let str_new_line = array.join('\n');

console.log(str_new_line);
// 結果:
// This
// is
// a
// pen

join()メソッドの引数に<br>タグを指定する

もう一つ、改行タグ<br>を使った文字列の改行について紹介します。

JavaScriptでは、ウェブページで動的な処理を実装するために、ウェブページ上の文字列を操作することが頻繁にあります。

そのような場面で文字列の改行処理を実装させるために必要なのが、改行タグ<br>です。

サンプルコードは以下の通りです。

<body>
  <div id="sample">
  </div>
</body>

<script>
// 連結対象の配列(オブジェクトを含む)
let array = ['This', 'is', 'a', 'pen'];

// 改行タグを区切り文字として指定
let str_new_line = array.join('<br>');

let sample = document.getElementById("sample");

sample.innerHTML = str_new_line;
</script>

サンプルコードでは、idがsampleのdiv要素を参照し、改行タグを含んだ文字列をHTMLとして埋め込んでいます。

ブラウザで確認すると、「This is a pen」が改行されながら表示されていることが分かります。

join()メソッドとsplit()メソッドを組み合わせて文字列を変換する

2つ目の応用は、split()メソッドと組み合わせて文字列を変換する方法です。

split()メソッドは、文字列中に存在するある文字を区切り文字として、文字列を分解し配列に格納する機能を持ちます。

端的に言えば、join()メソッドと逆の操作を行うメソッドです。

split()メソッドとjoin()メソッドを使った、文字列変換のサンプルコードを以下に示します。

// 変換前の文字列
let date_hyphen = "2020-01-01";

// split()メソッドで文字列を分解
let date_array = date_hyphen.split('-');

// 「/」を区切り文字として再結合
let date_slash = date_array.join('/');

console.log(date_slash); // 結果:2020/01/01

サンプルコードでは、split()メソッドとjoin()メソッドの2つを利用して、年月日の区切り文字を「-」から「/」に変換する処理を実装しています。

5行目で一旦、年月日をそれぞれ配列に格納し、8行目で再結合することで区切り文字を置き換えています。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptのjoinメソッドの使い方や応用テクニックについて解説してきましたがいかがでしたか?

配列を操作する際にこのjoin()メソッドは意外と使うことになりますので、今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。