join() — 配列を1本の文字列にする

console.log([1, 2, 3].join('-'));
console.log([1, 2, 3].join());
console.log([].join('-') === '');

console.log([1, null, undefined, 2].join('-'));

引数を省くとカンマになります。空文字にしたいなら join('') と明示してください。

元の配列は変わりません。返るのは新しい文字列です。

null と undefined は空文字になる

ここがいちばん事故になります。

const values = [1, null, undefined, 2];

console.log(values.filter((v) => v != null).join('-'));

console.log([0, '', false, 'a'].join('-'));

消えるのは値だけで、区切り文字は残ります。 「- が並んでいる」ことでしか気づけません。

落としたいなら、先に取り除いてください。

const holed = [1, , 2];

console.log(holed.length);
console.log(holed.join('-'));

console.log([[1, 2], [3]].join('-'));

v != null は null と undefined の両方に当たります。ここでは意図した書き方です。

0 や空文字は残ります。

console.log([[1, 2], [3]].flat().join('-'));

console.log([1, 2].toString());
console.log(String([1, 2]));
console.log(`${[1, 2]}`);
console.log([1, 2] + '');

false は 'false' になり、空文字だけが消えたように見えます。

穴も空文字になる

const a = [1, 2];
const b = [3];

console.log(a.concat(b));
console.log(a.concat(4, [5, [6]]));
console.log(a);

const joined = [1, 2, 3].join('-');

console.log(joined.split('-'));
console.log(joined.split('-').map(Number));

穴と undefined は繋いだ後では見分けが付きません。

入れ子は平らに見える

const names = ['田中', '佐藤・鈴木'];
const joined = names.join('・');

console.log(joined);
console.log(joined.split('・').length);

内側の配列は、自分のカンマで繋がれてから外側に並びます。 指定した区切りが効くのはいちばん外側だけです。

平らにしてから繋いでください。

→ 入れ子の配列を平らにする

toString() と String() との関係

どれも join() を呼んでいます。 区切りはカンマで固定です。

配列をそのまま文字列に混ぜると、この形になります。 意図してカンマ区切りにしたのか、うっかり混ざったのかが読み手に伝わりません。 繋ぐつもりなら join() と書いてください。

concat() は別のもの

join() は文字列を返し、concat() は配列を返します。

配列は1段だけ開かれ、それ以外はそのまま入ります。 a は変わっていません。

いまはスプレッド構文で書くほうが多いです。 concat() が要るのは、配列かどうか分からないものを混ぜるときです。要素なら1つとして、配列なら開いて入ります。 → スプレッド構文と残余

逆向き：文字列を配列に戻す

戻ってくるのは文字列です。数として使うなら変換が要ります。 → String.prototype.split()

区切り文字が値の中にも入っていると、戻せません。

2件だったものが3件になりました。 値に含まれない区切りを選ぶか、JSON にしてください。 → JSON.parse() と JSON.stringify()

まとめ

• 引数を省くとカンマ。空文字なら join('') と書く
• null / undefined / 穴は空文字になり、区切りだけが残る
• 0 や false は残る
• 入れ子は内側がカンマで繋がれる。先に flat()
• String() も ${} も + も、中では join() を呼んでいる
• concat() が返すのは配列
• 値に区切り文字が入っていると元に戻せない