Como formatar um número para moedas com Javascript puro

Eu lembro que anos atrás quando queríamos formatar um número para uma moeda era um parto, tínhamos que instalar uma library, chamar no index essa lib e aprender certinho como ela funcionava, que em muitos casos não era tão amigável assim.

Hoje existem dois recursos do próprio javascript para fazer essa formatação, e o primeiro é o toLocaleString.

Vou colocar abaixo o código já formatando um número para o Real e depois explico em detalhes como ele funciona.

const number = 10067;
const numberToCurrency =  number.toLocaleString('pt-BR',{style:'currency', currency:'BRL'});
console.log(numberToCurrency); // output R$ 10.067,00

Na linha 1 eu coloquei um uma constante o número que quero formatar para o Real.

Na linha 2 estou fazendo essa formatação guardando o resultado na constante numberToCurrency, e para isso utilizei o toLocaleString, onde no primeiro parâmetro coloco a língua que quero trabalhar(pt-BR), depois vem um objeto com o style, que é o currency, porque quero formatar o valor para uma currency(moeda), e por último o tipo de currency(moeda), que claro coloquei o BRL(Real do Brasil).

E na linha 3 estou mostrando o resultado.

E aí, simples né ?

E se eu te disser que tem mais uma maneira ?

Olha só o código abaixo.

const number = 10067;
const numberToCurrency = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' });
console.log(numberToCurrency.format(number)); // output R$ 10.067,00

Veja que ao invés de usar o toLocaleString, eu usei o Intl.NumberFormat, mas não se preocupe, o jeito de trabalhar com eles é quase idêntico.

Na linha 1 eu coloco na constante o número que quero formatar.

Na linha 2 eu formato o número passando o resultado para a constante numberToCurrency, e para formatar eu usei o Intl.NumberFormat, onde no primeiro parâmetro coloco a língua que vou trabalhar, claro que usei o pt-BR(assim como no toLocaleString), e o segundo parâmetro é um objeto(assim como o toLocaleString) e nesse objeto preciso colocar o tipo de formatação que é currency(moeda) e depois o tipo de currency(moeda), igual o toLocaleString.

Na linha 3 agora usando a constante numberToCurrency eu chamo o método format passando como parâmetro o número que quero formatar, no caso a constante number.

Pronto, agora você já sabe formatar moedas de duas maneiras, e as duas maneiras são simples e praticamente idênticas.

Abaixo vou deixar uma aula que gravei sobre o assunto.

🔥Canal no YouTube: Ir para o canal no YouTube