Як розпочати роботу з інтернаціоналізації в JavaScript

Адаптуючи наші програми для різних мов та країн, ми забезпечуємо кращу взаємодію з користувачами. Користувачам простіше мати справу з відомими позначеннями дат, валют та чисел.

Інтернаціоналізація (i18n) передбачає додавання підтримки додатків для різних мов та країн.Цифра 18 означає кількість літер між першим "i" і останнім "n" .

Прикладами інтернаціоналізації можуть бути підтримка Unicode, налаштування інтерфейсу користувача для різних алфавітів або сортування масивів неанглійських рядків.

JavaScript реалізує специфікацію API інтернаціоналізації та визначає вбудований об’єкт Intl.

І що робить його таким корисним, це те, що він має чудову сумісність між браузерами та підтримку Node.js:

Давайте розпочнемо!

IntlОб'єкт надає доступ до кількох конструкторам, як:

  • Intl.DateTimeFormat - форматування дати та часу з урахуванням мови.
  • Intl.NumberFormat - форматування чисел, чутливих до мови.
  • Intl.PluralRules - чутливе множинне форматування та правила множинної мови.
  • Intl.Collator - мовне чутливе порівняння рядків.

Створення будь-якого з цих об'єктів відбувається за простим зразком:

const formatter = new Intl.ctor(locales, options);

Наприклад, локаль “ de-AT” : німецька мова, як вона використовується в Австрії:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

Потім ми викликаємо метод format () із наданим об’єктом Date :

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Він містить лише мову та коди країн. Незабаром ми побачимо більш вичерпні приклади. Тут ви можете знайти більше прикладів мови.

Ми можемо використовувати navigator.language - бажану мову для користувача, яку ми використовуємо як локаль:

Тут замість прямого виклику методу форматування ми можемо призначити його як функцію. Це чудово, адже як тільки ми створили спеціалізовану функцію форматування, ми можемо використовувати її кілька разів.

Всього кілька рядків коду, і у вас локалізована дата!

Отже, ми підемо глибше і дізнаємось більше про місцевість. Якщо ви не готові до цього і хочете побачити лише такі демонстрації, як на малюнку нижче, перейдіть до розділу прикладів нижче!

Занурення глибше

Ну, цього достатньо, щоб скласти уявлення про те, як це працює, але реальні випадки використання можуть ускладнитися. Що, якби ми хотіли:

  • відображати нашу дату, використовуючи японський або перський календар
  • використовуйте тайські або арабсько-індійські цифри як для дат, так і для цифр
  • використовувати спрощену китайську
  • Будь-яка комбінація вищезазначеного?

Що таке Locale?

Для того, щоб працювати з цим API, ми повинні дізнатись більше про локалі. Перш за все давайте визначення.

Мова - це ідентифікатор, який посилається на набір користувацьких уподобань, таких як:

  • дати та час
  • цифри та валюти
  • перекладені назви часових поясів, мов та країн
  • одиниці виміру
  • порядок сортування (сортування)

Мова не чутлива до регістру. Це лише конвенція .

Мова повинна бути рядком, що містить тег мови BCP 47, і всі частини розділені дефісами.

Давайте подивимось на наступний приклад:

Знову ж таки, лише чотири рядки коду? Давайте подивимося на діаграму нижче та вивчимо кожну частину нашої мови:

З цього малюнка видно, що потрібна лише перша частина - мовний код. Навряд чи вам потрібна така локація. Але це хороший приклад того, як поглянути на всі можливі частини мови та отримати уявлення про те, що таке локаль.

Наш регіон містить усі можливі частини:

  • zh (мовний код) - китайська мова
  • Ганс (код сценарію) - написаний спрощеними символами
  • CN (код країни) - як використовується в Китаї.
  • бодда (варіант) - з використанням буддистського гібридного санскритського діалекту
  • u-nu-hanidec (розширення) - з використанням десяткових чисел Хана

