👩‍💻 Фишка: Intl.ListFormat — форматирование списков для разных языков Intl.ListFormat — это встроенный объект JavaScript для форматирования списков с учетом правил языка. Он автоматически добавляет правильные соединительные элементы (союзы, запятые) в зависимости от локали. // Создание форматтера для разных языков const fruits = ['яблоко', 'банан', 'апельсин', 'груша']; // Русское форматирование const ruList = new Intl.ListFormat('ru', { style: 'long', // long, short, narrow type: 'conjunction' // conjunction (и), disjunction (или), unit }); console.log(ruList.format(fruits)); // → "яблоко, банан, апельсин и груша" // Английское форматирование const enList = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }); console.log(enList.format(fruits)); // → "apple, banana, orange, and pear" // Форматирование с союзом "или" (дизъюнкция) const orList = new Intl.ListFormat('ru', { style: 'long', type: 'disjunction' }); const options = ['чай', 'кофе', 'сок']; console.log(orList.format(options)); // → "чай, кофе или сок" // Короткий стиль для компактного отображения const shortList = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' }); console.log(shortList.format(['HTML', 'CSS', 'JavaScript'])); // → "HTML, CSS, & JavaScript" // Для языков с разными правилами const deList = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' }); console.log(deList.format(['Montag', 'Dienstag', 'Mittwoch'])); // → "Montag, Dienstag und Mittwoch" // Динамическое форматирование в UI function formatIngredients(ingredients, lang = 'ru') { const formatter = new Intl.ListFormat(lang, { style: 'long', type: 'conjunction' }); return formatter.format(ingredients); } const pizzaToppings = ['сыр', 'помидоры', 'грибы', 'оливки']; console.log(Пицца с: ${formatIngredients(pizzaToppings)}); // → "Пицца с: сыр, помидоры, грибы и оливки" // Работа с числами const formatter = new Intl.ListFormat('ru', { style: 'long', type: 'conjunction' }); const coordinates = ['X: 10', 'Y: 20', 'Z: 30']; console.log(formatter.format(coordinates)); // → "X: 10, Y: 20 и Z: 30" // Сравнение стилей const colors = ['красный', 'синий', 'зеленый']; const long = new Intl.ListFormat('ru', { style: 'long' }); const short = new Intl.ListFormat('ru', { style: 'short' }); const narrow = new Intl.ListFormat('ru', { style: 'narrow' }); console.log(long.format(colors)); // → "красный, синий и зеленый" console.log(short.format(colors)); // → "красный, синий и зеленый" (может совпадать) console.log(narrow.format(colors)); // → "красный, синий, зеленый" 📌 Преимущества: — Автоматическая локализация списков — Правильные грамматические конструкции для каждого языка — Поддержка разных стилей длинный, короткий, узкий) — Работа с союзами "и" (конъюнкция) и "или" (дизъюнкция) — Идеально для многоязычных интерфейсов — Учитывает культурные особенности форматирования 🧡 Ghostly Frontend | #фишки