では join() と toString() をしっかり身につけるために、初心者〜中級向けの練習問題を10問＋解答付きで用意しました。順にやっていくと理解が深まります。
練習問題（join / toString）
初級（配列を文字列にする基本）
問題 1
配列 ['猫', '犬', '鳥'] を "猫・犬・鳥" の文字列にしてください。
問題 2
配列 [10, 20, 30] を空文字区切りで '102030' にしてください。
問題 3
配列 ['A','B','C'] を toString() で文字列にしてください。
中級（少し加工する）
問題 4
配列 [1, undefined, 3, null] をカンマ区切りの文字列にしてください。
→ そのままだとどうなるか確認し、undefined と null を '0' に置き換えた文字列も作ってみましょう。
問題 5
配列 [['りんご', 100], ['バナナ', 200]] を "りんご:100,バナナ:200" にしてください。
問題 6
配列 [{name:'太郎'}, {name:'花子'}, {name:'次郎'}] から "太郎 / 花子 / 次郎" を作ってください。
上級（少し工夫が必要）
問題 7
配列 [1, [2,3], 4] を "1,2,3,4" にしてください（フラット化が必要）。
問題 8
配列 [true, false, null, undefined] を "true|false|null|undefined" にしてください。
→ null と undefined を文字列 "null" / "undefined" として扱うこと。
問題 9
配列 ['A','B','C'] を "A-B-C" にして、その後 "A/B/C" に書き換える2パターン作ってください。
問題 10
配列 [ {fruit:'りんご', price:100}, {fruit:'バナナ', price:200} ] から "りんごは100円, バナナは200円" という文章を作ってください。
解答例
// 問題1
console.log(['猫','犬','鳥'].join('・')); // "猫・犬・鳥"
// 問題2
console.log([10,20,30].join('')); // "102030"
// 問題3
console.log(['A','B','C'].toString()); // "A,B,C"
// 問題4
let arr4 = [1, undefined, 3, null];
console.log(arr4.join(',')); // "1,,3,"
console.log(arr4.map(x => x == null ? 0 : x).join(',')); // "1,0,3,0"
// 問題5
console.log([['りんご',100],['バナナ',200]].map(pair => pair.join(':')).join(','));
// "りんご:100,バナナ:200"
// 問題6
console.log([{name:'太郎'},{name:'花子'},{name:'次郎'}].map(u => u.name).join(' / '));
// "太郎 / 花子 / 次郎"
// 問題7
console.log([1,[2,3],4].flat().join(',')); // "1,2,3,4"
// 問題8
console.log([true,false,null,undefined].map(x => String(x)).join('|'));
// "true|false|null|undefined"
// 問題9
let arr9 = ['A','B','C'];
console.log(arr9.join('-')); // "A-B-C"
console.log(arr9.join('/')); // "A/B/C"
// 問題10
let arr10 = [{fruit:'りんご', price:100}, {fruit:'バナナ', price:200}];
console.log(arr10.map(x => `${x.fruit}は${x.price}円`).join(', '));
// "りんごは100円, バナナは200円"
ポイントまとめ
join()は区切り文字を自由に選べるtoString()はカンマ区切り固定map()と組み合わせると、オブジェクトやネスト配列も自在に文字列化できるundefined/nullは空文字になるので、必要に応じて変換する