M

MLOG

Slovenčina

Odomknite globálny dosah s JavaScript Intl API. Naučte sa osvedčené postupy internacionalizácie pre formátovanie dátumov, čísel, mien a ďalšieho, čím zaistíte bezproblémový užívateľský zážitok na celom svete.

JavaScript Intl API: Osvedčené postupy internacionalizácie pre globálne publikum

V dnešnom prepojenom svete je kľúčové vytvárať webové aplikácie, ktoré sú prispôsobené globálnemu publiku. JavaScript Intl API poskytuje výkonné nástroje na internacionalizáciu (i18n), ktoré vám umožňujú formátovať dátumy, čísla, meny a ďalšie podľa konvencií rôznych lokalít. Tento článok skúma osvedčené postupy pre využitie Intl API na budovanie skutočne globálnych aplikácií.

Pochopenie internacionalizácie (i18n) a lokalizácie (l10n)

Predtým, ako sa ponoríme do špecifík Intl API, je dôležité pochopiť rozdiel medzi internacionalizáciou (i18n) a lokalizáciou (l10n). I18n je proces navrhovania a vývoja aplikácií tak, aby ich bolo možné ľahko prispôsobiť rôznym jazykom a regiónom bez potreby technických zmien. L10n je na druhej strane proces prispôsobenia internacionalizovanej aplikácie pre konkrétnu lokalitu prekladom textu a prispôsobením ďalších prvkov špecifických pre danú lokalitu.

Intl API sa zameriava na aspekt i18n, poskytuje mechanizmy na spracovanie údajov citlivých na lokalitu, zatiaľ čo lokalizácia zvyčajne zahŕňa poskytovanie prekladov a konfigurácií špecifických pre danú lokalitu.

Kľúčové komponenty Intl API

Intl API sa skladá z niekoľkých kľúčových objektov, z ktorých každý je zodpovedný za spracovanie špecifických aspektov internacionalizácie:

Osvedčené postupy pre používanie Intl API

Ak chcete efektívne využívať Intl API a zabezpečiť pozitívny užívateľský zážitok pre vaše globálne publikum, zvážte nasledujúce osvedčené postupy:

1. Špecifikujte správnu lokalitu (locale)

Základom internacionalizácie je špecifikácia správnej lokality. Lokalita identifikuje jazyk, región a akékoľvek špecifické varianty, ktoré sa majú použiť na formátovanie. Preferovanú lokalitu používateľa môžete získať z vlastnosti navigator.language alebo z HTTP hlavičky Accept-Language.

Pri vytváraní objektov Intl môžete špecifikovať lokalitu ako reťazec alebo pole reťazcov. Ak poskytnete pole, API sa pokúsi nájsť najlepšiu zhodnú lokalitu z dostupných možností.

Príklad:

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

Ak preferovaná lokalita používateľa nie je k dispozícii, môžete poskytnúť záložnú lokalitu. Napríklad môžete použiť 'en-US' ako predvolenú, ak prehliadač používateľa hlási nepodporovanú lokalitu.

2. Využite Intl.DateTimeFormat na formátovanie dátumu a času

Správne formátovanie dátumov a časov je kľúčové pre poskytnutie lokalizovaného zážitku. Objekt Intl.DateTimeFormat vám umožňuje formátovať dátumy a časy podľa konvencií konkrétnej lokality.

Formátovanie môžete prispôsobiť špecifikovaním rôznych možností, ako je formát roku, mesiaca, dňa, hodiny, minúty a sekundy. Môžete tiež špecifikovať časové pásmo, aby sa zabezpečilo správne zobrazenie dátumov a časov pre používateľov v rôznych častiach sveta.

Príklad:

const locale = 'de-DE'; // Nemčina (Nemecko)
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); // Výstup: napr. "22. Mai 2024, 14:30"
console.log(formattedDate);

Tento príklad formátuje aktuálny dátum a čas podľa nemeckej (Nemecko) lokality, vrátane roku, mesiaca, dňa, hodiny a minúty. Špecifikuje tiež časové pásmo 'Europe/Berlin'.

Nezabudnite zvážiť rôzne formáty dátumu a času používané po celom svete. Napríklad v USA sa používa formát MM/DD/YYYY, zatiaľ čo mnoho iných krajín používa DD/MM/YYYY.

3. Použite Intl.NumberFormat na formátovanie čísel, mien a percent

Objekt Intl.NumberFormat poskytuje flexibilný spôsob formátovania čísel, mien a percent podľa konvencií špecifických pre danú lokalitu. Formátovanie môžete prispôsobiť špecifikovaním možností, ako je mena, štýl (desatinné číslo, mena alebo percentá), minimálny a maximálny počet desatinných miest a ďalšie.

Príklad (Formátovanie meny):

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

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

Tento príklad formátuje číslo 12345.67 ako japonský jen (JPY). Všimnite si, ako sa symbol meny (￥) a oddeľovač tisícov (,) automaticky prispôsobujú podľa japonskej lokality.

Príklad (Formátovanie percent):

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

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

Tento príklad formátuje číslo 0.75 ako percento v arabčine (Egypt). Výstup obsahuje arabský znak pre percentá (٪) a dve desatinné miesta.

