Formatta un numero in JavaScript

Ci sono vari modi in cui persone di diversi paesi e regioni seguono modi diversi di formattare un numero. E potrebbero esserci casi in cui desideriamo formattare un numero sui nostri siti Web in base a quale parte del mondo il visitatore accede al nostro sito Web.

Potrebbe diventare difficile se provi a farlo manualmente in base alla posizione dell’utente. Ma non preoccuparti, non devi farlo manualmente poiché esiste un modo migliore per formattare un numero in JavaScript, e questo è con l’aiuto del metodo toLocalString(). Questo metodo restituisce una stringa con la rappresentazione specifica della lingua del numero.

Formattare i numeri con il metodo toLocaleString() in JavaScript

Richiede prima due parametri è locales, e il secondo è options. Entrambi questi parametri sono facoltativi, il che significa che non è obbligatorio. Puoi eseguire direttamente il metodo senza passare anche quei parametri. Se vuoi formattare i numeri, in questo caso, lo facciamo, quindi dobbiamo passare quei parametri.

Prima capiamo cosa significa ciascuno di questi parametri e poi vedremo come utilizzarli nel nostro codice.

1. Il parametro locales

Il locales è il primo parametro che il metodo toLocalString() accetta. Rappresenta una stringa di tag di lingua BCP 47 o un array di tali stringhe. Il tag della lingua BCP 47 è un codice per identificare le lingue umane.

Ad esempio, il tag ar-SA dice che è per la lingua araba rappresentata da ar, parlata nella regione dell’Arabia Saudita SA. Quindi, se passi questa stringa come primo argomento, formatterà il numero in modo che sia scritto in lingua araba.

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

Produzione:

١٢٬٣٤٥

Qui abbiamo creato una funzione freccia chiamata eArabic, che prende un numero come parametro. Ora stiamo passando il numero 12345 a questa funzione freccia. Questa funzione mira a convertire il numero 12345 nel suo formato equivalente arabo ar-SA con l’aiuto del metodo toLocalString().

Puoi copiare e incollare direttamente l’intero codice sopra ed eseguirlo nella finestra della console del browser per vedere l’output.

Per saperne di più su tutti i tag delle lingue BCP 47, puoi dare un’occhiata a questa risorsa.

Puoi anche passare undefined come locales. Prenderà la lingua predefinita impostata nel browser del visitatore. Quindi, se qualcuno ha cambiato la lingua del proprio browser in tedesco, questo mostrerà il numero in formato tedesco.

2. Il parametro options

Le options sono un oggetto, ed è il secondo parametro che il metodo toLocalString() accetta. Trattandosi di un oggetto, questo parametro può assumere varie proprietà come currency, currencySign, style, unitDisplay e molte altre.

Prendiamo lo stesso esempio che abbiamo preso sopra, e proviamo a modificarlo per capire il parametro options. In precedenza, prendiamo solo il numero 12345 e poi lo formattiamo in lingua araba. Ora diamo anche al numero una formattazione di valuta dandogli uno stile di valuta con simbolo di valuta e aggiungiamo alcune cifre frazionarie alla fine di quel numero con l’aiuto di options.

let eArabic = (number => {
  return number.toLocaleString(
      'ar-SA', {style: 'currency', currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

Produzione:

١٢٬٣٤٥٫٠٠٠ ر.س

In questo caso al metodo toLocaleString() abbiamo ora aggiunto anche il parametro options, che è un oggetto. Attualmente, ci vogliono 3 proprietà, la proprietà style formatterà il numero in formato valuta, la proprietà currency dirà quale valuta rappresenta, in questo caso, Riyal saudita SAR e la proprietà minimumFractionDigits rappresenta quanti cifre frazionarie che si desidera visualizzare alla fine del numero.

Qui, se stai impostando la proprietà stile con la valuta del valore, devi anche impostare la proprietà valuta con un certo valore. Altrimenti, otterrai un errore di tipo: Currency code is required with currency style.

Nell’output del programma di cui sopra, abbiamo prima il nome della valuta Saudi Riyal ر.س.. Se fosse USD, sarebbe il simbolo $. Quindi abbiamo il numero stesso in lingua araba ١٢٬٣٤٥. Se fosse in USD, sarebbe 12,345. Infine, abbiamo le 3 cifre frazionarie dopo il punto che è rappresentato nella lingua araba come ٫٠٠٠ e USD come .000.

// USD format
$12, 345.000

Qui, ti forniamo anche l’output per il formato di valuta degli Stati Uniti per metterlo facilmente in relazione con l’output del formato di valuta dell’Arabia Saudita poiché potrebbe essere difficile per le persone capire la lingua araba.

È possibile utilizzare uno qualsiasi di questi parametri e proprietà dell’oggetto nel codice a seconda di come si desidera formattare il numero. Puoi anche visitare i vari collegamenti forniti in questo articolo per saperne di più su toLocalString() per formattare un numero in JavaScript.