Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
@frontend_1
Фото 🗣 Хватит склеивать массивы через .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
Перейти к посту Открыть в браузере
Если у вас установлено приложение,
вы можете сразу перейти в канал