M

MLOG

Slovenščina

Odklenite globalni doseg z JavaScript Intl API. Spoznajte najboljše prakse internacionalizacije za oblikovanje datumov, števil, valut in več ter zagotovite brezhibno uporabniško izkušnjo po vsem svetu.

JavaScript Intl API: Najboljše prakse internacionalizacije za globalno občinstvo

V današnjem povezanem svetu je ustvarjanje spletnih aplikacij, ki so prilagojene globalnemu občinstvu, ključnega pomena. JavaScript Intl API ponuja zmogljiva orodja za internacionalizacijo (i18n), ki vam omogočajo oblikovanje datumov, števil, valut in drugega v skladu s konvencijami različnih lokalov. Ta članek raziskuje najboljše prakse za izkoriščanje Intl API-ja za izdelavo resnično globalnih aplikacij.

Razumevanje internacionalizacije (i18n) in lokalizacije (l10n)

Preden se poglobimo v podrobnosti Intl API-ja, je pomembno razumeti razliko med internacionalizacijo (i18n) in lokalizacijo (l10n). I18n je proces načrtovanja in razvijanja aplikacij na način, da jih je mogoče enostavno prilagoditi različnim jezikom in regijam brez potrebe po inženirskih spremembah. L10n pa je proces prilagajanja internacionalizirane aplikacije za določen lokal s prevajanjem besedila in prilagajanjem drugih specifičnih elementov za ta lokal.

Intl API se osredotoča na vidik i18n in zagotavlja mehanizme za obravnavo podatkov, občutljivih na lokal, medtem ko lokalizacija običajno vključuje zagotavljanje prevodov in konfiguracij, specifičnih za lokal.

Ključne komponente Intl API-ja

Intl API sestavlja več ključnih objektov, od katerih je vsak odgovoren za obravnavo določenih vidikov internacionalizacije:

Najboljše prakse za uporabo Intl API-ja

Za učinkovito uporabo Intl API-ja in zagotavljanje pozitivne uporabniške izkušnje za vaše globalno občinstvo upoštevajte naslednje najboljše prakse:

1. Določite pravilen lokal

Temelj internacionalizacije je določitev pravilnega lokala. Lokal identificira jezik, regijo in vse specifične različice, ki se uporabljajo za oblikovanje. Prednostni lokal uporabnika lahko pridobite iz lastnosti navigator.language ali iz glave HTTP Accept-Language.

Pri ustvarjanju objektov Intl lahko lokal določite kot niz ali kot polje nizov. Če podate polje, bo API poskušal najti najboljše ujemanje med razpoložljivimi možnostmi.

Primer:

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

Če prednostni lokal uporabnika ni na voljo, lahko zagotovite nadomestni lokal. Na primer, lahko uporabite 'en-US' kot privzeti lokal, če brskalnik uporabnika poroča o nepodprtem lokalu.

2. Izkoriščanje Intl.DateTimeFormat za oblikovanje datuma in časa

Pravilno oblikovanje datumov in časov je ključno za zagotavljanje lokalizirane izkušnje. Objekt Intl.DateTimeFormat vam omogoča oblikovanje datumov in časov v skladu s konvencijami določenega lokala.

Oblikovanje lahko prilagodite z določitvijo različnih možnosti, kot so leto, mesec, dan, ura, minuta in oblika sekunde. Določite lahko tudi časovni pas, da zagotovite pravilen prikaz datumov in časov za uporabnike v različnih delih sveta.

Primer:

const locale = 'de-DE'; // nemščina (Nemčija)
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); // Izhod: npr. "22. Mai 2024, 14:30"
console.log(formattedDate);

Ta primer oblikuje trenutni datum in čas v skladu z nemškim (Nemčija) lokalom, vključno z letom, mesecem, dnevom, uro in minuto. Določa tudi časovni pas 'Europe/Berlin'.

Ne pozabite upoštevati različnih formatov datumov in časov, ki se uporabljajo po svetu. Na primer, ZDA uporabljajo MM/DD/YYYY, medtem ko mnoge druge države uporabljajo DD/MM/YYYY.

3. Uporaba Intl.NumberFormat za oblikovanje števil, valut in odstotkov

Objekt Intl.NumberFormat ponuja prilagodljiv način za oblikovanje števil, valut in odstotkov v skladu s konvencijami, specifičnimi za lokal. Oblikovanje lahko prilagodite z določitvijo možnosti, kot so valuta, slog (decimalno, valuta ali odstotek), najmanjše in največje število decimalnih mest in več.

Primer (oblikovanje valute):

const locale = 'ja-JP'; // japonščina (Japonska)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Izhod: npr. "￥12,346"
console.log(formattedAmount);

Ta primer oblikuje število 12345,67 kot japonski jen (JPY). Upoštevajte, kako se simbol valute (￥) in ločilo za tisočice (,) samodejno prilagodita japonskemu lokalu.

Primer (oblikovanje odstotkov):

const locale = 'ar-EG'; // arabščina (Egipt)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Izhod: npr. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Ta primer oblikuje število 0,75 kot odstotek v arabščini (Egipt). Izhod vključuje arabski znak za odstotek (٪) in dve decimalni mesti.

Pomembni premisleki pri oblikovanju valut:

