M

MLOG

Български

Отключете глобалния обхват с JavaScript Intl API. Научете най-добрите практики за интернационализация при форматиране на дати, числа, валути и други, осигурявайки безупречно потребителско изживяване в цял свят.

JavaScript Intl API: Най-добри практики за интернационализация за глобална аудитория

В днешния взаимосвързан свят създаването на уеб приложения, които обслужват глобална аудитория, е от решаващо значение. JavaScript Intl API предоставя мощни инструменти за интернационализация (i18n), които ви позволяват да форматирате дати, числа, валути и други според конвенциите на различни езикови и регионални настройки (locales). Тази статия изследва най-добрите практики за използване на Intl API за изграждане на наистина глобални приложения.

Разбиране на интернационализацията (i18n) и локализацията (l10n)

Преди да се потопим в спецификата на Intl API, е важно да разберем разликата между интернационализация (i18n) и локализация (l10n). I18n е процесът на проектиране и разработване на приложения по такъв начин, че те да могат лесно да бъдат адаптирани за различни езици и региони, без да са необходими инженерни промени. L10n, от друга страна, е процесът на адаптиране на интернационализирано приложение за конкретен locale чрез превод на текст и персонализиране на други специфични за locale елементи.

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

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

Intl API се състои от няколко ключови обекта, всеки от които отговаря за обработката на специфични аспекти на интернационализацията:

Най-добри практики за използване на Intl API

За да използвате ефективно Intl API и да осигурите положително потребителско изживяване за вашата глобална аудитория, вземете предвид следните най-добри практики:

1. Посочете правилния locale (езикови и регионални настройки)

Основата на интернационализацията е посочването на правилния locale. Locale идентифицира езика, региона и всякакви специфични варианти, които да се използват за форматиране. Можете да получите предпочитания от потребителя locale от свойството navigator.language или от HTTP хедъра Accept-Language.

Когато създавате Intl обекти, можете да посочите locale като низ или масив от низове. Ако предоставите масив, API ще се опита да намери най-подходящия locale от наличните опции.

Пример:

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

Ако предпочитаният от потребителя locale не е наличен, можете да предоставите резервен locale. Например, може да използвате 'en-US' по подразбиране, ако браузърът на потребителя докладва неподдържан locale.

2. Използвайте Intl.DateTimeFormat за форматиране на дата и час

Правилното форматиране на дати и часове е от решаващо значение за предоставянето на локализирано изживяване. Обектът Intl.DateTimeFormat ви позволява да форматирате дати и часове според конвенциите на конкретен locale.

Можете да персонализирате форматирането, като посочите различни опции, като например формат на годината, месеца, деня, часа, минутата и секундата. Можете също да посочите часовата зона, за да гарантирате, че датите и часовете се показват правилно за потребители в различни части на света.

Пример:

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 предоставя гъвкав начин за форматиране на числа, валути и проценти според специфичните за locale конвенции. Можете да персонализирате форматирането, като посочите опции като валута, стил (decimal, currency или percent), минимален и максимален брой знаци след десетичната запетая и други.

Пример (форматиране на валута):

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 ви помага да определите правилната форма за множествено число за дадено число и locale.

Пример:

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

При представяне на списъци с елементи, форматирането може да варира в различните locales. Обектът Intl.ListFormat ви позволява да форматирате списъци според специфичните за locale конвенции, включително използването на различни съюзи (напр. „и“, „или“) и разделители на списъци (напр. запетаи, точки и запетаи).

Пример:

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 ви позволява да форматирате относително време според специфичните за locale конвенции.

Пример:

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

Сравнението на низове е чувствително към locale. Начинът, по който се сортират низовете, варира в зависимост от езика. Например, на немски, символът „ä“ обикновено се сортира като „a“, докато на шведски се сортира след „z“. Обектът `Intl.Collator` ви позволява да сравнявате низове според правилата на конкретен locale.

Пример:

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. Обработвайте крайни случаи и липсващи данни

Не всички locales се поддържат от всеки браузър или среда. Важно е да обработвате крайни случаи, когато даден locale не е наличен или когато данните липсват. Обмислете следните стратегии:

9. Тествайте обстойно с различни locales

Обстойното тестване е от решаващо значение, за да се гарантира, че вашето интернационализирано приложение работи правилно за всички поддържани locales. Тествайте приложението си с различни locales, включително езици, които използват различни набори от символи, формати за дата и час, формати на числа и правила за множествено число.

Обмислете използването на инструменти за автоматизирано тестване, за да проверите дали приложението ви се държи според очакванията в различни locales.

10. Вземете предвид влиянието върху производителността

Въпреки че Intl API като цяло е ефективен, създаването на Intl обекти може да бъде относително скъпо. За да оптимизирате производителността, обмислете следното:

Отвъд Intl API: Допълнителни съображения за интернационализация

Въпреки че Intl API предоставя мощни инструменти за форматиране на данни, интернационализацията включва повече от просто форматиране. Обмислете следните допълнителни аспекти:

Заключение

JavaScript Intl API е безценен инструмент за изграждане на уеб приложения, които обслужват глобална аудитория. Като следвате най-добрите практики, описани в тази статия, можете да създадете приложения, които са не само функционални, но и културно чувствителни и удобни за потребители по целия свят. Възползвайте се от силата на Intl API и отключете потенциала на вашето приложение на световната сцена. Овладяването на Intl API ще доведе до по-приобщаващо и достъпно изживяване за всички ваши потребители, независимо от тяхното местоположение или език.