Kako koristiti Intl API u JavaScriptu

Intl API pojednostavljuje oblikovanje i rukovanje internacionaliziranim tekstom, brojevima, datumima i valutama. Omogućuje vam rukovanje različitim formatima podataka prema lokalnoj postavci.

Ovaj API rješava izazov oblikovanja podataka za različite kulture i jezike. Olakšava formatiranje brojeva s odgovarajućim simbolom valute ili datuma pomoću odgovarajućeg formata datuma za određenu regiju.

Pomoću Intl API-ja možete izraditi web aplikacije koje su dostupne i jednostavne za korištenje za publiku u različitim regijama i kulturama.

Dohvaćanje korisnikove lokalne oznake

The JavaScript konstruktori koje pruža Intl API identificiraju lokalizaciju koju će koristiti za formatiranje datuma, teksta, broja itd., slijedeći poznati obrazac. Svaki konstruktor uzima a lokalitet i an opcije objekt kao argumenti. Korištenjem ovih argumenata, konstruktor uspoređuje tražene lokalitete s lokalitetima koje trenutno podržavaju.

Da biste dobili korisnikovu lokalizaciju, možete koristiti navigator.jezik vlasništvo. Ovo svojstvo vraća niz koji predstavlja jezičnu verziju preglednika.

Vrijednost navigator.jezik svojstvo je jezična oznaka BCP 47, koja se sastoji od koda jezika i, po izboru, koda regije i drugih podoznaka. Na primjer, "en-US" predstavlja engleski jezik koji se govori u Sjedinjenim Državama.

Također možete koristiti navigator.jezici svojstvo za dobivanje niza preferiranih jezika korisnika, poredanih po prioritetu. Prva stavka u nizu predstavlja korisnikovu primarnu jezičnu postavku.

Nakon što dobijete korisničku oznaku zemlje, možete prilagoditi prikaz datuma, vremena, brojeva i valuta svoje aplikacije koristeći Intl API.

Možete stvoriti jednostavan JavaScript funkcija kako bismo vam pomogli da dobijete korisnikovu oznaku zemlje. Evo isječka koda koji može pomoći:

konst getUserLocale = () => {
ako (navigator.languages ​​&& navigator.languages.length) {
povratak navigator.languages[0];
 }
povratak navigator.jezik;
};
konzola.log (getUserLocale());

Ovaj getUserLocale funkcija vraća prvi element svojstva navigator.languages ​​ako je dostupno. Inače se vraća na svojstvo navigator.language, koje predstavlja željeni jezik korisnika u starijim preglednicima.

Oblikovanje datuma za različite lokale

Za formatiranje datuma pomoću Intl API, možete koristiti Intl. DateTimeFormat() konstruktor. Ovaj konstruktor uzima dva argumenta: niz lokalizacije i objekt opcija.

Objekt opcija može sadržavati svojstva koja kontroliraju oblikovanje datuma.

Neke od najčešće korištenih opcija uključuju:

• radni dan: Ova opcija određuje format dana u tjednu. Možete ga postaviti na bilo koje dugo (Petak), kratak (pet), odn suziti (F).
• godina: Ova opcija određuje format godine. Možete ga postaviti na bilo koje numerički (2023) ili 2-znamenkasti (23).
• mjesec: Ova opcija određuje format mjeseca. Možete ga postaviti na bilo koje numerički (3), 2-znamenkasti (03), dugo (Ožujak), kratak (ožujak), odn suziti (M).
• dan: Ova opcija određuje format dana. Možete ga postaviti na bilo koje numerički (2) ili 2-znamenkasti (02).

Evo primjera koji pokazuje kako formatirati datum pomoću Intl. DateTimeFormat() konstruktor:

konst datum = Datum.sada()
konst lokalizacija = getUserLocale();
konst opcije = {
 radni dan: "dugo",
 godina: "numerički",
 mjesec: "dugo",
 dan: "numerički",
};
konst formater = noviIntl.DateTimeFormat (lokacija, opcije);
// radni dan, mjesec, datum, godina (petak, 24. ožujka 2023.)
konzola.log (formater.format (datum));

Ovaj kod postavlja objekt za formatiranje prosljeđujući korisnikovu lokalizaciju Intl. DateTimeFormat(), zajedno sa skupom opcija. Zatim koristi formater za transformaciju trenutnog datuma u niz. The opcije objekt sadrži svojstva koja kontroliraju oblikovanje datuma.

