Мы, как владельцы или разработчики приложений, стремимся обеспечивать хороший UX и подстраивать пользовательский интерфейс на основе территориального расположения и языка пользователя. Например, пользователь с США увидит другой формат даты, чем пользователь из Великобритании.
Чтобы достичь этого, большинство из нас используют сторонние библиотеки, такие как globalize, либо полагаются на встроенную поддержку в фреймворков, например, Angular.
Однако, JavaScript имеет нативную поддержку интернационализации. Да, я знаю, что вы думаете:
«Плохая поддержка и совместимость с различными браузерами.»
Но позвольте удивить вас.
Как вы можете видеть, все основные браузеры поддерживают его. Теперь, когда вы можете не волноваться за поддержку, рассмотрим основы.
Примечание: 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
