Справочник · JavaScript

Метод join(): массив в строку

Редакция PraktumОбновлено 25 октября 20265 мин чтенияУровень: новичок

Метод join(separator) соединяет все элементы массива в одну строку через разделитель. Без аргумента разделителем будет запятая без пробела. null и undefined превращаются в пустые строки, остальные элементы — в строки. Исходный массив не меняется. Обратная операция — split у строки.

Минимальный пример

const tags = ['html', 'css', 'javascript'];

tags.join(', ');   // 'html, css, javascript'
tags.join(' · ');  // 'html · css · javascript'
tags.join();       // 'html,css,javascript'

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

Особые случаи

Пустые значения оставляют «дыры» между разделителями. Отфильтруй их до склейки: arr.filter(Boolean).join(', '). Объекты сначала преобразуй в строки через map.

join после map

const users = [{ name: 'Аня' }, { name: 'Боря' }, { name: 'Вика' }];
users.map((u) => u.name).join(', ');   // 'Аня, Боря, Вика'

const address = [city, street, house].filter(Boolean).join(', ');

Связка map + join — стандартный способ превратить массив объектов в строку. filter(Boolean) перед join убирает пустые части адреса, чтобы не получилось «Москва, , 10».

Список с «и»: Intl.ListFormat

const fmt = new Intl.ListFormat('ru', { style: 'long', type: 'conjunction' });
fmt.format(['HTML', 'CSS', 'JavaScript']);   // 'HTML, CSS и JavaScript'
fmt.format(['HTML', 'CSS']);                  // 'HTML и CSS'

new Intl.ListFormat('ru', { type: 'disjunction' }).format(['чай', 'кофе']);  // 'чай или кофе'

Для текста, который читает человек, join(', ') даёт неестественное «HTML, CSS, JavaScript». Intl.ListFormat ставит «и» или «или» перед последним элементом по правилам языка.

Сборка строк и путей

const classes = ['btn', isPrimary && 'btn--primary', isLarge && 'btn--lg'].filter(Boolean).join(' ');
const path = ['api', 'users', userId, 'orders'].join('/');      // 'api/users/42/orders'
const csvLine = row.map((cell) => `"${String(cell).replaceAll('"', '""')}"`).join(',');

join удобен для сборки списка CSS-классов, путей и строк CSV. Для CSV значения нужно экранировать: кавычки удваивать, а каждую ячейку брать в кавычки, иначе запятые внутри текста сломают формат.

Многострочный текст

const report = [
  `Заказ №${order.id}`,
  `Сумма: ${order.total} ₽`,
  `Доставка: ${order.address}`,
].join('\n');

Массив строк, соединённый через '\n', читается проще, чем одна длинная строка с переносами. Удобно для текстов писем, логов и содержимого textarea.

join, toString и шаблонные строки

String([1, 2, 3]);    // '1,2,3' — то же, что join()
`${[1, 2, 3]}`;       // '1,2,3'
[1, 2, 3].toString(); // '1,2,3'

Массив, подставленный в строку, автоматически вызывает join() с запятой. Если в шаблонной строке получилось «a,b,c» без пробелов, значит, массив вставлен напрямую — добавь явный join(', ').

join или split

Частые ошибки

• Ждут пробел после запятой от join() без аргумента.
• Склеивают массив объектов и получают [object Object].
• Не фильтруют пустые значения и получают двойные разделители.
• Пишут «a, b, c» для людей вместо «a, b и c» через Intl.ListFormat.
• Собирают CSV без экранирования запятых и кавычек.

Доступность

Списки, которые человек должен воспринимать как перечень, лучше выводить списком ul, а не строкой через запятую: скринридер объявит количество пунктов. Строка через join подходит для коротких перечислений внутри фразы.

Поддержка браузерами

join поддерживается всеми браузерами. Intl.ListFormat — во всех актуальных браузерах.

const listFmt = new Intl.ListFormat('ru', { type: 'conjunction' });

function formatAuthors(authors) {
  const names = authors.map((a) => a.trim()).filter(Boolean);
  return names.length ? listFmt.format(names) : 'Автор неизвестен';
}

formatAuthors(['Аня', '', 'Боря', 'Вика']); // 'Аня, Боря и Вика'
formatAuthors([]);                       // 'Автор неизвестен'