Intl.ListFormat — языко-зависимое форматирование списков

Объект 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, всегда выручит соответствующий полифил.