M

MLOG

Українська

Розширюйте глобальне охоплення з JavaScript Intl API. Вивчіть практики інтернаціоналізації для форматування дат, чисел, валют задля бездоганного досвіду користувачів.

JavaScript Intl API: найкращі практики інтернаціоналізації для глобальної аудиторії

У сучасному взаємопов'язаному світі створення вебдодатків, орієнтованих на глобальну аудиторію, є вирішальним. JavaScript Intl API надає потужні інструменти для інтернаціоналізації (i18n), що дозволяють форматувати дати, числа, валюти та багато іншого відповідно до стандартів різних локалей. У цій статті розглядаються найкращі практики використання Intl API для створення справді глобальних додатків.

Розуміння інтернаціоналізації (i18n) та локалізації (l10n)

Перш ніж заглиблюватися в особливості Intl API, важливо зрозуміти різницю між інтернаціоналізацією (i18n) та локалізацією (l10n). I18n — це процес проєктування та розробки додатків таким чином, щоб їх можна було легко адаптувати до різних мов і регіонів без необхідності інженерних змін. L10n, з іншого боку, — це процес адаптації інтернаціоналізованого додатка до конкретної локалі шляхом перекладу тексту та налаштування інших елементів, специфічних для цієї локалі.

Intl API зосереджується на аспекті i18n, надаючи механізми для обробки даних, чутливих до локалі, тоді як локалізація зазвичай включає надання перекладів та конфігурацій, специфічних для локалі.

Ключові компоненти Intl API

Intl API складається з кількох ключових об'єктів, кожен з яких відповідає за обробку певних аспектів інтернаціоналізації:

Найкращі практики використання Intl API

Щоб ефективно використовувати Intl API та забезпечити позитивний досвід користувачів для вашої глобальної аудиторії, розгляньте наступні найкращі практики:

1. Вказуйте правильну локаль

Основою інтернаціоналізації є вказання правильної локалі. Локаль визначає мову, регіон та будь-які специфічні варіанти, які слід використовувати для форматування. Ви можете отримати бажану локаль користувача з властивості navigator.language або HTTP-заголовка Accept-Language.

При створенні об'єктів Intl ви можете вказати локаль як рядок або масив рядків. Якщо ви надасте масив, API спробує знайти найкращу відповідну локаль з доступних варіантів.

Приклад:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Якщо бажана локаль користувача недоступна, ви можете надати резервну локаль. Наприклад, ви можете використовувати 'en-US' за замовчуванням, якщо браузер користувача повідомляє про непідтримувану локаль.

2. Використовуйте Intl.DateTimeFormat для форматування дати та часу

Правильне форматування дат і часу є вирішальним для надання локалізованого досвіду. Об'єкт Intl.DateTimeFormat дозволяє форматувати дати та час відповідно до стандартів конкретної локалі.

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

Приклад:

const locale = 'de-DE'; // Німецька (Німеччина)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Вивід: напр. "22. Mai 2024, 14:30"
console.log(formattedDate);

Цей приклад форматує поточну дату та час відповідно до локалі німецької (Німеччина), включаючи рік, місяць, день, годину та хвилину. Він також вказує часовий пояс 'Europe/Berlin'.

Пам'ятайте про різні формати дати та часу, що використовуються у світі. Наприклад, у США використовується MM/DD/YYYY, тоді як у багатьох інших країнах — DD/MM/YYYY.

3. Використовуйте Intl.NumberFormat для форматування чисел, валют та відсотків

Об'єкт Intl.NumberFormat надає гнучкий спосіб форматування чисел, валют та відсотків відповідно до специфічних для локалі правил. Ви можете налаштувати форматування, вказуючи такі опції, як валюта, стиль (десятковий, валютний або відсотковий), мінімальна та максимальна кількість дробових цифр тощо.

Приклад (форматування валюти):

const locale = 'ja-JP'; // Японська (Японія)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Вивід: напр. "￥12,346"
console.log(formattedAmount);

Цей приклад форматує число 12345.67 як японську єну (JPY). Зверніть увагу, як символ валюти (￥) та роздільник груп (,) автоматично налаштовуються відповідно до японської локалі.

Приклад (форматування відсотків):

const locale = 'ar-EG'; // Арабська (Єгипет)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Вивід: напр. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Цей приклад форматує число 0.75 як відсоток арабською (Єгипет). Вивід включає арабський знак відсотка (٪) та два десяткових знаки.

