Formatta un numero come stringa di valuta in JavaScript

Harshit Jindal 12 ottobre 2023
  1. Usa il metodo Intl.NumberFormat() per formattare un numero come stringa di valuta in JavaScript
  2. Usa il metodo toLocaleString() per formattare un numero come stringa di valuta in JavaScript
  3. Utilizza la libreria Numeral.js per formattare un numero come stringa di valuta in JavaScript
Formatta un numero come stringa di valuta in JavaScript

Un numero è rappresentato in molti modi, data/ora, valuta, numero e molto altro. Quando è rappresentato come valore monetario, il suo impatto aumenta e diventa molto più leggibile. Ad esempio, un valore monetario scritto come 10000 ha un impatto molto inferiore rispetto a un numero rappresentato come $ 10,000.00. Ci dice molto di più sul numero, sui diversi simboli di valuta e sulle diverse separazioni di virgole. Questo tutorial insegna come formattare un numero come stringa di valuta in JavaScript.

Usa il metodo Intl.NumberFormat() per formattare un numero come stringa di valuta in JavaScript

Questo metodo viene utilizzato per rappresentare i numeri nella formattazione sensibile alla lingua e rappresentare la valuta in base ai parametri forniti. Accetta due parametri come input: locales e options.

  1. locales: specifica la lingua e le impostazioni della regione. È una piccola stringa composta da una combinazione di lingua e regione separate da un trattino. Ad esempio, la locale en-IN assume il formato dell’India e della lingua inglese. La prima virgola da destra separa migliaia e resta in avanti in termini di centinaia.
  2. opzioni: è un oggetto costituito da tonnellate di proprietà, o possiamo dire opzioni. quando si formatta un numero come stringa di valuta, sono necessarie 3 opzioni principali.
  3. style: è semplicemente lo stile per la nostra formattazione del numero. Può avere 3 valori diversi decimale, valuta, percentuale a seconda del caso d’uso. Nel nostro caso, imposteremo lo stile come currency.
  4. currency: specifica il tipo di valuta del simbolo da includere prima della stringa del numero di formattazione, ad esempio dollaro USA ed euro.
  5. minimumFractionDigits: specifica le cifre minime visualizzate dopo il decimale nella stringa formattata.
const money = 10000;
const currency = function(number) {
  return new Intl
      .NumberFormat(
          'en-IN',
          {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
      .format(number);
};
console.log(currency(money));

Il codice sopra aiuta a convertire un dato numero in una stringa di valuta indiana.

Usa il metodo toLocaleString() per formattare un numero come stringa di valuta in JavaScript

Questo metodo è essenzialmente lo stesso di Intl.NumberFormat() ma di solito non viene utilizzato a causa della sua bassa velocità con più elementi. Per i singoli articoli la velocità di entrambi i metodi è simile. Ha gli stessi parametri di Intl.NumberFormat(). Differisce solo in velocità a causa della diversa implementazione interna di entrambi i metodi.

const number = 2000;
number.toLocaleString(
    'en-IN', {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
console.log(number);

Il codice sopra aiuta a convertire un dato numero in una stringa di valuta indiana.

Utilizza la libreria Numeral.js per formattare un numero come stringa di valuta in JavaScript

Numeral.js è una delle librerie più utilizzate per la formattazione dei numeri. Per formattare i numeri come stringhe di valuta utilizzando questa libreria, creiamo prima un’istanza di un numero. È il tipo di dati standard utilizzato da questa libreria che converte numeri o stringhe in un numero prima di eseguire la formattazione. Dopodiché possiamo specificare il formato della valuta usando la funzione format().

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

Il codice sopra viene utilizzato per includere la libreria Numeral.js nel browser.

var number = 1000;
var myNumeral = numeral(number);
var currencyString = myNumeral.format('$0,0.00');

Abbiamo creato un numero e quindi chiamato la funzione di formattazione per formattare il numero come USD con 2 punti decimali. Il codice sopra fornisce un modo molto più pulito per specificare il formato della valuta.

Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

Articolo correlato - JavaScript Number