配列の全要素を連結して作成した文字列を取得する

Array オブジェクトに含まれる join メソッドを使用すると、配列に含まれるすべての要素を順に文字列に変換したあと連結して作成した文字列を取得することができます。連結を行うときには引数で指定した区切り文字を使って連結されます。ここでは JavaScript で配列の全要素を連結して作成した文字列を取得する方法について解説します。

(Last modified: 2024-09-04)

要素を連結して作成した文字列を取得する(joinメソッド)

Array オブジェクトの join メソッドを使うと、要素を連結して作成した文字列を取得できます。書式は次の通りです。

配列名.join()
配列名.join(区切り文字)

引数に指定した区切り文字でそれぞれの要素の値を連結した文字列を返します。要素の値はいったん文字列に変換され、そのあとで連結されます。区切り文字を省略した場合はカンマ(,)が指定されたものとして扱われます。

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

let fruit = ['Apple', 120, 'Grapes', 80];

console.log(fruit.join());
>> Apple,120,Grapes,80

console.log(fruit.join(' + '));
>> Apple + 120 + Grapes + 80

console.log(fruit.join(''));
>> Apple120Grapes80

今回のサンプルでは、引数を省略した場合と引数の区切り文字を指定した場合で試してみました。要素を区切り文字なしで連結したい場合には引数に空文字 '' を指定してください。

もう一つサンプルをみてください。

let fruit = [['Apple', 120], ['Grapes', 80]];

console.log(fruit.join(' + '));
>> Apple,120 + Grapes,80

配列の要素に別の配列が含まれている場合、まず要素の配列が文字列に変換されます。配列を文字列に変換すると、各要素をカンマ(,)で連結した文字列となるため、そのあとで join メソッドの引数で指定された区切り文字で連結されます。その為、上記のような結果となります。

次のサンプルは配列に存在しない要素があった場合です。

let no = [10, 15, , 24];

console.log(no.join(','));
>> 10,15,,24

要素が undefined や null だった場合には空文字 '' として連結されます。

配列を文字列に変換する(toStringメソッド)

join メソッドで要素に配列が格納されていた場合などに、配列を文字列に変換するときに使用されるのが toString メソッドです。書式は次の通りです。

配列名.toString()

配列に対して toString メソッドを使用すると、配列の各要素をカンマ(,)で連結した文字列が返されます。

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

let fruit = ['Apple', 'Grapes', 'Orange'];

console.log(fruit.toString());
>> Apple,Grapes,Orange

配列に含まれる各要素が文字列に変換され、そのあとでカンマ(,)で連結した文字列を返します。

-- --

JavaScript で配列の全要素を連結して作成した文字列を取得する方法について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。