M

MLOG

Hrvatski

Otključajte globalni doseg pomoću JavaScript Intl API-ja. Naučite najbolje prakse internacionalizacije za formatiranje datuma, brojeva, valuta i više, osiguravajući besprijekorno korisničko iskustvo širom svijeta.

JavaScript Intl API: Najbolje prakse internacionalizacije za globalnu publiku

U današnjem međusobno povezanom svijetu, stvaranje web aplikacija koje su namijenjene globalnoj publici je ključno. JavaScript Intl API pruža moćne alate za internacionalizaciju (i18n), omogućujući vam formatiranje datuma, brojeva, valuta i više u skladu s konvencijama različitih lokacija. Ovaj članak istražuje najbolje prakse za iskorištavanje Intl API-ja za izgradnju uistinu globalnih aplikacija.

Razumijevanje internacionalizacije (i18n) i lokalizacije (l10n)

Prije nego što zaronimo u specifičnosti Intl API-ja, važno je razumjeti razliku između internacionalizacije (i18n) i lokalizacije (l10n). I18n je proces dizajniranja i razvoja aplikacija na način da se mogu lako prilagoditi različitim jezicima i regijama bez potrebe za inženjerskim promjenama. L10n, s druge strane, je proces prilagođavanja internacionalizirane aplikacije za određenu lokaciju prevođenjem teksta i prilagođavanjem drugih elemenata specifičnih za lokaciju.

Intl API se fokusira na i18n aspekt, pružajući mehanizme za rukovanje podacima osjetljivim na lokaciju, dok lokalizacija obično uključuje pružanje prijevoda i konfiguracija specifičnih za lokaciju.

Ključne komponente Intl API-ja

Intl API se sastoji od nekoliko ključnih objekata, od kojih je svaki odgovoran za rukovanje specifičnim aspektima internacionalizacije:

Najbolje prakse za korištenje Intl API-ja

Da biste učinkovito iskoristili Intl API i osigurali pozitivno korisničko iskustvo za svoju globalnu publiku, razmotrite sljedeće najbolje prakse:

1. Odredite ispravnu lokaciju

Temelj internacionalizacije je određivanje ispravne lokacije. Lokacija identificira jezik, regiju i sve specifične varijante koje će se koristiti za formatiranje. Možete dobiti preferiranu lokaciju korisnika iz svojstva navigator.language ili HTTP zaglavlja Accept-Language.

Prilikom stvaranja Intl objekata, možete odrediti lokaciju kao niz ili niz nizova. Ako pružite niz, API će pokušati pronaći najbolju odgovarajuću lokaciju iz dostupnih opcija.

Primjer:

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

Ako preferirana lokacija korisnika nije dostupna, možete pružiti rezervnu lokaciju. Na primjer, možete koristiti 'en-US' kao zadano ako preglednik korisnika prijavi nepodržanu lokaciju.

2. Iskoristite Intl.DateTimeFormat za formatiranje datuma i vremena

Ispravno formatiranje datuma i vremena ključno je za pružanje lokaliziranog iskustva. Objekt Intl.DateTimeFormat omogućuje vam formatiranje datuma i vremena u skladu s konvencijama određene lokacije.

Možete prilagoditi formatiranje određivanjem različitih opcija, kao što su format godine, mjeseca, dana, sata, minute i sekunde. Također možete odrediti vremensku zonu kako biste osigurali da se datumi i vremena prikazuju ispravno za korisnike u različitim dijelovima svijeta.

Primjer:

const locale = 'de-DE'; // Njemački (Njemačka)
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); // Izlaz: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);

Ovaj primjer formatira trenutni datum i vrijeme prema njemačkoj (Njemačka) lokaciji, uključujući godinu, mjesec, dan, sat i minutu. Također određuje vremensku zonu 'Europe/Berlin'.

Ne zaboravite razmotriti različite formate datuma i vremena koji se koriste širom svijeta. Na primjer, SAD koristi MM/DD/YYYY, dok mnoge druge zemlje koriste DD/MM/YYYY.

3. Koristite Intl.NumberFormat za formatiranje brojeva, valuta i postotaka

Objekt Intl.NumberFormat pruža fleksibilan način za formatiranje brojeva, valuta i postotaka u skladu s konvencijama specifičnim za lokaciju. Možete prilagoditi formatiranje određivanjem opcija kao što su valuta, stil (decimalni, valuta ili postotak), minimalni i maksimalni broj decimalnih znamenki i više.

Primjer (Formatiranje valute):

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

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

Ovaj primjer formatira broj 12345.67 kao japanski jen (JPY). Primijetite kako se simbol valute (￥) i separator grupiranja (,) automatski prilagođavaju prema japanskoj lokaciji.

Primjer (Formatiranje postotka):

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

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

