JavaScript配列の文字列結合（join）の基本と実践
配列の要素を指定した区切り文字でつないで、1つの文字列にするのが join。CSV作成、UI表示、ログ出力などでよく使います。
構文と基本ポイント
// 区切り文字を指定（省略可）
const str = arr.join(separator);
- 返り値: 新しい文字列（元の配列は変更されない）
- 区切り文字の省略: 省略時はカンマ「,」
- 型変換: 要素は文字列へ変換される（数値や真偽値もOK）
すぐ使えるテンプレート集
基本：カンマ区切り
const fruits = ["apple", "banana", "orange"];
console.log(fruits.join()); // "apple,banana,orange"
console.log(fruits.join(",")); // "apple,banana,orange"
- ポイント: 引数なしでもカンマ区切り。可読性のため通常は明示する。
区切り文字を変える
const nums = [1, 2, 3];
console.log(nums.join("-")); // "1-2-3"
console.log(nums.join(" | ")); // "1 | 2 | 3"
console.log(nums.join("")); // "123"（区切りなし）
- ポイント: 区切り文字は自由。空文字なら結合のみ。
改行入りで整形（複数行テキストに）
const lines = ["Line 1", "Line 2", "Line 3"];
console.log(lines.join("\n"));
/*
Line 1
Line 2
Line 3
*/
- ポイント: HTMLなら “<br>” を使ってもよい（プレーン文字列として）。
CSV行を作る（簡易）
const row = ["Aki", 22, "Tokyo"];
console.log(row.join(",")); // "Aki,22,Tokyo"
- ポイント: 値にカンマや改行を含む場合は厳密なCSVエスケープが必要（ここでは簡易例）。
null/undefined・空要素の扱い
const arr = [1, undefined, null, 4, , 5];
console.log(arr.join(",")); // "1,, ,4,,5" → null/undefined/空要素は空文字として結合
- ポイント: 「穴」や未定義は空文字になる。見せ方に注意。
オブジェクト配列はmapしてからjoin
const users = [
{ name: "Aki", age: 19 },
{ name: "Mao", age: 22 },
{ name: "Ren", age: 17 },
];
const names = users.map(u => u.name).join(", ");
console.log(names); // "Aki, Mao, Ren"
- ポイント: 直接joinすると “[object Object]” になる。必要なプロパティへ変換してから。
数値をフォーマットしてからjoin
const prices = [1200, 300, 450];
const formatted = prices.map(p => p.toLocaleString()).join(" / ");
console.log(formatted); // "1,200 / 300 / 450"
- ポイント: 見栄えを整えるときはmapで前処理。
よくある落とし穴と対策
- オブジェクトをそのままjoinする: “[object Object]” になる。
- 対策: 必要な文字列へ変換してからjoin（mapでプロパティ抽出やフォーマット）。
- null/undefined・空要素の混在: 空文字になるため意図しない連続区切りが出る。
- 対策: 事前にfilterで除去、またはデフォルト値を埋める。
- 区切りなしの結合忘れ: 連結だけしたいのに区切り文字を指定してしまう。
- 対策: 空文字 “” を区切りに指定。
- CSVの厳密さ: 値にカンマや改行、ダブルクォートがあると壊れる。
- 対策: ダブルクォートで囲み、内部の ” を “” にエスケープするなどの処理を入れる。
他メソッドとの使い分け
- join: 配列→文字列へ結合
- split: 文字列→配列へ分割（joinの逆）
- map: 表示用に整形してからjoin
- reduce: 複雑な連結ロジックが必要なとき
練習問題（手を動かして覚える）
- 基本の結合:
const tags = ["red", "blue", "green"];
console.log(tags.join(", ")); // "red, blue, green"
- 改行で整形:
const todo = ["Buy milk", "Email Ren", "Study JS"];
console.log(todo.join("\n"));
- オブジェクト配列のプロパティを結合:
const people = [{n:"Aki"},{n:"Mao"},{n:"Ren"}];
console.log(people.map(p => p.n).join(" / ")); // "Aki / Mao / Ren"
- 空要素を取り除いて結合:
const mixed = ["A", "", null, "C"];
console.log(mixed.filter(x => x && x !== "").join("-")); // "A-C"
直感的な指針
- 結合前に必要ならmapやfilterで整形。
- 区切り文字は明示すると可読性が上がる。
- オブジェクトは直接joinせず、文字列化してから使う。