Какие встроенные методы JavaScript помогают соединить строки с разделителем

Что проверяют

Знаете ли вы join глубже, чем «склеивает через запятую»: как он обращается с null, пустыми слотами и вложенными массивами. Следом обычно спрашивают, чем join лучше самописного reduce или склейки в цикле.

Как отвечать

Главный ответ один, Array.prototype.join(separator):

• разделитель: по умолчанию запятая без пробела, [1, 2, 3].join() даёт "1,2,3". С пустой строкой join('') элементы склеиваются вплотную;
• null и undefined: превращаются в пустую строку, а не в слово "null". Так же ведут себя дырки в разреженном массиве, поэтому Array(4).join('-') даёт три дефиса;
• остальные значения: приводятся к строке. Вложенный массив идёт через свой toString, то есть тоже через запятую: [1, [2, 3]].join(';') вернёт "1;2,3", а объект станет "[object Object]";
• пустой массив: вернёт пустую строку без ошибки.

Рядом стоит назвать инструменты для соседних задач:

• Intl.ListFormat: человеческий список с союзом по правилам языка. new Intl.ListFormat('ru', { type: 'conjunction' }).format(['a', 'b', 'c']) даст "a, b и c";
• шаблонные строки и String.prototype.concat: когда частей мало и они известны заранее;
• filter(Boolean).join(' '): частый приём для списка CSS-классов, хотя в проектах для этого обычно берут clsx;
• split и join: старая пара для замены всех вхождений подстроки, сейчас для этого есть replaceAll.

reduce для склейки возможен, но проигрывает в читаемости, а без начального значения на пустом массиве бросает TypeError.

Где спотыкаются

Думают, что join без аргумента ставит запятую с пробелом, и получают слипшийся текст в интерфейсе.

Не проверяют данные: filter(Boolean) выкидывает не только пустые строки, но и число 0, которое могло быть осмысленным значением.

Путают Array.prototype.concat со склейкой строк: он соединяет массивы, а строка появится только после join.