📝 Рассказ фронтендера: “📝 Форматируем списки Intl.ListFormat - это встроенный JavaScript API…”

📝 Форматируем списки

Intl.ListFormat - это встроенный JavaScript API для форматирования списков на естественном языке. Вместо ручной склейки строк через запятые и союзы, он делает это автоматически, учитывая правила конкретного языка.

Основной синтаксис:

new Intl.ListFormat(locale, options)

options принимает два ключевых параметра:

🟠type — тип списка: "conjunction" (и), "disjunction" (или), "unit" (просто перечисление)
🟠style — стиль: "long", "short", "narrow"

Примеры:

const items = ['Яблоко', 'Банан', 'Вишня'];

// Союз «и» (conjunction) — по умолчанию
const conjRu = new Intl.ListFormat('ru', { type: 'conjunction' });
conjRu.format(items);
// → "Яблоко, Банан и Вишня"

// Союз «или» (disjunction)
const disjRu = new Intl.ListFormat('ru', { type: 'disjunction' });
disjRu.format(items);
// → "Яблоко, Банан или Вишня"

// Простое перечисление (unit)
const unitRu = new Intl.ListFormat('ru', { type: 'unit', style: 'narrow' });
unitRu.format(items);
// → "Яблоко Банан Вишня"

// Английский для сравнения
const conjEn = new Intl.ListFormat('en', { type: 'conjunction' });
conjEn.format(['Apple', 'Banana', 'Cherry']);
// → "Apple, Banana, and Cherry"

Метод formatToParts - возвращает массив объектов, если нужен контроль над каждой частью:

const fmt = new Intl.ListFormat('ru', { type: 'conjunction' });
fmt.formatToParts(['Кот', 'Пёс', 'Хомяк']);
// → [
//   { type: 'element', value: 'Кот' },
//   { type: 'literal', value: ', ' },
//   { type: 'element', value: 'Пёс' },
//   { type: 'literal', value: ' и ' },
//   { type: 'element', value: 'Хомяк' }
// ]

Это удобно, например, когда нужно обернуть каждый элемент в <span> с отдельным стилем.

🔵Практический кейс - вывод имён авторов:

function formatAuthors(authors, locale = 'ru') {
  if (authors.length === 0) return 'Автор неизвестен';
  return new Intl.ListFormat(locale, {
    style: 'long',
    type: 'conjunction',
  }).format(authors);
}

formatAuthors(['Толстой', 'Достоевский']);
// → "Толстой и Достоевский"

formatAuthors(['Толстой', 'Достоевский', 'Чехов']);
// → "Толстой, Достоевский и Чехов"

@frontend_tales