Важливі аспекти форматування валют:

4. Правильно обробляйте множину за допомогою Intl.PluralRules

Правила утворення множини значно відрізняються в різних мовах. Наприклад, англійська мова має прості правила з одниною та множиною, тоді як інші мови мають складніші правила, що базуються на значенні числа. Об'єкт Intl.PluralRules допомагає визначити правильну форму множини для заданого числа та локалі.

Приклад:

const locale = 'ru-RU'; // Російська (Росія)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // товар (однина)
    case 'few': return 'товара'; // товара (декілька)
    case 'many': return 'товаров'; // товаров (багато)
    default: return 'товаров'; // За замовчуванням багато
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Вивід: "5 товаров"

Цей приклад демонструє, як використовувати Intl.PluralRules для отримання правильної форми множини для слова "товар" російською мовою. Російська мова має різні форми множини залежно від того, чи закінчується число на 1, 2-4 або 5-9.

5. Форматуйте списки за допомогою Intl.ListFormat

При поданні списків елементів форматування може відрізнятися в залежності від локалі. Об'єкт Intl.ListFormat дозволяє форматувати списки відповідно до локально-специфічних правил, включаючи використання різних сполучників (наприклад, "і", "або") та роздільників списків (наприклад, коми, крапки з комою).

Приклад:

const locale = 'es-ES'; // Іспанська (Іспанія)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Вивід: "manzanas, naranjas y plátanos"
console.log(formattedList);

Цей приклад форматує список фруктів іспанською (Іспанія), використовуючи сполучник "y" (і) для з'єднання останніх двох елементів.

6. Форматуйте відносний час за допомогою Intl.RelativeTimeFormat

Відображення відносного часу (наприклад, "вчора", "через 2 години") забезпечує зручний для користувача спосіб представлення інформації про час. Об'єкт Intl.RelativeTimeFormat дозволяє форматувати відносний час відповідно до локально-специфічних правил.

Приклад:

const locale = 'fr-CA'; // Французька (Канада)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Вивід: "hier"
console.log(rtf.format(2, 'day')); // Вивід: "dans 2 jours"

Цей приклад форматує відносний час французькою (Канада). Вивід показує "hier" (вчора) та "dans 2 jours" (через 2 дні).

Опція `numeric` контролює, як відображаються числа. `'auto'` відображає відносні слова, коли вони доступні (наприклад, "вчора"), і числа в іншому випадку. `'always'` завжди відображає числа.

7. Сортуйте рядки за допомогою Intl.Collator

Порівняння рядків залежить від локалі. Спосіб сортування рядків залежить від мови. Наприклад, у німецькій мові символ "ä" зазвичай сортується як "a", тоді як у шведській — після "z". Об'єкт `Intl.Collator` дозволяє порівнювати рядки за правилами конкретної локалі.

Приклад:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Вивід: ["äpfel", "aprikosen", "bananen", "birnen"]

Цей приклад сортує масив німецьких слів за допомогою Intl.Collator. Зверніть увагу, що "äpfel" сортується перед "aprikosen", хоча "ä" йде пізніше в алфавіті.

8. Обробляйте крайні випадки та відсутні дані

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

9. Ретельно тестуйте з різними локалями

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

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

10. Враховуйте вплив на продуктивність

Хоча Intl API загалом ефективний, створення об'єктів Intl може бути відносно ресурсомістким. Щоб оптимізувати продуктивність, враховуйте наступне:

Поза Intl API: подальші аспекти інтернаціоналізації

Хоча Intl API надає потужні інструменти для форматування даних, інтернаціоналізація включає більше, ніж просто форматування. Розгляньте наступні додаткові аспекти:

Висновок

JavaScript Intl API — це безцінний інструмент для створення вебдодатків, орієнтованих на глобальну аудиторію. Дотримуючись найкращих практик, викладених у цій статті, ви можете створювати додатки, які є не тільки функціональними, але й культурно чутливими та зручними для користувачів у всьому світі. Використовуйте потужність Intl API та розкрийте потенціал вашого додатка на світовій арені. Опанування Intl API призведе до більш інклюзивного та доступного досвіду для всіх ваших користувачів, незалежно від їхнього місцезнаходження чи мови.