Ovaj primjer formatira broj 0.75 kao postotak na arapskom (Egipat). Izlaz uključuje arapski znak za postotak (٪) i dva decimalna mjesta.

Važna razmatranja za formatiranje valute:

4. Ispravno rukujte množinom pomoću Intl.PluralRules

Pravila množine značajno se razlikuju među jezicima. Na primjer, engleski ima jednostavna pravila s oblicima jednine i množine, dok drugi jezici imaju složenija pravila temeljena na vrijednosti broja. Objekt Intl.PluralRules pomaže vam da odredite ispravan oblik množine za dani broj i lokaciju.

Primjer:

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

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

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

Ovaj primjer pokazuje kako koristiti Intl.PluralRules za dobivanje ispravnog oblika množine za riječ "товар" (stavka) na ruskom. Ruski ima različite oblike množine, ovisno o tome završava li broj na 1, 2-4 ili 5-9.

5. Formatirajte popise pomoću Intl.ListFormat

Prilikom prikazivanja popisa stavki, formatiranje se može razlikovati ovisno o lokaciji. Objekt Intl.ListFormat omogućuje vam formatiranje popisa u skladu s konvencijama specifičnim za lokaciju, uključujući upotrebu različitih veznika (npr. "i", "ili") i separatora popisa (npr. zarezi, točke-zarezi).

Primjer:

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

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

Ovaj primjer formatira popis voća na španjolskom (Španjolska), koristeći veznik "y" (i) za povezivanje zadnje dvije stavke.

6. Formatirajte relativna vremena pomoću Intl.RelativeTimeFormat

Prikazivanje relativnih vremena (npr. "jučer", "za 2 sata") pruža korisniku prijateljski način prikaza vremenskih informacija. Objekt Intl.RelativeTimeFormat omogućuje vam formatiranje relativnih vremena u skladu s konvencijama specifičnim za lokaciju.

Primjer:

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

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

Ovaj primjer formatira relativna vremena na francuskom (Kanada). Izlaz prikazuje "hier" (jučer) i "dans 2 jours" (za 2 dana).

Opcija `numeric` kontrolira kako se brojevi prikazuju. `'auto'` prikazuje relativne riječi kada su dostupne (poput "jučer"), a inače brojeve. `'always'` uvijek prikazuje brojeve.

7. Kolacionirajte nizove pomoću Intl.Collator

Usporedba nizova je osjetljiva na lokaciju. Način na koji se nizovi sortiraju razlikuje se ovisno o jeziku. Na primjer, u njemačkom se znak "ä" obično sortira kao "a", dok se u švedskom sortira nakon "z". Objekt Intl.Collator omogućuje vam usporedbu nizova prema pravilima određene lokacije.

Primjer:

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

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

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

Ovaj primjer sortira niz njemačkih riječi pomoću Intl.Collator. Primijetite da se "äpfel" sortira prije "aprikosen", iako "ä" dolazi kasnije u abecedi.

8. Rukujte rubnim slučajevima i nedostajućim podacima

Ne podržavaju sve lokacije svaki preglednik ili okruženje. Bitno je rukovati rubnim slučajevima u kojima lokacija nije dostupna ili kada podaci nedostaju. Razmotrite sljedeće strategije:

9. Temeljito testirajte s različitim lokacijama

Temeljito testiranje ključno je kako biste osigurali da vaša internacionalizirana aplikacija ispravno radi za sve podržane lokacije. Testirajte svoju aplikaciju s različitim lokacijama, uključujući jezike koji koriste različite skupove znakova, formate datuma i vremena, formate brojeva i pravila množine.

Razmislite o upotrebi alata za automatizirano testiranje kako biste provjerili ponaša li se vaša aplikacija prema očekivanjima na različitim lokacijama.

10. Razmotrite implikacije na performanse

Iako je Intl API općenito učinkovit, stvaranje Intl objekata može biti relativno skupo. Da biste optimizirali performanse, razmotrite sljedeće:

Izvan Intl API-ja: Daljnja razmatranja za internacionalizaciju

Iako Intl API pruža moćne alate za formatiranje podataka, internacionalizacija uključuje više od samog formatiranja. Razmotrite sljedeće dodatne aspekte:

Zaključak

JavaScript Intl API je neprocjenjiv alat za izradu web aplikacija koje su namijenjene globalnoj publici. Slijedeći najbolje prakse navedene u ovom članku, možete stvoriti aplikacije koje nisu samo funkcionalne, već i kulturološki osjetljive i jednostavne za korisnike širom svijeta. Prihvatite snagu Intl API-ja i otključajte potencijal svoje aplikacije na globalnoj sceni. Ovladavanje Intl API-jem rezultirat će inkluzivnijim i pristupačnijim iskustvom za sve vaše korisnike, bez obzira na njihovu lokaciju ili jezik.