javascriptのjoinの使い方（配列を連結させ文字列にする）【現役SEが紹介】

javascriptで配列の各要素をくっつけて1つの文字列にしたいのだけどいい方法ないかな…。もしあるなら分かりやすく教えてほしいな。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

初心者向けにjavascripのjoinの書き方についてお伝えします。

joinは配列のArrayにあるメソッドの1つで、各要素をくっつけて一つの文字列にすることができます。
くっつける際にカンマなどの文字をいれることも可能です。知っておくと便利なのでこの機会に理解しておくとよいでしょう。

javascripのjoinとは何か

配列のjoin関数を使用することで、各要素を連結して1つの文字列にすることができます。

例えば以下の要素を保持している配列の場合、

[“りんご”, “みかん”, “いちご”]

以下のような文字列にできるイメージです。

“りんごみかんいちご”

これは単純に結合している形になりますが、このjoinにはseparatorいわゆる区切り文字を指定することができます。

例えば、各要素に半角スペースをいれて以下のようにすることも可能です。

“りんご みかん いちご”

具体的な書き方は次の項で記載していきます。

javascripのjoinの書き方

では、具体的にjavascriptのjoinの書き方について説明していきます。

書き方的には簡単で以下のような形になります。

配列.join(separator)

separatorは区切り文字です。指定なしだとカンマが間に入れて文字列連結します。
以下のような感じです。

const fruits = ['りんご', 'みかん', 'いちご'];
console.log(fruits.join());

結果

> "りんご,みかん,いちご"

カンマをいれずに連結させたい場合は以下のような書き方で可能です。
空文字を指定する形です。

const fruits = ['りんご', 'みかん', 'いちご'];
console.log(fruits.join(''));

結果

> "りんごみかんいちご"

内容的には以上になります。後は仕様によって区切りたい文字があるのであればそれを指定するイメージです。

例えば年月日の配列があって、/(スラッシュ)で区切って、[‘2022′, ’11’, ’21’]の配列を「2022/11/21」にしたい場合に/(スラッシュ)を指定してあげるだけになります。

どういった時に使用するのか

よくあるのがCSV形式の文字列にしたい場合などがあります。

カンマ区切りの文字列といった感じです。
※ただ実際にCSV形式にする場合はそれ用のライブラリがあったりするのでそちらを使用することが多いですが。

後はメールアドレスの宛先など利用できるセミコロン「；」で区切るときに利用することもあります。

配列の要素をくっつけて一つの文字列にしたい場合は、「join」を使ってみましょう！

最後に

簡単にですが、javascriptのjoinについて説明してみました。
まとめると以下のようなイメージです。