Formatação de números em moeda em JavaScript: 3 melhores maneiras

Dinheiro gosta de ordem: como transformar um número em um preço bonito em JavaScript?

Imagine: você está escrevendo uma loja online. O servidor retorna o preço do produto — apenas um número 1999.5. Mostrar ao usuário um número "cru" é falta de educação. O cliente quer ver "$1,999.50" ou, se você estiver no Brasil, "R$ 1.999,50".

Essa questão atormenta milhares de desenvolvedores no Stack Overflow. Hoje vamos entender de uma vez por todas como formatar números em strings de moeda em JavaScript. Você aprenderá sobre os métodos nativos, suas particularidades e quando é melhor usar cada um.

Por que simplesmente .toFixed(2) é uma má ideia?

Muitos iniciantes fazem assim:

const price = 1999.5;console.log('$' + price.toFixed(2)); // "$1999.50"

Até funciona. Mas isso é uma bomba-relógio. Por quê?

• Sem separadores de milhares. $1999.50 é mais difícil de ler do que $1,999.50.
• Sem localização. Na Europa, a vírgula é o separador decimal, o ponto é o separador de milhares. Seu código quebrará.
• Símbolo da moeda fixo no código. Trocar $ por € significa mexer no código.

Felizmente, o JavaScript moderno nos fornece ferramentas elegantes. Vamos estudá-las.

Método nº 1: Intl.NumberFormat — o rei da formatação (recomendado)

Este objeto faz parte da Internationalization API. Ele foi criado especificamente para trabalhar com localidade, moedas e números. Esta é a maneira mais correta e flexível.

Exemplo básico

const formatter = new Intl.NumberFormat('pt-BR', {    style: 'currency',    currency: 'BRL'});

console.log(formatter.format(1999.5)); // "R$ 1.999,50"

Pronto! O JavaScript colocou os pontos, vírgulas e adicionou o símbolo do real. Mágica, né?

Como funciona?

O construtor recebe dois argumentos:

• locales — uma string com o código da localidade (por exemplo, 'en-US', 'de-DE', 'pt-BR').
• options — um objeto de configuração. Essencial: style: 'currency' e currency: 'USD'.

Configuração para qualquer moeda

Quer dólares para os EUA?

const usFormatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD'});console.log(usFormatter.format(2500)); // "$2,500.00"

Euros para a Alemanha?

const deFormatter = new Intl.NumberFormat('de-DE', {    style: 'currency',    currency: 'EUR'});console.log(deFormatter.format(2500)); // "2.500,00 €"

Observe: na Alemanha, o ponto é o separador de milhares e a vírgula é o separador decimal. O Intl faz tudo por você.

Opções adicionais

Quer remover a parte fracionária (sem centavos)?

const formatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD',    minimumFractionDigits: 0,    maximumFractionDigits: 0});console.log(formatter.format(1999.5)); // "$2,000" (arredondou)

Precisa mostrar sempre 4 casas decimais? Sem problemas:

const preciseFormatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD',    minimumFractionDigits: 4});console.log(preciseFormatter.format(1.2)); // "$1.2000"

Vantagens: nativo, rápido, suporta todas as moedas do mundo, fácil de mudar a localidade.

Desvantagens: não funciona em navegadores muito antigos (IE 10 e anteriores — mas isso já é história).

Método nº 2: Number.prototype.toLocaleString() — rápido e simples

Este método é o "irmão mais novo" do Intl.Num