JavaScriptで配列を文字列に変換する方法：toString()とjoin()の使い分け

JavaScriptで配列を文字列に変換する方法を、2つの異なるメソッドを使ってわかりやすく解説します。

JavaScriptには、配列の内容を文字列として返すためのメソッドがいくつか用意されています。それが toString() と join() です。一見すると両者はほぼ同じように見えますが、実際には違いがあります。それぞれ試しながら確認していきましょう。

まず、数値のリストを含む配列オブジェクトを用意します。

const numbersArray = [2, 4, 6, 8, 10]

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

この配列を文字列に変換するために、numbersArray に toString() メソッドを付けてみましょう。

const numbersArray = [2, 4, 6, 8, 10]
numbersArray.toString()

次に、結果を出力して確認します。

console.log(numbersArray.toString())
// String: "2,4,6,8,10"

ご覧のとおり、toString() によって数値の配列が、次のような1つの文字列値に変換されました。

"2,4,6,8,10"

しかし、よく見るとカンマの後のスペースがすべて削除されています。単語間にスペースを残したい場合（例：単語や行の折り返しを可能にしたい場合）は、どうすればよいのでしょうか。

join()メソッドで区切り文字を指定する

そんなときに便利なのが、JavaScriptの join() メソッドです。区切り文字を引数として渡すことで、スペースを含んだ文字列を生成できます。

const numbersArray = [2, 4, 6, 8, 10]
numbersArray.join(", ")

結果を出力してみましょう。

console.log(numbersArray.join(", "))
// "2, 4, 6, 8, 10"

見た目がずっと整い、必要に応じて単語や行の折り返しにも対応できるようになりました。

join() と toString() の違い：知っておくと便利なポイント

• 配列に対しては、join() メソッドは toString() とほぼ同じ動作をしますが、区切り文字を指定できる点が異なります。
• join() は配列メソッドであるため、配列オブジェクトにしか使用できません。
• toString() メソッドは、配列だけでなくすべての種類のオブジェクトで動作します。