Cum să utilizați API-ul Intl în JavaScript

API-ul Intl simplifică formatarea și manipularea textului internaționalizat, numerelor, datelor și valutelor. Vă permite să gestionați diferite formate de date în funcție de localitate.

Acest API rezolvă provocarea formatării datelor pentru diferite culturi și limbi. Facilitează formatarea numerelor cu simbolul valutar corespunzător sau cu datele folosind formatul de dată adecvat pentru o anumită regiune.

Folosind API-ul Intl, puteți crea aplicații web care sunt accesibile și ușor de utilizat pentru publicul din diferite regiuni și culturi.

Obținerea localității unui utilizator

The constructori JavaScript furnizate de API-ul Intl, identifică locația pe care o vor folosi pentru a formata data, textul, numărul etc., urmând un model familiar. Fiecare constructor ia un local si un Opțiuni obiect ca argumente. Folosind aceste argumente, constructorul potrivește localurile solicitate cu localurile pe care le suportă în prezent.

Pentru a obține localitatea unui utilizator, puteți utiliza navigator.limbaj proprietate. Această proprietate returnează un șir care reprezintă versiunea lingvistică a browserului.

Valoarea navigator.limbaj proprietatea este o etichetă de limbă BCP 47, care constă dintr-un cod de limbă și, opțional, un cod de regiune și alte subetichete. De exemplu, „en-US” reprezintă limba engleză așa cum este vorbită în Statele Unite.

De asemenea, puteți utiliza navigator.limbi proprietate pentru a obține o serie de limbi preferate ale utilizatorului, sortate după prioritate. Primul element din matrice reprezintă preferința de limbă principală a utilizatorului.

După ce ați obținut localitatea utilizatorului, puteți personaliza afișarea aplicației dvs. a datelor, orelor, numerelor și valutelor folosind Intl API.

Puteți crea un simplu Funcția JavaScript pentru a vă ajuta să obțineți localitatea unui utilizator. Iată un fragment de cod care poate ajuta:

const getUserLocale = () => {
dacă (navigator.languages ​​&& navigator.languages.length) {
întoarcere navigator.limbi[0];
 }
întoarcere navigator.limbaj;
};
consolă.log (getUserLocale());

Acest getUserLocale funcția returnează primul element al proprietății navigator.languages ​​dacă este disponibilă. În caz contrar, revine la proprietatea navigator.language, care reprezintă limba preferată a utilizatorului în browserele mai vechi.

Formatarea datelor pentru diferite locații

Pentru a formata datele utilizând Intl API, puteți utiliza Intl. DateTimeFormat() constructor. Acest constructor ia două argumente: un șir local și un obiect opțiuni.

Obiectul opțiuni poate conține proprietăți care controlează formatarea datei.

Unele dintre opțiunile utilizate în mod obișnuit includ:

• zi lucrătoare: Această opțiune specifică formatul zilei săptămânii. Puteți seta la oricare lung (Vineri), mic de statura (vineri), sau îngust (F).
• an: Această opțiune specifică formatul anului. Puteți seta la oricare numeric (2023) sau 2 cifre (23).
• lună: Această opțiune specifică formatul lunii. Puteți seta la oricare numeric (3), 2 cifre (03), lung (Martie), mic de statura (Mar), sau îngust (M).
• zi: Această opțiune specifică formatul zilei. Puteți seta la oricare numeric (2) sau 2 cifre (02).

Iată un exemplu care arată cum să formatați o dată folosind Intl. DateTimeFormat() constructor:

const data = Data.acum()
const locale = getUserLocale();
const opțiuni = {
 zi lucrătoare: "lung",
 an: "numeric",
 lună: "lung",
 zi: "numeric",
};
const formatator = nouIntl.DateTimeFormat (locale, opțiuni);
// zi lucrătoare, data lunii, an (vineri, 24 martie 2023)
consolă.log (formatter.format (data));

Acest cod configurează un obiect formatator prin transmiterea localizării utilizatorului Intl. DateTimeFormat(), împreună cu un set de opțiuni. Apoi folosește formatatorul pentru a transforma data curentă într-un șir. The Opțiuni obiectul conține proprietăți care controlează formatarea datei.

Formatarea diferitelor tipuri de numere

