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

0
508

Мы, как владельцы или разработчики приложений, стремимся обеспечивать хороший UX и подстраивать пользовательский интерфейс на основе территориального расположения и языка пользователя. Например, пользователь с США увидит другой формат даты, чем пользователь из Великобритании.

Чтобы достичь этого, большинство из нас используют сторонние библиотеки, такие как globalize, либо полагаются на встроенную поддержку в фреймворков, например, Angular.

Однако, JavaScript имеет нативную поддержку интернационализации. Да, я знаю, что вы думаете:

«Плохая поддержка и совместимость с различными браузерами.»

Но позвольте удивить вас.

Знакомство с JavaScript Internationalization API
Знакомство с JavaScript Internationalization API. Исходник фото.

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

Примечание: Internationalization API не является полноценным фреймворком интернационализации; он может быть полезным для большинства задач локализации, включая даты, числа и валюты.

Объект Intl

Объект Intl — объект, который выступает в роли пространства имен для Internationalization API и обеспечивает языковое сравнения строк, форматирование чисел, даты и времени.

Форматирование чисел

API Intl.NumberFormat позволяет форматировать числа. Разберем несколько примеров.

// "4,000"
new Intl.NumberFormat().format(4000);

// With custom locale

// "123.456,789"
new Intl.NumberFormat('de-DE').format(123456.789);

// Customize the currency

// "120.000,00 EUR"
new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', currencyDisplay: 'code' })
        .format(120000)

// "1,23,000"
new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 })
        .format(123456.789)

Форматирование даты

API Intl.DateTimeFormat позволяет форматировать дату и время.

// "12/22/2017"
new Intl.DateTimeFormat().format(new Date(2017, 11, 22));

// With custom locale

// "22/12/2017"
new Intl.DateTimeFormat('en-GB').format(new Date(2017, 11, 22));

// Customize the formatting 

const options = {
  year: 'numeric', month: 'numeric', day: 'numeric',
  hour: 'numeric', minute: 'numeric', second: 'numeric',
  hour12: false,
  timeZone: 'America/Los_Angeles' 
};
// "12/19/2012, 19:00:00"
new Intl.DateTimeFormat('en-US', options).format(date);

Сравнение строк

The Intl.Collator API позволяет сравнивать строки с учетом языка и региональных параметров.

new Intl.Collator().compare('a', 'c'); // → a negative value