JavaScriptの配列でjoinを使う！結合して文字列に

JavaScriptで配列の要素を結合して文字列を作成するjoinメソッドについて解説します。
joinメソッドを使うと、配列の要素を任意の区切り文字で連結した文字列を生成できます。

実際に動くサンプルを使って、以下の操作を解説します。

joinメソッドの基本的な使い方

joinメソッドは、配列の要素を連結して1つの文字列にします。
基本的な構文は以下のとおりです。

array.join(separator)

• separator: 要素を連結する際に使用する区切り文字（省略可能）。

配列要素を連結して文字列を作成する

配列の要素をjoinメソッドで結合するサンプルコードです。

const fruits = ['apple', 'banana', 'orange'];
const joinedString = fruits.join();

console.log(joinedString); // 結果：apple,banana,orange

fruits配列を作成して、次の行でjoinメソッドを呼び出しています。

引数なしで実行すると、配列の要素がカンマ,で連結されて文字列が生成されます。
このようにjoinメソッドの引数を省略した場合、デフォルトでカンマが区切り文字として使用されます。

区切り文字を指定する

joinメソッドの引数に区切り文字を指定することで、要素を連結する際に使用する文字を自由に設定できます。

const fruits = ['apple', 'banana', 'orange'];
const joinedStringWithHyphen = fruits.join('-');

console.log(joinedStringWithHyphen); // 結果：apple-banana-orange

joinメソッドに区切り文字としてハイフン-を指定しています。
結果、配列の要素がハイフンで区切られた文字列として返ってきます。

joinで改行する

区切り文字として改行文字\nを指定すると、配列の要素が改行されて連結された文字列が生成されます。

const fruits = ['apple', 'banana', 'orange'];
const joinedStringWithNewline = fruits.join('\n');

console.log(joinedStringWithNewline); 
// 結果：
// apple
// banana
// orange

joinで空文字を使ったら？

区切り文字として空文字""を指定すると、要素が連結されただけの文字列が生成されます。

const fruits = ['apple', 'banana', 'orange'];
const joinedStringWithoutSeparator = fruits.join('');

console.log(joinedStringWithoutSeparator); // 結果：applebananaorange

配列にnullやundefinedがあった場合

配列にnullやundefinedが含まれている場合、joinメソッドはそれらを空文字として扱います。

const mixedArray = ['apple', null, 'orange', undefined, 'grape'];
const joinedStringWithNullAndUndefined = mixedArray.join('-');

console.log(joinedStringWithNullAndUndefined); // 結果：apple--orange--grape

mixedArray配列にはnullとundefinedが含まれていますが
joinメソッドを使うと、それぞれの場所は、空文字が入ったことが確認できます。

joinメソッドを使うメリット

joinメソッドを使う主なメリットは以下のとおりです。

• 配列要素を簡単に文字列に変換できる: 配列要素を特定の形式の文字列に変換する処理を簡単に記述できます。
• 柔軟な区切り文字指定: 区切り文字を自由に設定できるため、様々な形式の文字列を生成できます。
• コードの可読性向上: 配列要素を連結する処理をjoinメソッドを使って記述することで、コードの可読性が向上します。

JavaScriptのjoinメソッドの使い方まとめ

今回はJavaScriptのjoinメソッドの使い方について解説しました。
記事の内容をまとめます。