Intl: JavaScript i18n – iTelmenko. WebDeveloper's blog

При создании веб приложений часто приходится решать однотипные задачи интернационализации. Получить строку с относительной датой (например, 1 day ago), вывести форматированную стоимость товара с указанием валюты или сравнить строки (подходящим для выбранного языка способом). JavaScript развивается достаточно быстро. В нем появились и развитые средства интернационализации.

Объект Intl является пространством имён для API интернационализации.

Имеются следующие конструкторы объектов

Intl.Collator – позволяет сравнивать строки с учетом языка
Intl.DateTimeFormat – позволяет форматировать дату и время с учетом языка
Intl.DisplayNames – перевод названий языка и региона
Intl.ListFormat – позволяет форматировать список с учетом языка
Intl.Locale – работа с идентификаторами локали Unicode
Intl.NumberFormat – позволяет форматировать числа с учетом языка.
Intl.PluralRules – форматирование с учетом множественного числа и языковые правила для множественного числа
Intl.RelativeTimeFormat – форматирование относительного времени с учетом языка
Intl.Segmenter – сегментация текста с учетом локали.

И статические методы

Intl.getCanonicalLocales – возвращает канонические имена локалей
Intl.supportedValuesOf – Возвращает отсортированный массив, содержащий поддерживаемые уникальные значения календаря, сортировки, валюты, системы нумерации или единицы измерения

Небольшие примеры для каждого объекта.

// Сравнение без Collator вернет true (строка "ёрш" больше, что неверно, если учесть алфавитный порядок)
console.log( "ёрш" > "ядро" ); 
// Сравнение с помощью Collator -1 (ёрш меньше, верно)
let collator = new Intl.Collator();
console.log( collator.compare("ёрш", "ядро") );

const date = new Date(Date.UTC(2022, 04, 16, 3, 23, 16, 738));
// Определяем язык (локаль) для форматирования даты
console.log(new Intl.DateTimeFormat('en-US').format(date));
// Ожидается вывод: "5/16/2022"

// Определяем стиль даты и времени
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long' }).format(date));
// Ожидаем вывод "Monday, 16 May 2022 at 06:23:16 GMT+3"

const regionNames = new Intl.DisplayNames(['ru'], {type: 'region'});
console.log(regionNames.of('RU')); // Россия
console.log(regionNames.of('CH')); // Швейцария

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 amount = 7301.14;
 
const en = new Intl.NumberFormat("en").format(amount);
const ru = new Intl.NumberFormat("ru").format(amount);
const de = new Intl.NumberFormat("de").format(amount);
 
console.log(en);    // 7,301.14
console.log(ru);    // 7 301,14
console.log(de);    // 7.301,14

// Cоздаем formatter в нужной локали
let rtf = new Intl.RelativeTimeFormat("ru", {
    localeMatcher: "best fit", // Другие значения: "lookup"
    numeric: "always", // Другие значения: "auto"
    style: "long", // Другие значения: "short" or "narrow"
});
// Форматируем с использование отрицательной величины (-1).
console.log(rtf.format(-1, "day")); // 1 день назад
// Форматируем с ипользование положительной величины
console.log(rtf.format(1, "day")); // через 1 день


// Используем auto
rtf = new Intl.RelativeTimeFormat("ru", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // вчера
console.log(rtf.format(1, "day")); // завтра

const segmenter = new Intl.Segmenter('ru', { granularity: 'word' });
const string1 = 'Трава у дома';
const iterator1 = segmenter.segment(string1)[Symbol.iterator]();

console.log(iterator1.next().value.segment); // Трава
console.log(iterator1.next().value.segment); // пробел

Intl.getCanonicalLocales('RU-RU'); // ["ru-RU"]
Intl.getCanonicalLocales(['RU-RU', 'Fr']); // ["ru-RU", "fr"]

Intl.getCanonicalLocales('RU_RU');
// RangeError:'EN_US' is not a structurally valid language tag

Intl.supportedValuesOf("collation").forEach(function(collation) {
   // "big5han", "compat", "dict", "emoji", ...
});

Intl.supportedValuesOf("currency").forEach(function(currency) {
   // "ADP", "AED", "AFA", "AFN", "ALK", "ALL", "AMD", ...
});

Intl.supportedValuesOf("numberingSystem").forEach(function(numberingSystem) {
   // "adlm", "ahom", "arab", "arabext", "bali", ...
});

Intl.supportedValuesOf("timeZone").forEach(function(timeZone) {
   // "Africa/Abidjan", "Africa/Accra", "Africa/Addis_Ababa", "Africa/Algiers", ...
});

Intl.supportedValuesOf("unit").forEach(function(unit) {
   // "acre", "bit", "byte", "celsius", "centimeter", ...
});

Полезные ссылки

Оставить ответ Отменить ответ