📝 Рассказ фронтендера

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

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: 'Хомяк' }
// ]

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

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

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

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

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

🈵🈹 Регулярки в мультиязычных приложениях

Если вам нужно провалидировать имя при помощи регулярки, будьте аккуратны: в имени могут быть специфичные символы. 😁

Например, такая регулярка /^[a-zа-яё]+$/i - вроде норм, но есть нюанс. Пользователи с именем René или Bożena не пройдут. Изменим регулярку /^\w+$/u - тоже ошибка. В некоторых языках это пройдет, но вот в JavaScript нет - \w строго привязан к латинице ASCII ([a-zA-Z0-9_]) даже с флагом u. Эта регулярка не пропустит кириллицу или арабскую вязь, зато пропустит цифры и нижнее подчёркивание. Для React-приложений с формами это не подходит 👎

🟠/^\p{L}+$/u - разрешает только буквы во всех языках. Флаг u включает поддержку Unicode, а \p{L} (Letter) означает любую букву любого алфавита в мире.

Люди часто имеют двойные имена или именные частицы (Anna-Maria, d'Artagnan, Mary Jane). Строгая регулярка выше такие имена не пропустит. Для продакшена лучше использовать расширенный вариант:
/^[\p{L}\s'-]+$/u - пропускает буквы любых языков, а также пробелы, дефисы и апострофы.

🧑‍💻 Пример функции

export const isValidName = (name) => {
// Используем расширенный вариант для реальной жизни
const nameRegex = /^[\p{L}\s'-]+$/u;
return nameRegex.test(name);
};


@frontend_tales