M

MLOG

Eesti

Avage globaalne haare JavaScript Intl API-ga. Õppige rahvusvahelistamise parimaid praktikaid kuupäevade, numbrite, valuutade ja muu vormindamiseks, tagades sujuva kasutuskogemuse kogu maailmas.

JavaScript Intl API: Rahvusvahelistamise parimad praktikad globaalsele publikule

Tänapäeva ühendatud maailmas on ülioluline luua veebirakendusi, mis on suunatud globaalsele publikule. JavaScript Intl API pakub võimsaid tööriistu rahvusvahelistamiseks (i18n), võimaldades teil vormindada kuupäevi, numbreid, valuutasid ja muud vastavalt erinevate lokaalide tavadele. See artikkel uurib parimaid praktikaid Intl API kasutamiseks tõeliselt globaalsete rakenduste loomiseks.

Rahvusvahelistamise (i18n) ja lokaliseerimise (l10n) mõistmine

Enne Intl API spetsiifikasse sukeldumist on oluline mõista rahvusvahelistamise (i18n) ja lokaliseerimise (l10n) erinevust. I18n on rakenduste projekteerimise ja arendamise protsess viisil, mis võimaldab neid hõlpsasti kohandada erinevate keelte ja piirkondade jaoks ilma insenertehnilisi muudatusi nõudmata. L10n seevastu on rahvusvahelise rakenduse kohandamise protsess konkreetsele lokaalile, tõlkides teksti ja kohandades muid lokaalispetsiifilisi elemente.

Intl API keskendub i18n aspektile, pakkudes mehhanisme lokaalitundlike andmete käsitlemiseks, samas kui lokaliseerimine hõlmab tavaliselt tõlgete ja lokaalispetsiifiliste konfiguratsioonide pakkumist.

Intl API põhikomponendid

Intl API koosneb mitmest põhiosast, millest igaüks vastutab rahvusvahelistamise konkreetsete aspektide käsitlemise eest:

Parimad praktikad Intl API kasutamiseks

Intl API tõhusaks kasutamiseks ja globaalsele publikule positiivse kasutuskogemuse tagamiseks kaaluge järgmisi parimaid praktikaid:

1. Määrake õige lokaal

Rahvusvahelistamise aluseks on õige lokaali määramine. Lokaal tuvastab keele, piirkonna ja kõik konkreetsed variandid, mida vormindamisel kasutada. Saate kasutaja eelistatud lokaali atribuudist navigator.language või HTTP päisest Accept-Language.

Intl objektide loomisel saate määrata lokaali stringi või stringide massiivina. Kui esitate massiivi, proovib API leida saadaolevate valikute hulgast parima sobiva lokaali.

Näide:

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

Kui kasutaja eelistatud lokaal pole saadaval, saate esitada varulokaali. Näiteks võite kasutada 'en-US' vaikimisi, kui kasutaja brauser teatab toetamata lokaalist.

2. Kasutage Intl.DateTimeFormat kuupäeva ja kellaaja vormindamiseks

Kuupäevade ja kellaaegade õige vormindamine on lokaliseeritud kogemuse pakkumiseks ülioluline. Objekt Intl.DateTimeFormat võimaldab teil vormindada kuupäevi ja kellaaegu vastavalt konkreetse lokaali tavadele.

Vormindamist saate kohandada, määrates erinevaid valikuid, näiteks aasta, kuu, päev, tund, minut ja sekund. Samuti saate määrata ajavööndi, et kuupäevad ja kellaajad kuvataks õigesti kasutajatele erinevates maailmaosades.

Näide:

const locale = 'de-DE'; // saksa keel (Saksamaa)
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äljund: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);

See näide vormindab praeguse kuupäeva ja kellaaja vastavalt saksa (Saksamaa) lokaalile, sealhulgas aasta, kuu, päeva, tunni ja minuti. See määrab ka ajavööndi 'Europe/Berlin'.

Pidage meeles, et erinevad kuupäeva- ja kellaaegvormingud, mida kasutatakse kogu maailmas. Näiteks USA kasutab MM/DD/YYYY, samas kui paljud teised riigid kasutavad DD/MM/YYYY.

3. Kasutage Intl.NumberFormat numbri, valuuta ja protsendi vormindamiseks

Objekt Intl.NumberFormat pakub paindlikku viisi numbrite, valuutade ja protsentide vormindamiseks vastavalt lokaalispetsiifilistele tavadele. Saate vormindamist kohandada, määrates valikuid, nagu valuuta, stiil (kümnendkoht, valuuta või protsent), murdosa miinimum- ja maksimumarv ning palju muud.

Näide (valuuta vormindamine):

const locale = 'ja-JP'; // jaapani keel (Jaapan)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Väljund: z.B. "￥12,346"
console.log(formattedAmount);

See näide vormindab arvu 12345.67 Jaapani jeeniks (JPY). Pange tähele, kuidas valuutasümbol (￥) ja rühmituseraldaja (,) kohandatakse automaatselt vastavalt Jaapani lokaalile.

Näide (protsendi vormindamine):

const locale = 'ar-EG'; // araabia keel (Egiptus)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Väljund: z.B. "٧٥٫٠٠٪"
console.log(formattedPercentage);

See näide vormindab arvu 0.75 protsendina araabia keeles (Egiptus). Väljund sisaldab araabia protsendimärki (٪) ja kahte kümnendkohta.

