
Объект Intl.ListFormat — конструктор для удобного форматирования списков в соответствии с используемым языком для конкретной страны. Он может принимать три значения:
- conjunction;
- disjunction;
- unit.
Как работает конструктор Intl.ListFormat
Встроенный в него метод format() красиво объединяет в строки элементы массива. Без него пришлось бы создавать дополнительные функции для размещения запятых и слов «и» / «или» в соответствующих местах. Intl.ListFormat упрощает форматирование строк.
const fruits = ['яблоко', 'апельсин', 'слива']; const fruitsList_1 = new Intl.ListFormat('ru', { style: 'long', type: 'conjunction' }); console.log(fruitsList_1.format(fruits)); // Получаем в консоли яблоко, апельсин и слива const fruitsList_2 = new Intl.ListFormat('ru', { style: 'short', type: 'disjunction' }); console.log(fruitsList_2.format(fruits)); // Получаем в консоли яблоко, апельсин или слива const fruitsList_3 = new Intl.ListFormat('ru', { style: 'narrow', type: 'unit' }); console.log(fruitsList_3.format(fruits)); // Получаем в консоли яблоко апельсин слива
Конструктор может принимать два необязательных параметра.
new Intl.ListFormat([locales[, options]]);
В случае отсутствия второго параметра дефолтным является первый вариант с использованием значения conjunction.
const fruitsList_4 = new Intl.ListFormat('ru'); console.log(fruitsList_4.format(fruits)); // Получаем в консоли яблоко, апельсин и слива
Настройка параметров конструктора Intl.ListFormat
Locale — содержит строку или массив строк с тегом языка BCP 47.
Options — объект с одним или всеми тремя доступными свойствами:
- localeMatcher: алгоритм сопоставления locale (доступные значения: lookup и best fit, из который второй является дефолтным);
- type: формат вывода (доступные значения: conjunction (составляет список с использованием союза «и», является дефолтным), disjunction (выводит значения через «или») или unit (для значений с единицами измерений));
- style: стиль форматирования (доступные значения: long (установлен по дефолту), short или narrow (используется только со значением параметра type: unit)).
Статические методы конструктора
- Intl.ListFormat.supportedLocalesOf() возвращает массив поддерживаемых локалей (locales). Это устраняет необходимость использовать дефолтное значение этого параметра.
const langs = ['ban', 'ru', 'en-US', 'de-AI']; const currentLocale = { localeMatcher: 'lookup' }; let format = Intl.ListFormat.supportedLocalesOf(langs, currentLocale).join(', '); console.log(format); // Получаем в консоли поддерживаемые языки ru, en-US, de-AI
Использование свойства localeMatcher с дефолтным значением.
const langs = ['ban', 'ru', 'en-US', 'de-AI']; let format = Intl.ListFormat.supportedLocalesOf(langs).join(', '); console.log(format); // Получаем в консоли поддерживаемые языки ru, en-US, de-AI
Методы экземпляра конструктора
- Intl.ListFormat.prototype.format(): возвращает языко-зависимую отформатированную строку, представляющую перечень элементов массива.
- Intl.ListFormat.prototype.formatToParts(): возвращает массив объектов, представляющих различные компоненты, которые можно использовать для форматирования списка значений с учетом локали.
В следующем примере показано, как работает последний метод в списке выше, возвращающий отформатированные части.
const fruits = ['яблоко', 'апельсин', 'слива']; const fruitsList_1 = new Intl.ListFormat('ru', { style: 'long', type: 'conjunction' }); console.log(fruitsList_1.formatToParts(fruits)); // Получаем в консоль объект /* 0: {type: "element", value: "яблоко"} 1: {type: "literal", value: ", "} 2: {type: "element", value: "апельсин"} 3: {type: "literal", value: " и "} 4: {type: "element", value: "слива"} */
В результате, мы получаем в консоль массив объектов. Каждый из них включает ключ type со значением element или literal и value — значение элемента массива или разделитель (запятая или союз «и»).
Кроссбраузерность
Пока поддержкой конструктора Intl.ListFormat могут похвастаться не все браузеры согласно данным сервиса Can I Use. В этом случае, как и для других конструкторов объекта Intl API, всегда выручит соответствующий полифил.