JavaScript 配列のjoin()メソッドとは
join()はJavaScriptの配列型のメソッドであり、配列のすべての要素を連結して新しい文字列を返すことができます。
配列.join()
// もしくは
配列.join(セパレータ)join()メソッドには、オプションでセパレータ（文字列）を指定できます。セパレータを指定することで、隣接する配列内の要素はセパレータを挟んで繋がります。
join()メソッドにセパレータを渡さない場合、デフォルトはカンマになります。
join()を使用する上で押さえておくべきポイントは以下の通りです。
- 配列の要素が1つの場合は、その1つの要素を文字列として返す
- 配列の要素が文字列でない場合、join()はそれらを文字列に変換してから結合する
- 配列が空の場合は、空の文字列を返す
- undefinedだけの配列、またはnullだけの配列も空の文字列を返す
join()を使用したコード例
以下のユースケースを想定して、具体的にjoin()が使われるコード例を見ていきます。
- 配列内の要素を空白文字で繋げる
- スペースで区切られた文字列を小文字に統一し、ハイフンで繋げ直す
配列内の要素を空白文字で繋げる
以下はシンプルに配列内の要素を全て空白文字で結合する例です。
let names = ['Tanaka', 'Aoki', 'Kato', 'Yamazaki', 'Sawada']
let numbers = [123, 456, 789]
let joinedName = names.join(' ')
let joinedNumber = numbers.join(' ')
console.log(joinedName) // 'Tanaka Aoki Kato Yamazaki Sawada'
console.log(joinedNumber) // '123 456 789'数値の配列もjoin()した結果は1つの文字列となります。
スペースで区切られた文字列を小文字に統一し、ハイフンで繋げ直す
let sampleString = 'JavaScript Array join Method';
let result = sampleString.split(' ').join('-').toLowerCase();
console.log(result);上記のコードでは、
- split()でsampleString変数の文字列を配列にする
- join()で配列内の要素をハイフンで結合し、新しく文字列を作る
- toLowerCase()で新しくできた文字列を全て小文字にする
という処理が行われてます。
