10.02.2026 09:32
🗣 Хватит склеивать массивы через .
🗣 Хватит склеивать массивы через .join(', ')
Каждый фронтендер хотя бы раз писал функцию, которая превращает массив ['A', 'B', 'C'] в строку «A, B и C».
Обычно это выглядит как костыль:
// ❌ Старый, хрупкий способ
const names = ['Alex', 'John', 'Sam'];
const str = names.slice(0, -1).join(', ') + ' и ' + names.at(-1);
// А если массив пустой? А если один элемент? Нужно писать кучу if-ов.
В JavaScript уже давно есть встроенный API для этого - Intl.ListFormat. Он делает то же самое, но правильно и с учетом языковых правил (локали).
✅ Как это делается профессионально:
const tools = ['React', 'Vue', 'Svelte'];
// 1. Создаем форматтер для русского языка
const ruFormatter = new Intl.ListFormat('ru', {
style: 'long', // 'long', 'short', 'narrow'
type: 'conjunction' // 'conjunction' (и), 'disjunction' (или), 'unit' (просто список)
});
console.log(ruFormatter.format(tools));
// "React, Vue и Svelte"
// 2. Меняем локаль на английскую — логика "Oxford comma" работает сама!
const enFormatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
console.log(enFormatter.format(tools));
// "React, Vue, and Svelte"
🔥 Вариант с «ИЛИ» (disjunction): Идеально для сообщений об ошибках или подсказок.
const orFormatter = new Intl.ListFormat('ru', { type: 'disjunction' });
console.log(orFormatter.format(['строка', 'число']));
// "строка или число"
Почему это круто:
1. Ноль зависимостей. Не нужно тащить i18n-библиотеки ради списков.
2. Умная грамматика. API знает, где ставить запятые, где союзы, и как это делать в китайском, арабском или немецком языках.
3. Обработка края. Корректно работает с пустыми массивами и массивами из одного элемента без лишних проверок.
👉 @frontend_1
Каждый фронтендер хотя бы раз писал функцию, которая превращает массив ['A', 'B', 'C'] в строку «A, B и C».
Обычно это выглядит как костыль:
// ❌ Старый, хрупкий способ
const names = ['Alex', 'John', 'Sam'];
const str = names.slice(0, -1).join(', ') + ' и ' + names.at(-1);
// А если массив пустой? А если один элемент? Нужно писать кучу if-ов.
В JavaScript уже давно есть встроенный API для этого - Intl.ListFormat. Он делает то же самое, но правильно и с учетом языковых правил (локали).
✅ Как это делается профессионально:
const tools = ['React', 'Vue', 'Svelte'];
// 1. Создаем форматтер для русского языка
const ruFormatter = new Intl.ListFormat('ru', {
style: 'long', // 'long', 'short', 'narrow'
type: 'conjunction' // 'conjunction' (и), 'disjunction' (или), 'unit' (просто список)
});
console.log(ruFormatter.format(tools));
// "React, Vue и Svelte"
// 2. Меняем локаль на английскую — логика "Oxford comma" работает сама!
const enFormatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
console.log(enFormatter.format(tools));
// "React, Vue, and Svelte"
🔥 Вариант с «ИЛИ» (disjunction): Идеально для сообщений об ошибках или подсказок.
const orFormatter = new Intl.ListFormat('ru', { type: 'disjunction' });
console.log(orFormatter.format(['строка', 'число']));
// "строка или число"
Почему это круто:
1. Ноль зависимостей. Не нужно тащить i18n-библиотеки ради списков.
2. Умная грамматика. API знает, где ставить запятые, где союзы, и как это делать в китайском, арабском или немецком языках.
3. Обработка края. Корректно работает с пустыми массивами и массивами из одного элемента без лишних проверок.
👉 @frontend_1