Нижче ви можете знайти більше прикладів для сценаріїв, варіантів та розширень.

Коди сценаріїв

Вони використовуються з мовними тегами, щоб вказати, яким сценарієм написана мова. Наприклад:

Варіантні коди

Варіанти представляють мовний діалект.

Розширення

Він включає різні календарі та числові системи.

Календарі мають префікс “u-ca-”, можливі значення (не всі включені):

Числові системи мають префікс “u-nu”, можливі значення (не всі включені):

Організація Iana відповідає за оновлення цього списку.

Переговори про локаль

Останнє, що ми повинні дізнатись про локалі, - це те, як вони вирішуються. Цей приклад ми бачили раніше:

const formatter = new Intl.ctor(locales, options);

localesАргумент одиночного локаль або масив локалей. Середовище (браузер або Node.js) порівнює його з доступними локалями та вибирає найкращий.

Існує два алгоритми відповідності:

  • пошук - перевіряє від більш конкретного до меншого: якщо zh-Hans-SG недоступний, отримайте zh-Hans , якщо ні - zh, інакше - локаль за замовчуванням.
  • найкраще підходить (за замовчуванням) - Покращений алгоритм. Якщо запитується «es-GT» - іспанська для Гватемали, але не знайдено, то замість того, щоб вказати запасний варіант як «es», буде обрано «es-MX» - іспанська в Мексиці.

Якщо ми надаємо масив мов, то перший матч виграє.

Отже, досить теорії - зараз час практикуватися!

Приклади

Код для прикладів можна знайти на GitHub.

Форматування дати / часу

Локалі - це не єдине, що чудово стосується Intl API. Ви можете змінити результат бажаним способом, використовуючи optionsаргумент.

Це масове оновлення порівняно з об’єктом Date !

На відміну від moment.js, ви не можете вручну поміняти місцями будь-яку частину дати, наприклад рік та місяць. Натомість вам слід використовувати правильну локаль. Це може звучати як обмеження , але це робить його більш звичним для наших користувачів.

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

Знаючи, як поводитися з датами, ви знаєте, як поводитися з цифрами. Єдина відмінність - список варіантів:

Форматування валюти

Для валют ми використовуємо Intl.NumberFormatконструктор, але надаємо інший перелік варіантів:

Зауважте, ми не конвертуємо гроші тут. Все, що ми робимо - це відформатувати номер 172630, використовуючи відповідні правила валют. Тут ви знайдете список кодів валют.

Форматування правил множини

Це вказує вам, яка форма застосовується на основі заданого числа для певної локалі:

Це може бути дуже зручно для форматування порядкових номерів:

Сортування рядків

Сортування рядків, які містять зайві літери, такі як ä, німецькою чи шведською мовами - це не те, що ви хочете робити вручну, лише через те, що порядок залежить від мови. На наше щастя, ми маємо . І знову все, що нам потрібно зробити, це надати необхідну локаль:Intl.Collator

Висновок

Інтернаціоналізація - велика і складна тема. Але якщо ви знаєте, що таке локаль і як її побудувати, решта надзвичайно проста у використанні.

Це воно!

Якщо у вас є якісь запитання чи відгуки, повідомте мене про це в коментарях нижче або надішліть мені повідомлення в Twitter.

Якщо це було корисно, клацніть клацніть? кілька разів, щоб показати свою підтримку! ⬇⬇ ??

Ось ще статті, які я написав:

Як спростити свою базу коду за допомогою map (), зменшити () та фільтрувати () у JavaScript

Коли ви читаєте про Array.reduce та наскільки це круто, першим, а іноді і єдиним прикладом, який ви знайдете, є сума… Налаштування готових до виробництва Node.js REST API Node.js, готових до виробництва, за допомогою TypeScript, PostgreSQL та Redis.

Місяць тому мені дали завдання створити простий API пошуку. Все, що йому потрібно було зробити, це отримати деякі дані від третьої сторони… medium.com

Дякуємо за читання ❤️