Знакомство с Intl API в JavaScript

Настройка приложения для пользователей из разных стран возможна и без подключения внешних библиотек. В этом поможет конструктор Intl API, включающий в себя широкие возможности предоставлять различные данные в зависимости от географического нахождения пользователя, в том числе и в динамичном режиме.
Создание глобальных приложений или расширение географической зоны использования текущих сервисов предусматривает их персонализацию. Речь идет об адаптации под различные страны, языки и часовые пояса.

В связи с тем, что JavaScript получил новый объект, этот процесс стал проще. Ранее требовались дополнительные библиотеки (momentjs, luxon, date-fns).

Конструктор Intl API

Intl API недавно получил несколько дополнений, которые существенно дополняют и расширяют его возможности для настройки пользовательских интерфейсов. Он также имеет конструктор для реализации специального форматирования данных.

Согласно официальной документации MSDN объект Intl представляет собой пространством имен для API, отвечающего за интернационализацию ECMAScript. Он обеспечивает сравнение строк с учетом языка и формата чисел, включая дату и время. Он предоставляет доступ к нескольким конструкторам, а также к функциям, общим для конструкторов интернационализации и другим параметрам.

Intl API включает несколько конструкторов, добавленных в пространство имен:

• Intl.Collator (конструктор для «сортировщиков», которые представляют собой объекты, позволяющие сравнивать строки с учетом языка);
• Intl.DateTimeFormat (для объектов, которые включают чувствительное к языку форматирование даты и времени);
• Intel.Display Names (обеспечивает согласованный перевод отображаемых имен языка, региона и прочего);
• Intl.ListFormat (для объектов, которые позволяют форматировать список с учетом языка);
• Intl.Locale (для объектов, представляющих идентификатор локали в Unicode);
• Intl.NumberFormat (для объектов, которые позволяют форматировать числа с учетом языка);
• Intl.PluralRules (для объектов, которые включают форматирование с учётом множественного числа и языковых правил для множественного числа);
• Intl.Relative Time Format (для объектов, которые включают форматирование относительного времени с учетом языка).

Мы подробно остановимся на каждом из вышеперечисленных конструкторов в отдельных публикациях, включая возможные варианты их использования в приложениях.

В этой статье мы лишь рассмотрим несколько примеров того, как это работает.

const date = new Date(); 
const locale = 'ru-Ru'; 
const ruFormat= new Intl.DateTimeFormat(locale).format(date); 

// Получаем 04.03.2021 
console.log(ruFormat);

С помощью всего лишь нескольких строк кода мы получили локальную дату. Все это можно было бы сделать и одной строкой кода, но в этом примере она разбита на части для простоты понимания.

Например, у нас есть переменная ruFormat, которую мы можем повторно использовать в приложении без необходимости повторения кода. Очень важным аргументом, который получает конструктор Intl.DateTimeFormat, является параметр locale.

В частности, идеальным вариантом станет его получение динамически в зависимости от места нахождения пользователя.

// Результат вывода в консоль зависит от местоположения и настроек пользователя 
const locale = navigator.language; 

// Для России мы получим в консоли ru 
console.log(locale);

Основные принципы аргумента locale

Стоит отметить, что для понимания принципа работы и использования Intl API глубокое изучение параметра locale не требуется. Если же вы хотите знать, как это работает, то ниже можно ознакомиться с основной информацией о нем.

Locale — строка, представляющая собой набор пользовательских настроек, включая, но не ограничиваясь ими, следующие:

• дата и время (следует ли отображать дату с помощью арабского или китайского календаря);
• числа и валюта (необходимо ли использовать римские цифры и различные валюты, например, фунты или доллары);
• часовые пояса, языки и страны;
• единицы измерения (такие как кг, фунты и т.д.).

Аргумент locale должен быть строкой в языковом тенге BCP 47. Она разделена дефисом с некоторыми необязательными и обязательными элементами, например.

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

// Только en является обязательным. US — это дополнительная информация, которая помогает установить настройки для конкретной страны

// Английский язык в США
 'en-US' 

// Таким способом можно задать немецкий язык, используемый в Австрии 
'de-AT' 

// Упрощенный вариант китайского языка 
'zh-Hans-CN'

Основные принципы аргумента options

В силу того, что Intel API имеет аргумент options, он обеспечивает широкую гибкость применения объекта. В этом случае Intl.DateTimeFormat принимает два параметра — local и options.

// Задаем настройки 
const options = { 
    year: '2-digit', 
    month: 'short', 
    day: '2-digit', 
    hour: 'numeric', 
    minute: 'numeric', 
    weekday: 'long', 
    hour12: true,
 }; 

// Выводим в консоль дату и время для России 
console.log(new Intl.DateTimeFormat('ru-RU', options).format(new Date())); 

// Получаем четверг
04 мар. 21 г., 3:42 PM 

// Выводим в консоль дату и время для США 
console.log(new Intl.DateTimeFormat('en-US', options).format(new Date())); 

// Получаем Thursday
Mar 04, 21, 3:44 PM

Кроссбраузерность Intl API

К слову сказать, встроенный в JavaScript глобальный объект Intl API позволяет отказаться от внешних библиотек. Это позволяет форматировать данные в соответствии с предпочтениями пользователя. Это сокращает объем кода и не влияет негативно на скорость работы и время загрузки приложения. Что касается поддержки объекта, то он работает во всех популярных браузерах, кроме Internet Explorer.