Puteți folosi Intl API pentru a formata numere folosind Intl. NumberFormat() constructor. Ca Intl. DateTimeFormat(), acest constructor ia ca argumente un șir local și un obiect opțiuni.

Obiectul opțiuni conține proprietăți care controlează formatarea numărului. Aceste proprietăți variază în funcție de specificat stil a numărului.

Formatarea zecimale și procente

Puteți formata numerele ca zecimale și procente folosind Intl. NumberFormat() constructor setând proprietatea stil la zecimal pentru zecimale și la sută pentru procente.

Iată un exemplu care arată cum se formatează o zecimală:

const num = 123456;
const locale = getUserLocale(); // ro-US
const opțiuni = {
 stil: "zecimal",
 minimumFractionDigits: 2,
 maximumFractionDigits: 2,
 useGrouping: Adevărat,
};
const formatator = nouIntl.NumberFormat (locale, opțiuni);
consolă.log (formatter.format (num)); // 123,456.00

Blocul de cod de mai sus formează 123.456 ca zecimală cu separatori de grupare (,) și două zecimale.

Iată un exemplu care arată cum să formatați un procent:

const num = 123456;
const locale = getUserLocale();
const opțiuni = {
 stil: "la sută",
 useGrouping: Adevărat,
};
const formatator = nouIntl.NumberFormat (locale, opțiuni);
consolă.log (formatter.format (num)); // 12,345,600%

Blocul de cod de mai sus exprimă 123.456 ca procent cu separatori de grupare.

Formatarea monedelor

Puteți formata numerele ca monede setând proprietatea stil la valută. Ar trebui să setați alte opțiuni alături de acesta, cum ar fi:

• valută: un șir care reprezintă codul monedei ISO 4217 (cum ar fi „USD”, „EUR” sau „JPY”) de utilizat pentru formatare. Dacă nu furnizați această opțiune, formatatorul va alege un cod de monedă pe baza localizării utilizatorului.
• currencyDisplay: Această proprietate specifică modul în care browserul ar trebui să afișeze moneda. Poate fi fie simbol (75 USD), cod (75 USD) sau Nume (75 dolari SUA).

Iată un exemplu care arată cum puteți formata moneda:

const num = 123456;
const locale = getUserLocale(); // ro-US
const opțiuni = {
 stil: "valută",
 valută: "USD",
 currencyAfișare: "cod",
};
const formatator = nouIntl.NumberFormat (locale, opțiuni);
consolă.log (formatter.format (num)); // 123.456,00 USD

Blocul de cod de mai sus formează 123.456 ca monedă (USD).

Unități de formatare

Puteți folosi Intl. NumberFormat() constructor pentru a formata numerele cu unități, cum ar fi lungimea, volumul și masa. Puteți face acest lucru setând stil la unitate. Când setați stilul la unitate, trebuie să specificați aceste opțiuni:

• unitate: Această proprietate specifică unitatea de utilizat pentru formatare, cum ar fi „metru”, „kilogram”, „litru”, „secundă” și așa mai departe.
• unitateDisplay: Această proprietate specifică modul în care browserul ar trebui să afișeze unitatea. Puteți seta la oricare lung (10 litri), mic de statura (10 L), sau îngust (10l).

Iată un exemplu care arată cum puteți formata unitățile:

const num = 123456;
const locale = getUserLocale();
const opțiuni = {
 stil: "unitate",
 unitate: "litru",
 Afișaj unitate: "lung",
};
const formatator = nouIntl.NumberFormat (locale, opțiuni);
consolă.log (formatter.format (num)); //123.456 litri

Blocul de cod de mai sus formatează numărul 123.456 ca unitate în litri.

Alternative la API-ul Intl

API-ul Intl oferă un set puternic și flexibil de instrumente pentru formatarea datelor, numerelor, valutelor și unităților în aplicațiile JavaScript. Acceptă multe locații și oferă o modalitate consecventă de a formata datele în diferite culturi și limbi.

Poate doriți să utilizați o bibliotecă alternativă, cum ar fi Luxon sau Day.js, din cauza suportului limitat de browser pentru Intl. În cele din urmă, alegerea între API-ul Intl sau o alternativă depinde de cerințele și constrângerile specifice ale proiectului.