JavaScriptで配列を扱う際、「配列の要素を一つの文字列にまとめたい」と思うことはよくあります。例えば、
- 配列の値をカンマ区切りで出力してCSVデータを作成したい
- 文字列のリストを結合して一文のテキストを作成したい
- HTMLのリストを生成したい
このような場面で便利なのが、配列の結合メソッドです。特にjoin()はシンプルで直感的に使える方法ですが、他にもtoString()やreduce()を活用することで、さまざまなカスタマイズが可能になります。
この記事では、JavaScriptで配列を文字列に変換する方法を、基本から応用まで分かりやすく解説します。あなたのコーディングの幅を広げるヒントになれば幸いです！
基本的な結合方法
JavaScriptでは、配列を一つの文字列に結合する方法としてjoin() メソッドが最も一般的です。
join() の基本的な使い方
join() メソッドは、配列の各要素をしていた区切り文字で結合し、１つの文字列として返します。
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.join(", "));
// 出力: "apple, banana, cherry"上記の例では、配列の各要素が 「, （カンマ）＋ 半角スペース」 で結合されています。
区切り文字を変更する
join() は、好きな区切り文字を指定することができます。
console.log(fruits.join(" - "));
// 出力: "apple - banana - cherry"
console.log(fruits.join(""));
// 出力: "applebananacherry"（区切りなし）
console.log(fruits.join("\n"));
/* 出力:
apple
banana
cherry
（改行で結合） */このように、カンマ以外にも、ハイフンや空文字、改行文字などを自由に指定できます。
区切り文字を省略するとどうなる？
join()の引数を省略した場合、デフォルトの区切り文字「カンマ , 」が適用されます。
console.log(fruits.join());
// 出力: "apple,banana,cherry"次のセクションでは、join()以外の方法で配列を結合する方法を紹介します！
他の方法と比較
配列を文字列に結合する方法はjoin()だけではありません。他にも、toString()やreduce()を使って文字列化することができます。それぞれの違いを見てみましょう。
toString() メソッド
toString() は、配列をカンマ区切りの文字列に変換するメソッドです。
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.toString());
// 出力: "apple,banana,cherry"join()のデフォルトの挙動（区切り文字を省略した場合）と同じ結果になります。
しかし、toString()は区切り文字を変更できないため、柔軟性の面でjoin()の方が優れています。
reduce() を使ったカスタム結合
reduce()メソッドを使うと、より細かい制御が可能です。例えば、特定のフォーマットで文字列を結合したい場合に便利です。
const numbers = [1, 2, 3, 4];
// ハイフンで結合
const result = numbers.reduce((acc, curr) => acc + " - " + curr);
console.log(result);
// 出力: "1 - 2 - 3 - 4"この方法を使うと、文字列の前後に特定の処理を加えたり、途中で条件分岐を入れたりすることも可能になります。
テンプレートリテラルとmap() の組み合わせ
配列の各要素に対して何らかの加工を施してから結合したい場合、map()とjoin()を組み合わせる方法もあります。
const list = ["Home", "About", "Contact"];
const html = `<ul>${list.map(item => `<li>${item}</li>`).join("")}</ul>`;
console.log(html);
// 出力: "<ul><li>Home</li><li>About</li><li>Contact</li></ul>"このように、HTMLのリストを作成する際などに便利です。
まとめ
この記事では、JavaScriptで配列を1つの文字列に結合する方法を紹介しました。
🔹 join()：最もシンプルで使いやすく、区切り文字を自由に指定できる。
🔹 toString()：デフォルトでカンマ区切りになるが、区切り文字の変更は不可。
🔹 reduce()：カスタマイズ性が高く、条件付きの結合など細かい制御が可能。
🔹 map() + join()：要素を加工しながら結合する際に便利。
配列を結合する目的に応じて、最適な方法を選びましょう。特に、基本的な用途ではjoin()が最も直感的で使いやすいため、まずはこれを習得するのがおすすめです。
ぜひ、今回紹介した方法を実際に試して、あなたのコードに活かしてみてください！
コメント