Дозвольте мені почати з нудного визначення з Вікіпедії:
Інтернаціоналізація — процес адаптації продукту, такого як програмне, або апаратне забезпечення, до мовних і культурних особливостей регіону (регіонів), відмінного від того, в якому розроблявся продукт.
Ми, як власники чи розробники застосунків, прагнемо забезпечувати гарний UX та підлаштовувати користувальницький інтерфейс на основі територіального розташування та мови користувача. Наприклад, юзер з США побачить інший формат дати, ніж користувач з Великобританії.
Щоб досягти цього, більшість з нас використовують сторонні бібліотеки, такі як globalize, або покладаються на вбудовану підтримку в фреймворках наприклад, як в Angular.
Однак, JavaScript має нативну підтримку інтернаціоналізації. Так, я знаю, що ви думаєте:
Погана підтримка і сумісність з різними браузерами.
Але дозвольте здивувати вас.
Як ви можете бачити, всі основні браузери підтримують 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.
Ще немає коментарів