Dôležité aspekty pri formátovaní meny:

4. Správne spracujte plurál s Intl.PluralRules

Pravidlá plurálu sa v rôznych jazykoch výrazne líšia. Napríklad angličtina má jednoduché pravidlá s jednotným a množným číslom, zatiaľ čo iné jazyky majú zložitejšie pravidlá založené na hodnote čísla. Objekt Intl.PluralRules vám pomôže určiť správny tvar plurálu pre dané číslo a lokalitu.

Príklad:

const locale = 'ru-RU'; // Ruština (Rusko)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (jednotné číslo)
    case 'few': return 'товара'; // tovara (niekoľko)
    case 'many': return 'товаров'; // tovarov (veľa)
    default: return 'товаров'; // Predvolené je veľa
  }
}

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

Tento príklad ukazuje, ako použiť Intl.PluralRules na získanie správneho tvaru plurálu pre slovo „товар“ (položka) v ruštine. Ruština má rôzne tvary plurálu v závislosti od toho, či číslo končí na 1, 2-4 alebo 5-9.

5. Formátujte zoznamy s Intl.ListFormat

Pri prezentácii zoznamov položiek sa formátovanie môže v rôznych lokalitách líšiť. Objekt Intl.ListFormat vám umožňuje formátovať zoznamy podľa konvencií špecifických pre danú lokalitu, vrátane použitia rôznych spojok (napr. „a“, „alebo“) a oddeľovačov zoznamu (napr. čiarky, bodkočiarky).

Príklad:

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

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

Tento príklad formátuje zoznam ovocia v španielčine (Španielsko) s použitím spojky „y“ (a) na spojenie posledných dvoch položiek.

6. Formátujte relatívny čas s Intl.RelativeTimeFormat

Zobrazovanie relatívneho času (napr. „včera“, „o 2 hodiny“) poskytuje používateľsky prívetivý spôsob prezentácie časových informácií. Objekt Intl.RelativeTimeFormat vám umožňuje formátovať relatívny čas podľa konvencií špecifických pre danú lokalitu.

Príklad:

const locale = 'fr-CA'; // Francúzština (Kanada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

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

Tento príklad formátuje relatívny čas vo francúzštine (Kanada). Výstup zobrazuje „hier“ (včera) a „dans 2 jours“ (o 2 dni).

Možnosť `numeric` riadi, ako sa zobrazujú čísla. Hodnota `'auto'` zobrazuje relatívne slová, ak sú k dispozícii (ako „včera“), a inak čísla. Hodnota `'always'` vždy zobrazuje čísla.

7. Porovnávajte reťazce s Intl.Collator

Porovnávanie reťazcov je citlivé na lokalitu. Spôsob triedenia reťazcov sa líši v závislosti od jazyka. Napríklad v nemčine sa znak „ä“ zvyčajne triedi ako „a“, zatiaľ čo vo švédčine sa triedi za „z“. Objekt `Intl.Collator` vám umožňuje porovnávať reťazce podľa pravidiel konkrétnej lokality.

Príklad:

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

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

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

Tento príklad triedi pole nemeckých slov pomocou Intl.Collator. Všimnite si, že „äpfel“ je zoradené pred „aprikosen“, aj keď „ä“ prichádza neskôr v abecede.

8. Zvládnite okrajové prípady a chýbajúce údaje

Nie všetky lokality sú podporované v každom prehliadači alebo prostredí. Je nevyhnutné riešiť okrajové prípady, keď lokalita nie je k dispozícii alebo keď chýbajú údaje. Zvážte nasledujúce stratégie:

9. Dôkladne testujte s rôznymi lokalitami

Dôkladné testovanie je kľúčové na zabezpečenie správneho fungovania vašej internacionalizovanej aplikácie pre všetky podporované lokality. Testujte svoju aplikáciu s rôznymi lokalitami, vrátane jazykov, ktoré používajú rôzne znakové sady, formáty dátumu a času, formáty čísel a pravidlá plurálu.

Zvážte použitie automatizovaných testovacích nástrojov na overenie, či sa vaša aplikácia správa očakávane v rôznych lokalitách.

10. Zvážte vplyv na výkon

Hoci je Intl API všeobecne efektívne, vytváranie objektov Intl môže byť relatívne náročné. Na optimalizáciu výkonu zvážte nasledujúce:

Okrem Intl API: Ďalšie aspekty internacionalizácie

Hoci Intl API poskytuje výkonné nástroje na formátovanie údajov, internacionalizácia zahŕňa viac ako len formátovanie. Zvážte nasledujúce ďalšie aspekty:

Záver

JavaScript Intl API je neoceniteľným nástrojom na budovanie webových aplikácií, ktoré sú prispôsobené globálnemu publiku. Dodržiavaním osvedčených postupov uvedených v tomto článku môžete vytvárať aplikácie, ktoré sú nielen funkčné, ale aj kultúrne citlivé a používateľsky prívetivé pre používateľov na celom svete. Využite silu Intl API a odomknite potenciál vašej aplikácie na globálnej scéne. Zvládnutie Intl API povedie k inkluzívnejšiemu a prístupnejšiemu zážitku pre všetkých vašich používateľov, bez ohľadu na ich polohu alebo jazyk.