JavaScript formatar um número como uma string de moeda

Harshit Jindal 12 outubro 2023
  1. Use o método Intl.NumberFormat() para formatar um número como string de moeda em JavaScript
  2. Use o método toLocaleString() para formatar um número como uma string de moeda em JavaScript
  3. Use a biblioteca Numeral.js para formatar um número como uma string de moeda em JavaScript
JavaScript formatar um número como uma string de moeda

Um número é representado de várias maneiras, data/hora, moeda, número e muito mais. Quando é representado como um valor monetário, seu impacto aumenta e se torna muito mais legível. Por exemplo, um valor monetário escrito como 10000 é muito menos impactante do que um número representado como $ 10,000.00. Ele nos diz muito mais sobre o número, os diferentes símbolos de moeda e as diferentes separações por vírgula. Este tutorial ensina como formatar um número como string de moeda em JavaScript.

Use o método Intl.NumberFormat() para formatar um número como string de moeda em JavaScript

Este método é usado para representar números em formatação sensível ao idioma e representar moeda de acordo com os parâmetros fornecidos. Recebe dois parâmetros como entrada: locales e options.

  1. locales: especifica as configurações de idioma e região. É uma pequena string composta de uma combinação de idioma e região separados por um travessão. Por exemplo, o local en-IN assume o formato da Índia e do idioma inglês. A primeira vírgula da direita separa milhares e permanece em diante em termos de centenas.
  2. options: É um objeto constituído por toneladas de propriedades, ou podemos dizer opções. ao formatar um número como uma string de moeda, existem 3 opções principais necessárias.
  3. style: É simplesmente o estilo da nossa formatação numérica. Pode ter 3 valores diferentes decimal, moeda, percent dependendo do caso de uso. No nosso caso, definiremos o estilo como currency.
  4. currency: especifica o tipo de moeda do símbolo a ser incluído antes da string do número de formatação, por exemplo, dólar americano e euro.
  5. minimumFractionDigits: especifica os dígitos mínimos exibidos após o decimal na string formatada.
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));

O código acima ajuda a converter um determinado número em uma string de moeda indiana.

Use o método toLocaleString() para formatar um número como uma string de moeda em JavaScript

Este método é essencialmente o mesmo que Intl.NumberFormat(), mas geralmente não é usado por causa de sua velocidade lenta com vários itens. Para itens únicos, a velocidade de ambos os métodos é semelhante. Possui os mesmos parâmetros de Intl.NumberFormat(). Apenas difere em velocidade devido à implementação interna diferente de ambos os métodos.

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

O código acima ajuda a converter um determinado número em uma string de moeda indiana.

Use a biblioteca Numeral.js para formatar um número como uma string de moeda em JavaScript

Numeral.js é uma das bibliotecas mais amplamente usadas para formatar números. Para formatar números como string de moeda usando esta biblioteca, primeiro criamos uma instância de um numeral. É o tipo de dados padrão usado por esta biblioteca que converte números ou strings em um número antes de realizar a formatação. Depois, podemos especificar o formato da moeda usando a função format().

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

O código acima é usado para incluir a biblioteca Numeral.js no navegador.

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

Criamos um numeral e chamamos a função de formato para formatar o numeral como USD com 2 casas decimais. O código acima fornece uma maneira muito mais limpa de especificar o formato da moeda.

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

Artigo relacionado - JavaScript Number