Como formatar moeda com Javascript

Neste tutorial mostro como formatar um valor para o formato de moeda brasileira com Javascript.

---

Introdução

Este será um breve tutorial onde demonstro como utilizar a função toLocaleString() que está presente nativamente no Javascript para formatar um valor numérico em um valor no formato de moeda Brasileira.

  

Como formatar moeda com Javascript no formato de moeda Brasileira

Como mencionei na introdução para implementarmos este tutorial vamos utilizar o método toLocaleString() que é disponibilizado pelo Javascript, vamos realizar a conversão de um valor numérico para o formato de moeda brasileira.

Logo abaixo mostro o código que implementaremos neste tutorial onde exemplifico a função que utilizaremos para conversão:

 

function formataMoeda(value){
    value = parseFloat(value);
    return value.toLocaleString('pt-br',
            {style: 'currency', currency: 'BRL', maximumFractionDigits: 2});
}

console.log(formataMoeda(10));

 

Vamos para uma breve explicação do código acima:

• Primeiro vamos criar uma função chamada (formataMoeda) que receberá um valor numérico como parâmetro;
• Dentro desta função na primeira linha pegamos a variável (value) e utilizaremos a função (parseFloat) para  realizara a conversão do valor recebido pelos parâmetro da função para float;
• Logo após que valor é convertido para float usamos o método toLocaleString() e passamos dois parâmetros para realizarmos a conversão de float para o formato moeda;
• Com o valor que é retornado pelo método toLocaleString() retornamos esse valor como retorno da função que criamos;
• Na ultima linha do código acima utilizamos o console.log , para chamar a função (formataMoeda) e exibir na console o valor convertido;

 

Ao executamos o código que acabamos de implementar será exibido no console a frase (Saída:
R$ 10,00), conforme mostro abaixo:

## Saída:
R$ 10,00

 

Agora segue uma breve explicação dos parâmetros que passamos no método toLocaleString():

Ao utilizar o método toLocaleString() precisamos passar os seguintes parâmetros (locales, [options]).

• locales:
  • Nesse parâmetro informamos a localização, no nosso do exemplo que acabamos de implementar passo a opção  pt-br, que informa que a localização será o formato brasileiro;
• [options]: Nesse parâmetro informamos:
  • style: Esta informação serve para definirmos se o formato vai ser moeda, porcentagem, etc.
  • currency: Esta informação serve para informar o formato do símbolo da moeda, no nosso caso 'BRL'
  • maximumFractionDigits: Esta informação serve para informar o número de casas decimas após a virgula;

Obs: No parâmetro [options], existem muito mais opções vou deixar o link da documentação caso queira verificar.

 

 

Referências:

• Doc. toLocaleString