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

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

В прошлом комплексное решение для достижения этой цели представляло сбой применение нескольких библиотек, таких как momentjs, luxon, date-fns и других.

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

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

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

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

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

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

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

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. Она разделена дефисом с некоторыми необязательными и обязательными элементами, например. 'zh-Hans-CN'


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

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

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

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

Intl 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

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

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

Пока Intl API не поддерживается всеми браузерами, но уже имеет достаточно широкий охват согласно данным сервиса Can I Use.