Formatarea numerelor cu Intl - NumberFormat
În diferite culturi, se folosesc diferite metode de afișare a numerelor. De exemplu, în unele culturi (cum ar fi în SUA sau Marea Britanie) se utilizează punctul ca separator între partea întreagă și cea fracționară, în timp ce în alte culturi se folosește virgula. Similar, separatorul pentru grupuri de cifre poate fi fie un punct, fie o virgulă. Și obiectul Intl.NumberFormat ne permite să localizăm numerele pentru o cultură specifică.
Constructorul Intl.NumberFormat poate accepta doi parametri:
Intl.NumberFormat([locales[, options]])Parametrul locales reprezintă codul limbii în formatul BCP 47 sau un set de coduri de limbi.
Parametrul options reprezintă un set suplimentar de opțiuni:
- localeMatcher: algoritmul de potrivire. Poate fi "lookup" sau "best fit". Implicit este "best fit"
- compactDisplay: se aplică dacă parametrul notation este "compact". Valorile posibile sunt: "long" și "short" (implicit)
- currency: specifică moneda care se folosește pentru formatare. Acceptă codul monedei în format ISO 4217, de exemplu, "USD" pentru dolarul american, "EUR" pentru euro, etc. Acest parametru trebuie specificat obligatoriu dacă parametrul style este "currency"
- currencyDisplay: specifică modul în care se afișează moneda. Valorile posibile:
1) "symbol": utilizează simbolul monedei (de exemplu, € pentru euro). Implicit 2) "narrowSymbol": utilizează o formă scurtă pentru simbolul monedei (de exemplu, "$100" în loc de "US$100") 3) "code": utilizează codul monedei 4) "name": utilizează numele localizat al monedei (de exemplu, "dolar")
- currencySign: semnul înaintea numărului care reprezintă moneda. Valorile posibile sunt "standard" (implicit) și "accounting"
- notation: tipul de formatare. Valorile posibile:
1) "standard": pentru formatarea numerelor obișnuite. Implicit 2) "scientific": returnează ordinul de mărime pentru numărul formatat 3) "engineering": returnează valoarea în notație științifică 4) "compact": pentru reprezentarea în notație compactă
- numberingSystem: sistemul numeric. Valorile posibile: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"
- signDisplay: specifică dacă semnul trebuie afișat înaintea numărului. Valorile posibile:
1) "auto": semnul este afișat doar pentru numere negative. Implicit 2) "never": semnul nu este niciodată afișat 3) "always": semnul este afișat întotdeauna 4) "exceptZero": semnul este afișat pentru toate numerele, în afară de zero
- style: tipul de formatare. Valorile posibile:
1) "decimal": pentru formatarea numerelor obișnuite. Implicit 2) "currency": pentru formatarea monedelor 3) "percent": pentru formatarea procentelor 4) "unit": pentru formatarea unităților de măsură
- unit: stabilește unitatea de măsură. Unitățile de măsură disponibile pot fi găsite în documentația corespunzătoare
- unitDisplay: tipul de afișare a unității de măsură. Valorile posibile:
1) "long": forma completă (de exemplu, 16 litri) 2) "short": forma scurtă (de exemplu, 16 l). Implicit 3) "narrow": forma compactă (de exemplu, 16l)
- useGrouping: specifică dacă se utilizează separatorul de grupuri de cifre. Valorile posibile sunt true (utilizează separatori - implicit) și false (nu utilizează separatori)
- minimumIntegerDigits: numărul minim de cifre în partea întreagă a numărului. Valorile posibile: de la 1 (implicit) la 21
- minimumFractionDigits: numărul minim de cifre în partea fracționară a numărului. Valorile posibile: de la 0 (implicit) la 20
- maximumFractionDigits: numărul maxim de cifre în partea fracționară a numărului. Valorile posibile: de la 0 la 20
- minimumSignificantDigits: numărul minim de cifre semnificative. Valorile posibile: de la 1 (implicit) la 21
- maximumSignificantDigits: numărul maxim de cifre semnificative. Valorile posibile: de la 1 (implicit) la 21
Pentru formatarea unui număr, obiectul Intl.NumberFormat oferă metoda format(), în care se transmite numărul ce trebuie formatat și care returnează numărul formatat sub formă de șir de caractere.
Să localizăm numărul 5500,67 în diferite limbi:
const amount = 5500.67;
const en = new Intl.NumberFormat("en").format(amount);
const ro = new Intl.NumberFormat("ro").format(amount);
const de = new Intl.NumberFormat("de").format(amount);
console.log(en); // 5,500.67
console.log(ro); // 5.500,67
console.log(de); // 5.500,67Implicit, pentru formatarea numerelor se aplică parametrul {style: "decimal"}. De asemenea, am putea să-l aplicăm în mod explicit:
const amount = 5500.67;
const ro = new Intl.NumberFormat("ro", {style: "decimal"}).format(amount);
// la fel ca și
// const ro = new Intl.NumberFormat("ro").format(amount);
console.log(ro); // 5.500,67Formatarea procentelor
În diferite culturi, forma de scriere a procentelor poate varia. Pentru localizarea procentelor se utilizează valoarea {style: "percent"}:
const value = 0.851;
const en = new Intl.NumberFormat("en", {style: "percent"}).format(value);
const ro = new Intl.NumberFormat("ro", {style: "percent"}).format(value);
const tr = new Intl.NumberFormat("tr", {style: "percent"}).format(value);
console.log(en); // 85%
console.log(ro); // 85%
console.log(tr); // %85Afișarea părții fracționare
În exemplul anterior, observăm că partea fracționară se pierde. Pentru a corecta această situație, putem folosi parametrul minimumFractionDigits, care stabilește numărul de cifre din partea fracționară:
const value = 0.851;
const en = new Intl.NumberFormat("en", {style: "percent", minimumFractionDigits: 2}).format(value);
const ro = new Intl.NumberFormat("ro", {style: "percent", minimumFractionDigits: 2}).format(value);
console.log(en); // 85.10%
console.log(ro); // 85,10%Formatarea monedei
Pentru formatarea monedei se utilizează parametrul {style: "currency"}, iar trebuie specificat și parametrul currency, căruia îi transmitem codul monedei:
const value = 85.1;
const en = new Intl.NumberFormat("en", {style: "currency", currency: "USD"}).format(value);
const ro = new Intl.NumberFormat("ro", {style: "currency", currency: "USD"}).format(value);
const tr = new Intl.NumberFormat("tr", {style: "currency", currency: "USD"}).format(value);
console.log(en); // $85.10
console.log(ro); // 85,10 USD
console.log(tr); // $85,10Afișarea mai multor monede:
const value = 85.1;
const usd = new Intl.NumberFormat("ro", {style: "currency", currency: "USD"}).format(value);
const euro = new Intl.NumberFormat("ro", {style: "currency", currency: "EUR"}).format(value);
const ron = new Intl.NumberFormat("ro", {style: "currency", currency: "RON"}).format(value);
console.log(usd); // 85,10 USD
console.log(euro); // 85,10 EUR
console.log(ron); // 85,10 RONImplicit se afișează simbolul monedei, dar valoarea {currencyDisplay: "name"} permite afișarea numelui localizat al monedei:
const value = 85;
const usd = new Intl.NumberFormat("ro", {style: "currency", currency: "USD", currencyDisplay: "name", minimumFractionDigits: 0}).format(value);
const euro = new Intl.NumberFormat("ro", {style: "currency", currency: "EUR", currencyDisplay: "name"}).format(value);
const ron= new Intl.NumberFormat("ro", {style: "currency", currency: "RON", currencyDisplay: "name"}).format(value);
console.log(usd); // 85 dolari americani
console.log(euro); // 85,00 euro
console.log(ron); // 85,00 lei româneștiFormatarea unităților de măsură
Pentru formatarea unităților de măsură se utilizează valoarea {style: "unit"}. Trebuie să specificăm și numele unității de măsură folosind parametrul unit:
const value = 85;
const en = new Intl.NumberFormat("en", {style: "unit", unit: "liter"}).format(value);
const ro = new Intl.NumberFormat("ro", {style: "unit", unit: "liter"}).format(value);
const zh = new Intl.NumberFormat("zh", {style: "unit", unit: "liter"}).format(value);
console.log(en); // 85 L
console.log(ro); // 85 l
console.log(zh); // 85升Implicit se utilizează forma scurtă a numelui unității de măsură. Cu valoarea {unitDisplay: "long"}, putem specifica afișarea numelui complet al unității de măsură:
const value = 85;
const longLiter = new Intl.NumberFormat("ro", {style: "unit", unit: "liter", unitDisplay: "long"}).format(value);
const shortLiter = new Intl.NumberFormat("ro", {style: "unit", unit: "liter", unitDisplay: "short"}).format(value);
console.log(longLiter); // 85 litri
console.log(shortLiter); // 85 lMai multe exemple cu formatarea diferitelor unități de măsură:
const value = 85;
const kilobyte = new Intl.NumberFormat("ro", {style: "unit", unit: "kilobyte", unitDisplay: "long"}).format(value);
const meter = new Intl.NumberFormat("ro", {style: "unit", unit: "meter", unitDisplay: "long"}).format(value);
const gram = new Intl.NumberFormat("ro", {style: "unit", unit: "gram", unitDisplay: "long"}).format(value);
console.log(kilobyte); // 85 kilobiți
console.log(meter); // 85 metri
console.log(gram); // 85 grameMetoda toLocaleString a tipului Number
Este demn de menționat că tipul Number are metoda toLocaleString(), care acceptă o localizare și localizează numărul în acea localizare:
const num = 1007.56;
console.log(num.toLocaleString("en")); // 1,007.56
console.log(num.toLocaleString("de")); // 1.007,56
console.log(num.toLocaleString("ro")); // 1.007,56