4. Pravilno obravnavanje množine z Intl.PluralRules

Pravila za množino se med jeziki močno razlikujejo. Na primer, angleščina ima preprosta pravila z edninsko in množinsko obliko, medtem ko imajo drugi jeziki bolj zapletena pravila, ki temeljijo na vrednosti števila. Objekt Intl.PluralRules vam pomaga določiti pravilno množinsko obliko za dano število in lokal.

Primer:

const locale = 'ru-RU'; // ruščina (Rusija)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (ednina)
    case 'few': return 'товара'; // tovara (nekaj)
    case 'many': return 'товаров'; // tovarov (veliko)
    default: return 'товаров'; // Privzeto na veliko
  }
}

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

Ta primer prikazuje, kako uporabiti Intl.PluralRules za pridobitev pravilne množinske oblike za besedo "товар" (izdelek) v ruščini. Ruščina ima različne množinske oblike, odvisno od tega, ali se število konča z 1, 2-4 ali 5-9.

5. Oblikovanje seznamov z Intl.ListFormat

Pri predstavitvi seznamov elementov se lahko oblikovanje razlikuje med lokali. Objekt Intl.ListFormat vam omogoča oblikovanje seznamov v skladu s konvencijami, specifičnimi za lokal, vključno z uporabo različnih veznikov (npr. "in", "ali") in ločil seznama (npr. vejice, podpičja).

Primer:

const locale = 'es-ES'; // španščina (Španija)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Izhod: "manzanas, naranjas y plátanos"
console.log(formattedList);

Ta primer oblikuje seznam sadja v španščini (Španija) z uporabo veznika "y" (in) za povezavo zadnjih dveh elementov.

6. Oblikovanje relativnih časov z Intl.RelativeTimeFormat

Prikazovanje relativnih časov (npr. "včeraj", "čez 2 uri") zagotavlja uporabniku prijazen način predstavitve časovnih informacij. Objekt Intl.RelativeTimeFormat vam omogoča oblikovanje relativnih časov v skladu s konvencijami, specifičnimi za lokal.

Primer:

const locale = 'fr-CA'; // francoščina (Kanada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Izhod: "hier"
console.log(rtf.format(2, 'day')); // Izhod: "dans 2 jours"

Ta primer oblikuje relativne čase v francoščini (Kanada). Izhod prikazuje "hier" (včeraj) in "dans 2 jours" (čez 2 dni).

Možnost `numeric` nadzoruje, kako so prikazana števila. `'auto'` prikaže relativne besede, kadar so na voljo (kot "včeraj"), sicer pa števila. `'always'` vedno prikaže števila.

7. Razvrščanje nizov z Intl.Collator

Primerjava nizov je odvisna od lokala. Način razvrščanja nizov se razlikuje glede na jezik. Na primer, v nemščini se znak "ä" običajno razvršča kot "a", medtem ko se v švedščini razvršča za "z". Objekt `Intl.Collator` vam omogoča primerjavo nizov v skladu s pravili določenega lokala.

Primer:

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

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

console.log(strings); // Izhod: ["äpfel", "aprikosen", "bananen", "birnen"]

Ta primer razvrsti polje nemških besed z uporabo Intl.Collator. Upoštevajte, da je "äpfel" razvrščen pred "aprikosen", čeprav se "ä" pojavi kasneje v abecedi.

8. Obravnavanje robnih primerov in manjkajočih podatkov

Vsi lokali niso podprti v vsakem brskalniku ali okolju. Bistveno je obravnavati robne primere, ko lokal ni na voljo ali ko podatki manjkajo. Razmislite o naslednjih strategijah:

9. Temeljito testiranje z različnimi lokali

Temeljito testiranje je ključno za zagotovitev, da vaša internacionalizirana aplikacija deluje pravilno za vse podprte lokale. Testirajte svojo aplikacijo z različnimi lokali, vključno z jeziki, ki uporabljajo različne nabore znakov, formate datumov in časov, formate števil in pravila za množino.

Razmislite o uporabi orodij za avtomatizirano testiranje, da preverite, ali se vaša aplikacija v različnih lokalih obnaša pričakovano.

10. Upoštevajte vpliv na zmogljivost

Čeprav je Intl API na splošno učinkovit, je lahko ustvarjanje objektov Intl relativno drago. Za optimizacijo delovanja upoštevajte naslednje:

Onkraj Intl API-ja: Dodatni premisleki za internacionalizacijo

Čeprav Intl API ponuja zmogljiva orodja za oblikovanje podatkov, internacionalizacija vključuje več kot le oblikovanje. Upoštevajte naslednje dodatne vidike:

Zaključek

JavaScript Intl API je neprecenljivo orodje za izdelavo spletnih aplikacij, ki so namenjene globalnemu občinstvu. Z upoštevanjem najboljših praks, opisanih v tem članku, lahko ustvarite aplikacije, ki niso le funkcionalne, ampak tudi kulturno občutljive in uporabniku prijazne za uporabnike po vsem svetu. Sprejmite moč Intl API-ja in odklenite potencial vaše aplikacije na svetovnem prizorišču. Obvladovanje Intl API-ja bo pripomoglo k bolj vključujoči in dostopni izkušnji za vse vaše uporabnike, ne glede na njihovo lokacijo ali jezik.