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

С появлением в стандарте нативного JavaScript конструктора Int.ListFormat форматирование списков в соответствии с нужным языком и страной стало проще. Он обладает широкой кроссбраузерностью за исключением Internet Explorer.

Объект 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

Читайте также: Как форматировать типы валют с помощью Intel.NumberFormat в JavaScript.

Методы экземпляра конструктора

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 может похвастаться полной поддержкой всех основных браузеров, за исключением, конечно же, Internet Explorer.