Formatar moeda brasileira em JavaScript (float para Real)

Neste artigo você vai aprender como formatar moeda brasileira em JavaScript, ou seja, converter um número com ponto flutuante para a moeda Real.

Fala programador(a), beleza? Bora aprender sobre conversão de moeda em JavaScript!

Essa função é muto simples com JavaScript, temos um método chamado toLocaleString que atua em números

Fazendo a conversão do mesmo para uma moeda, por exemplo, e podemos escolher o tipo dela

Então vamos determinar que queremos receber o número em pt-br e também que o tipo de moeda é BRL (Real)

Veja um exemplo prático:

var numero = 125.45;

//com R$
var dinheiro = numero.toLocaleString('pt-br',{style: 'currency', currency: 'BRL'});

console.log(dinheiro);

Aqui receberemos a string R$ 124,45

Note que o número é convertido para um dado de texto, pois ele deixa de ser um número por causa da conversão para moeda

Então é interessante utilizar este método apenas quando precisamos exibir para um usuário um determinado número, já na sua forma final

E não quando temos que realizar outra operação com a moeda, aí a ideia é utilizar o valor em ponto flutuante do JavaScript mesmo, entendeu? 😀

Conclusão

Neste artigo vimos como formatar moeda brasileira em JavaScript

Ou seja, converter um número, que pode ser um float, na moeda Real, a que é utilizada em nosso país

Utilizamos para isso o método toLocaleString que é aplicado em dados do tipo number

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Além do toLocaleString existe uma outra forma de fazer isso, usando o objeto Intl.NumberFormat

A vantagem é que tu cria o formatador uma vez e reaproveita ele em vários números, fica mais limpo quando precisa formatar muita coisa

Veja na prática:

const formatador = new Intl.NumberFormat(‘pt-BR’, { style: ‘currency’, currency: ‘BRL’ });

console.log(formatador.format(125.45)); // R$ 125,45

O resultado é o mesmo do toLocaleString, a escolha fica por conta do teu gosto e do cenário

Lembra que o valor formatado vira texto?

Aqui a ideia é limpar o símbolo, tirar o ponto de milhar e trocar a vírgula do decimal por ponto

Se liga:

const numero = Number( texto.replace(‘R$’, ”).trim().replace(/\./g, ”).replace(‘,’, ‘.’) );

console.log(numero); // 1250.45

Agora tu tem um number de novo e pode somar, multiplicar e o que mais precisar

Nem sempre tu quer o R$ na frente, as vezes só precisa do número com duas casas e a vírgula certinha do padrão brasileiro

Pra isso é só formatar sem o style de currency:

const numero = 125.45;

const valor = numero.toLocaleString(‘pt-BR’, { minimumFractionDigits: 2, maximumFractionDigits: 2 });

console.log(valor); // 125,45

Assim tu controla as casas decimais e mantém o formato brasileiro, sem o símbolo da moeda

Perguntas frequentes:

Por que o valor vira texto depois de formatar? Porque o toLocaleString devolve uma string já pronta pra exibição, com símbolo e vírgula. Ele deixa de ser number, então use só na hora de mostrar pro usuário, nunca pra fazer conta

Qual a diferença entre toLocaleString e Intl.NumberFormat? Os dois chegam no mesmo resultado. O Intl.NumberFormat cria um formatador reutilizável, bom quando tu vai formatar vários valores; o toLocaleString é mais direto pra um número só

Como fazer conta com um valor que já está formatado? Primeiro converte a string de volta pra número, limpando o R$ e trocando a vírgula por ponto, aí sim faz a operação