Olulised kaalutlused valuuta vormindamisel:

4. Käsitlege mitmust õigesti Intl.PluralRules abil

Mitmuse reeglid on keelte lõikes väga erinevad. Näiteks on inglise keeles lihtsad reeglid ainsuse ja mitmuse vormidega, samas kui teistel keeltel on keerukamad reeglid, mis põhinevad arvu väärtusel. Objekt Intl.PluralRules aitab teil määrata antud numbri ja lokaali jaoks õige mitmuse vormi.

Näide:

const locale = 'ru-RU'; // vene keel (Venemaa)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (ainsus)
    case 'few': return 'товара'; // tovara (vähesed)
    case 'many': return 'товаров'; // tovarov (palju)
    default: return 'товаров'; // Vaikimisi palju
  }
}

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

See näide näitab, kuidas kasutada Intl.PluralRules, et saada vene keeles sõna "товар" (kaup) jaoks õige mitmuse vorm. Vene keeles on erinevad mitmuse vormid olenevalt sellest, kas arv lõpeb 1, 2-4 või 5-9-ga.

5. Vormindage loendeid Intl.ListFormat abil

Üksuste loendite esitamisel võib vormindamine lokaaliti erineda. Objekt Intl.ListFormat võimaldab teil vormindada loendeid vastavalt lokaalispetsiifilistele tavadele, sealhulgas erinevate sidesõnade (nt "ja", "või") ja loendieraldajate (nt komad, semikoolonid) kasutamist.

Näide:

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

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

See näide vormindab puuviljade loendi hispaania keeles (Hispaania), kasutades sidesõna "y" (ja), et ühendada kaks viimast üksust.

6. Vormindage suhtelisi aegu Intl.RelativeTimeFormat abil

Suhteliste aegade kuvamine (nt "eile", "2 tunni pärast") pakub kasutajasõbraliku viisi aja teabe esitamiseks. Objekt Intl.RelativeTimeFormat võimaldab teil vormindada suhtelisi aegu vastavalt lokaalispetsiifilistele tavadele.

Näide:

const locale = 'fr-CA'; // prantsuse keel (Kanada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

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

See näide vormindab suhtelised ajad prantsuse keeles (Kanada). Väljund näitab "hier" (eile) ja "dans 2 jours" (2 päeva pärast).

Valik `numeric` juhib numbrite kuvamist. `'auto'` kuvab suhtelisi sõnu, kui need on saadaval (nagu "eile"), ja muidu numbreid. `'always'` kuvab alati numbreid.

7. Võrrelge stringe Intl.Collator abil

Stringide võrdlus on lokaalitundlik. Stringide sortimise viis on keelest olenevalt erinev. Näiteks sorteeritakse saksa keeles tähte "ä" tavaliselt nagu "a", samas kui rootsi keeles sorteeritakse see pärast tähte "z". Objekt Intl.Collator võimaldab teil võrrelda stringe vastavalt konkreetse lokaali reeglitele.

Näide:

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

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

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

See näide sorteerib saksa keele sõnade massiivi, kasutades Intl.Collator. Pange tähele, et "äpfel" sorteeritakse enne "aprikosen", isegi kui "ä" on tähestikus hiljem.

8. Käsitlege erijuhtumeid ja puuduvaid andmeid

Kõik brauserid või keskkonnad ei toeta kõiki lokaale. Oluline on käsitleda erijuhtumeid, kui lokaal pole saadaval või kui andmed on puudu. Kaaluge järgmisi strateegiaid:

9. Testige põhjalikult erinevate lokaalidega

Põhjalik testimine on ülioluline, et tagada rahvusvahelistatud rakenduse korrektne toimimine kõigi toetatud lokaalide jaoks. Testige oma rakendust mitmesuguste lokaalidega, sealhulgas keeltega, mis kasutavad erinevaid märgistikke, kuupäeva- ja kellaaegvorminguid, numbrivorminguid ja mitmuse reegleid.

Kaaluge automatiseeritud testimisvahendite kasutamist, et veenduda, kas teie rakendus käitub erinevates lokaalides ootuspäraselt.

10. Arvestage jõudlusmõjudega

Kuigi Intl API on üldiselt tõhus, võib Intl objektide loomine olla suhteliselt kallis. Jõudluse optimeerimiseks kaaluge järgmist:

Peale Intl API: Täiendavad kaalutlused rahvusvahelistamisel

Kuigi Intl API pakub võimsaid tööriistu andmete vormindamiseks, hõlmab rahvusvahelistamine enamat kui lihtsalt vormindamist. Kaaluge järgmisi täiendavaid aspekte:

Kokkuvõte

JavaScript Intl API on hindamatu tööriist veebirakenduste loomiseks, mis on suunatud globaalsele publikule. Järgides selles artiklis kirjeldatud parimaid praktikaid, saate luua rakendusi, mis pole mitte ainult funktsionaalsed, vaid ka kultuuriliselt tundlikud ja kasutajasõbralikud kasutajatele kogu maailmas. Võtke omaks Intl API võimsus ja avage oma rakenduse potentsiaal globaalsel tasandil. Intl API valdamine toob kaasa kaasavama ja kättesaadavama kogemuse kõigile teie kasutajatele, olenemata nende asukohast või keelest.

JavaScript Intl API: Rahvusvahelistamise parimad praktikad globaalsele publikule | MLOG