Рубрики
Без рубрики

Интернационализация JavaScript

Узнайте, как работать с интернационализацией в JavaScript

Intl – это мощный объект, который предоставляет API интернационализации JavaScript .

Он предоставляет следующие свойства:

  • Международный. Collator : предоставляет вам доступ к сравнению строк с учетом языка
  • Международный. Формат даты и времени : предоставляет доступ к форматированию даты и времени с учетом языка
  • Международный. Формат чисел : предоставляет доступ к форматированию чисел с учетом языка
  • Международный. Правила множественного числа : предоставляет вам доступ к языковому форматированию множественного числа и правилам множественного числа
  • Международный. Формат относительного времени : предоставляет доступ к относительному форматированию времени с учетом языка

Он также предоставляет один метод: Intl.получить канонические локали() .

Intl.getcanonicallocales() позволяет проверить, является ли языковой стандарт допустимым, и возвращает правильное форматирование для него. Он может принимать строку или массив:

Intl.getCanonicalLocales('it-it') //[ 'it-IT' ]
Intl.getCanonicalLocales(['en-us', 'en-gb']) //[ 'en-US', 'en-GB' ]

и выдает ошибку, если языковой стандарт неверен

Intl.getCanonicalLocales('it_it') //RangeError: Invalid language tag: it_it

который вы можете поймать с помощью блока try/catch.

Различные типы могут взаимодействовать с API Intl в соответствии со своими конкретными потребностями. В частности, мы можем упомянуть:

  • Строка.прототип.localeCompare()
  • Номер.прототип.toLocaleString()
  • Дата.прототип.toLocaleString()
  • Дата.прототип.toLocaleDateString()
  • Дата.прототип.toLocaleTimeString()

Давайте посмотрим, как работать с указанными выше свойствами Intl:

Международный. Коллектор

Это свойство предоставляет вам доступ к сравнению строк с учетом языка

Вы инициализируете объект Collator с помощью new Intl. Collator() , передавая ему языковой стандарт, и вы используете его метод compare() , который возвращает положительное значение, если первый аргумент следует за вторым. Отрицательный, если это обратное, и ноль, если это то же значение:

const collator = new Intl.Collator('it-IT')
collator.compare('a', 'c') //a negative value
collator.compare('c', 'b') //a positive value

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

Международный. Формат даты и времени

Это свойство предоставляет вам доступ к форматированию даты и времени с учетом языка.

Вы инициализируете объект формата даты и времени с помощью new Intl. DateTimeFormat() , передавая ему языковой стандарт, а затем вы передаете ему дату, чтобы отформатировать ее в соответствии с предпочтениями этого языка:

const date = new Date()
let dateTimeFormatter = new Intl.DateTimeFormat('it-IT')
dateTimeFormatter.format(date) //27/1/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-GB')
dateTimeFormatter.format(date) //27/01/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.format(date) //1/27/2019

Метод format To Parts() возвращает массив со всеми частями даты:

const date = new Date()
const dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.formatToParts(date)
/*
[ { type: 'month', value: '1' },
  { type: 'literal', value: '/' },
  { type: 'day', value: '27' },
  { type: 'literal', value: '/' },
  { type: 'year', value: '2019' } ]
*/

Вы также можете распечатать время. Проверьте все параметры, которые вы можете использовать в MDN .

Международный. Формат номера

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

Скажем, у вас есть такой номер, как 10 , и это представляет собой цену чего-то.

Вы хотите преобразовать его в $10,00 .

Если число содержит более 3 цифр, однако оно должно отображаться по-другому, например, 1000 должно отображаться как $1.000,00

Однако это в долларах США.

В разных странах существуют разные соглашения для отображения значений .

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

Это очень хорошо поддерживается:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})

formatter.format(1000) // "$1,000.00"
formatter.format(10) // "$10.00"
formatter.format(123233000) // "$123,233,000.00"

Свойство minimumFractionDigits устанавливает, что часть дроби всегда должна быть не менее 2 цифр. Вы можете проверить, какие другие параметры вы можете использовать в страница MDN в числовом формате .

В этом примере создается форматировщик чисел для валюты евро для итальянской страны:

const formatter = new Intl.NumberFormat('it-IT', {
  style: 'currency',
  currency: 'EUR'
})

Международный. Правила множественного числа

Это свойство предоставляет вам доступ к языковому форматированию множественного числа и правилам множественного числа языков. Я нашел пример на портале разработчиков Google от Матиаса Байненса единственный, который я мог бы связать с практическим использованием: присвоение суффикса упорядоченным номерам: 0-й, 1-й, 2-й, 3-й, 4-й, 5-й..

const pr = new Intl.PluralRules('en-US', {
    type: 'ordinal'
})
pr.select(0) //other
pr.select(1) //one
pr.select(2) //two
pr.select(3) //few
pr.select(4) //other
pr.select(10) //other
pr.select(22) //two

Каждый раз, когда мы попадаем туда , мы переводим это в . Если у нас есть один , мы используем st . Для двух мы используем nd . мало получает рд .

Мы можем использовать объект для создания ассоциативного массива:

const suffixes = {
  'one': 'st',
  'two': 'nd',
  'few': 'rd',
  'other': 'th'
}

и мы выполняем функцию форматирования, чтобы ссылаться на значение в объекте, и возвращаем строку, содержащую исходное число и его суффикс:

const format = (number) => `${number}${suffixes[pr.select(number)]}`

Теперь мы можем использовать его вот так:

format(0) //0th
format(1) //1st
format(2) //2nd
format(3) //3rd
format(4) //4th
format(21) //21st
format(22) //22nd

Обратите внимание, что в Intel скоро появятся приятные вещи, такие как Intel. Формат относительного времени и Международный. Формат списка , которые на момент написания доступны только в Chrome и Opera.

Оригинал: “https://flaviocopes.com/javascript-internationalization/”

Читайте ещё по теме: