Локализация

Введение в Internationalization API

Внедрение последних стандартов добавило в язык JavaScript встроенные возможности локализации или то что, представляет Internationalization API. Хотя распостраненные браузеры уже доволно внедрили данный API, но если мы работаем со старыми версиями браузеров, то мы можем столкнуться, что данный API не поддерживается. На этот случай мы можем проверить доступность объекта window.Intl:

if (window.Intl && typeof window.Intl === "object"){  
    console.log("Internationalization API поддерживается");
} 
else {  
    console.log("Internationalization API не поддерживается");
}

Возможности Internationalization API представлены главным образом следующими объектами:

• Intl.ListFormat: применяется для форматирования списков

• Intl.DisplayNames: применяется для форматирования некоторых наименований

• Intl.DateTimeFormat: применяется для форматирования дат и времени

• Intl.NumberFormat: применяется для форматирования чисел

• Intl.Collator: применяется для сравнения строк

Для создания объектов этих типов применяются соответствующие функции-конструкторы, которые принимают до 3 параметров (на примере конструктора Intl.Collator()):

new Intl.Collator()
new Intl.Collator(locales)
new Intl.Collator(locales, options)

В качестве первого параметра передаются используемые локали. Если этот параметр не указан, то используется локаль по умолчанию. Дополнительно во все функции-конструкторы можно передать необязательный объект конфигурации, который зависит от конкретного типа конструктора.

Локаль представляет код языка в формате BCP 47 или набор языковых кодов. Можно использовать основной код локали. Например, английский язык представлен кодом "en". Однако могут быть разные вариации языка, и чтобы их отразить, к основному коду можно добавить код региона, например, "en-GB" (британский английский) или "en-US" (американский английский). Аналогично русский язык определяется кодом "ru" (либо региональными вариантами типа "ru-RU"), немецкий - кодом "de" и т.д.

Пример создания объектов для русскоязычной локали:

const locale = "ru";
const ruDateTimeFormat = new Intl.DateTimeFormat(locale);
const ruNumberFormat = new Intl.NumberFormat(locale);
const ruCollactor = new Intl.Collator(locale);

Также можно передать набор локалей

const locales = [ "ru-RU", "en-US", "de-DE"];
const dateTimeFormat = new Intl.DateTimeFormat(locales);
const numberFormat = new Intl.NumberFormat(locales);
const collactor = new Intl.Collator(locales);

В данном случае локализации будет применяться первая поддерживаемая локаль. Так, в списке [ "ru-RU", "en-US", "de-DE"] первой идет локаль "ru-RU", которая представляет российский вариант русского языка. Если эта локаль не поддерживается, тогда браузер смотрит поддерживается ли язык из основного кода локали, то есть в данном случае "ru" (русский язык без привязки к региону). Если и он не поддерживается, тогда браузер проверяет поддержку второй локали в массиве - в данном случае "en-US". Если и эта локаль не поддерживается, тогда проверяется локаль основного кода - "en" и так далее. В итоге браузер будет применять первую поддерживаемую локаль.

Если ни одна из локалей из списка не поддерживается браузером, тогда применяется локаль по умолчанию.

Чтобы проверить, поддерживается ли определенная локаль текущим браузером можно использовать статический метод supportedLocalesOf()

Intl.Collator.supportedLocalesOf()
Intl.DateTimeFormat.supportedLocalesOf()
Intl.NumberFormat.supportedLocalesOf()

В данный метод передается локаль или массив локалей, поддержку которых надо проверить. Например:

console.log(Intl.NumberFormat.supportedLocalesOf("ru"));    // русский
console.log(Intl.NumberFormat.supportedLocalesOf("ar"));    // арабский
console.log(Intl.NumberFormat.supportedLocalesOf(["de", "bo"])); // немецкий и тибетский

Данный метод возвращает массив поддерживаемых локалей, которые относятся к проверямым локалям. Например, в моем случае вывод будет следующим:

["ru"]
["ar"]
["de"]

Как видно из вывода тибетский у меня не поддерживается.