Oblikovanje različitih vrsta brojeva

Možete koristiti Intl API za formatiranje brojeva pomoću Intl. NumberFormat() konstruktor. Kao Intl. DateTimeFormat(), ovaj konstruktor uzima lokalni niz i objekt opcija kao argumente.

Objekt opcija sadrži svojstva koja kontroliraju oblikovanje broja. Ova svojstva variraju ovisno o navedenom stil od broja.

Oblikovanje decimala i postotaka

Brojeve možete formatirati kao decimale i postotke pomoću Intl. NumberFormat() konstruktor postavljanjem svojstva stila na decimal za decimale i postotak za postotke.

Evo primjera koji pokazuje kako formatirati decimalu:

konst broj = 123456;
konst lokalizacija = getUserLocale(); // en-US
konst opcije = {
 stil: "decimal",
 minimumFractionDigits: 2,
 maksimalne frakcijske znamenke: 2,
 useGrouping: pravi,
};
konst formater = noviIntl.NumberFormat (lokacija, opcije);
konzola.log (formatter.format (num)); // 123,456.00

Gornji blok koda formatira 123,456 kao decimalni broj s razdjelnicima za grupiranje (,) i dvije decimale.

Evo primjera koji pokazuje kako formatirati postotak:

konst broj = 123456;
konst lokalizacija = getUserLocale();
konst opcije = {
 stil: "postotak",
 useGrouping: pravi,
};
konst formater = noviIntl.NumberFormat (lokacija, opcije);
konzola.log (formatter.format (num)); // 12,345,600%

Gornji blok koda izražava 123,456 kao postotak s razdjelnicima za grupiranje.

Formatiranje valuta

Brojeve možete formatirati kao valute postavljanjem svojstva stila na valuta. Trebali biste postaviti druge opcije uz to, kao što su:

• valuta: Niz koji predstavlja ISO 4217 kôd valute (kao što je "USD", "EUR" ili "JPY") koji se koristi za oblikovanje. Ako ne omogućite ovu opciju, formater će odabrati šifru valute na temelju korisnikove regionalne postavke.
• prikaz valute: Ovo svojstvo određuje kako preglednik treba prikazati valutu. Može biti simbol (75 USD), kod (75 USD), ili Ime (75 američkih dolara).

Evo primjera koji pokazuje kako možete formatirati valutu:

konst broj = 123456;
konst lokalizacija = getUserLocale(); // en-US
konst opcije = {
 stil: "valuta",
 valuta: "USD",
 prikaz valute: "kodirati",
};
konst formater = noviIntl.NumberFormat (lokacija, opcije);
konzola.log (formatter.format (num)); // 123.456,00 USD

Gornji blok koda formatira 123,456 kao valutu (USD).

Formatiranje jedinica

Možete koristiti Intl. NumberFormat() konstruktor za formatiranje brojeva s jedinicama, kao što su duljina, volumen i masa. To možete učiniti postavljanjem stil do jedinica. Kada postavite stil na jedinicu, morate navesti ove opcije:

• jedinica: Ovo svojstvo specificira jedinicu koja se koristi za formatiranje, kao što su "metar", "kilogram", "litar", "sekunda" i tako dalje.
• jedinicaDisplay: Ovo svojstvo određuje kako preglednik treba prikazati jedinicu. Možete ga postaviti na bilo koje dugo (10 litara), kratak (10 L), odn suziti (10l).

Evo primjera koji pokazuje kako možete formatirati jedinice:

konst broj = 123456;
konst lokalizacija = getUserLocale();
konst opcije = {
 stil: "jedinica",
 jedinica: "litra",
 prikaz jedinice: "dugo",
};
konst formater = noviIntl.NumberFormat (lokacija, opcije);
konzola.log (formatter.format (num)); //123.456 litara

Gornji blok koda formatira broj 123,456 kao jedinicu u litrama.

Alternative za Intl API

Intl API pruža snažan i fleksibilan skup alata za oblikovanje datuma, brojeva, valuta i jedinica u JavaScript aplikacijama. Podržava mnoge lokalne postavke i pruža dosljedan način formatiranja podataka u različitim kulturama i jezicima.

Možda ćete htjeti upotrijebiti alternativnu biblioteku, poput Luxon ili Day.js, zbog ograničene podrške preglednika za Intl. U konačnici, odluka između Intl API-ja ili alternative ovisi o specifičnim zahtjevima i ograničenjima vašeg projekta.