【初学者向け】JavaScriptのjoinについて

今回はJavaScriptの『join( )』について丁寧に解説していきます。

今回も基本イメージについてサラッと解説して、そこから具体的にコードでも解説して行こうと思います

①join( )とは？

まず先に注意点になりますが英語の「join」という単語に引っ張られすぎて単純に「何かが加わる」と捉えない方が理解しやすいかなと思います。

大事なpointとしては２点。
【point①: 配列を文字列に変換する】
ここが最重要です。『配列→文字列』に変わるんです！
イメージとしては『配列に丁寧に並べられた要素をぎゅぎゅっと詰めて1つにくっつける』でOKです

【point②: 1つにくっつける際、間に指定したものを挟める】
こちらは注意点で言及したようなjoinの意味から理解しやすい箇所かと思います。
何も指定しなければ要素がぎゅっと結合するとこを「:」や「-」や「,」で区切ったり改行もできたりします。その際『''』(クォーテーション)で囲う必要があるので注意!

②コードで解説

まずは配列を用意

const today = [2021, 10, 10];

この用意した配列にjoinでいろんな処理したものをconsole.logで表示させていきます。

①何も入れない(空文字)

console.log(today.join(''));
// 20211010 　　　(このようにぎゅぎゅっと１つになります)

②「/」を入れる

console.log(today.join('/'));
// 2021/10/10

③「空白(スペース)」を入れる

console.log(today.join(' '));
// 2021 10 10  (①との違いに注意)

④「-」を入れる

console.log(today.join('-'));
// 2021-10-10

⑤「,」を入れる

console.log(today.join(','));
// 2021,10,10
//　ちなみに引数のデフォルトも ',' です

//　なので引数に何も渡さなくても結果は同じ
console.log(today.join());
// 2021,10,10

⑥「\n」を入れる(改行させる)

console.log(today.join('\n'));
// 2021
// 10
// 10

ちなみに「\」は　option + ¥　です。

まとめ

join()は①配列を文字列に変換する。その際にぎゅっとまとまるというイメージさえ掴めれば難しくないはずです。
今回の投稿も誰かの役に立つことを願っています