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 приведет к более инклюзивному и доступному опыту для всех ваших пользователей, независимо от их местоположения или языка.