Основи JavaScript Internationalization API

2 хв. читання

Дозвольте мені почати з нудного визначення з Вікіпедії:

Інтернаціоналізація — процес адаптації продукту, такого як програмне, або апаратне забезпечення, до мовних і культурних особливостей регіону (регіонів), відмінного від того, в якому розроблявся продукт.

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

Щоб досягти цього, більшість з нас використовують сторонні бібліотеки, такі як globalize, або покладаються на вбудовану підтримку в фреймворках наприклад, як в Angular.

Однак, JavaScript має нативну підтримку інтернаціоналізації. Так, я знаю, що ви думаєте:

Погана підтримка і сумісність з різними браузерами.

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

Основи JavaScript Internationalization API

Як ви можете бачити, всі основні браузери підтримують API. Тепер, коли ви можете не хвилюватись за підтримку, розгляньмо основи.

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

Об'єкт Intl

Об'єкт Intl – об'єкт, який виступає в ролі простору імен для Internationalization API, який забезпечує мовне порівняння рядків, форматування чисел, дати та часу.

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

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

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

// З користувальницькою локалізацією

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

// Налаштування валюти

// "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)

І, звичайно, ми можемо інтегрувати це в наш фреймворк. Наприклад, якщо ви працюєте з VueJS, ви можете створити спеціальний фільтр чисел.

Ви можете знайти повну документацію на сайті MDN.

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

API Intl.DateTimeFormat дає змогу форматувати дату та час.

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

// З користувальницькою локалізацією

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

// Налаштування форматування

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);

І знову ви можете знайти повну документацію на сайті MDN.

Порівняння рядків

API Intl.Collator дозволяє використовувати чутливе до мови порівняння рядків.

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

Більш детально описано в документації на сайті MDN.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.7K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація