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

2022年6月6日
Javascript
Javascript

Javascript

みなさんこんにちは！

今回の記事は、

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

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

この記事の内容

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

フリーランス案件を探すならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い・福利厚生サービスが受けられる・首都圏の案件が中心	・給与保証制度で安定した収入を得られる・税務処理のサポートあり・マージン率は実質20%	・週2/週3の案件が多い・在宅/リモート案件が多い・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス・株式会社ユーザベース	・Sansan株式会社・株式会社一休・株式会社FiNC Technologies など	・クックパッド株式会社・株式会社カオナビ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている・カウンセリングに時間をかける・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント・業界経験者がキャリアコンサルタントを務める・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス・スキル・経験重視で評価してもらえる・他エンジニアの入札結果を見ることで自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社・株式会社サイバーエージェント・Chatwork株式会社など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ・ZOZOテクノロジーズ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

1 join()メソッドの使い方
2 join()メソッドを使った応用例
- 2.1 join()メソッドを使って改行する
 - 2.1.1 join()メソッドの引数に\nを指定する
 - 2.1.2 join()メソッドの引数に タグを指定する
- 2.2 join()メソッドとsplit()メソッドを組み合わせて文字列を変換する
3 最後に

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が含まれていた場合

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

let array = ['This',, 'a', 'pen'];
console.log(array.join()); // 結果：This,,a,pen

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

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

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

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

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

\nを引数に指定する
タグを引数に指定する

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()メソッドの引数に タグを指定する

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

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

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

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

<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行目で再結合することで区切り文字を置き換えています。

最後に

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

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

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

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