• Categoria do post:Programação para Web
  • Tempo de leitura:10 minutos de leitura
Ads


Quem nunca precisou formatar um número como moeda ou dinheiro no JavaScript. Na internet é possível encontrar dezenas de soluções para isso,

formatar input de um formulário como moeda, dinheiro

Se você estiver precisando formatar um input de um form como moeda talvez este outro artigo seja mais interessante para você – Como formatar campos de CPF, CEP, Telefone e moeda com jQuery (jMask).

Formatando uma variável como moeda, dinheiro com JavaScript

Supondo que o valor que você deseja formatar não vem de input, ou não é digitado pelo usuário, supondo que o valor que você deseja formatar vem de um cálculo, ou uma variável qualquer, os códigos a seguir mostram de forma simples como resolver.

formatando Moeda, Dinheiro usando toLocaleString() do JavaScript

Existe uma forma muito simples de se formatar dinheiro, basta usar o toLocaleString(), uma função nativa do próprio JavaScript.

O toLocaleString() permite definir e localização do usuário, mas calma, não estou falando de geolocalização. Por exemplo, se você sabe que todos os visitantes do seu site são brasileiros você pode configurar o toLocaleString() para formatar números no formato Real Brasileiro, cuja abreviatura é BRL.

Vamos a um exemplo;

<script>
	var valor = 568.56;
	var valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
	alert('O valor formatado de ' + valor + ' é ' + valorFormatado);
</script>

Eis o resultado;

Como formatar sem o cifrão R$

Se você precisa formatar moeda ou dinheiro mas não quer que o cifrão R$ apareça, neste caso basta não usar a estilização de currency, substituindo-o por minimumFractionDigits: 2});, ficando assim;

<script>
	var valor = 568.5;

        //Valor com cifrão
	var valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
	alert('O valor formatado de ' + valor + ' é ' + valorFormatado);

        //Valor sem cifrão	
	var valorFormatado2 = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2});
	alert('O valor formatado sem o cifrão de ' + valor + ' é ' + valorFormatado2);
</script>

Eis o resultado;

Trabalhando com máscaras em formulários

Se você chegou até este artigo procurando uma solução para máscaras de formulário, talvez o uso da função toLocaleString() não seja a mais simples de aplicar. Para formulários, eu costumo utilizar esta função;

<input type="text" maxlength="9" id="valor" onkeyup="formatarMoeda()">
<script>
    function formatarMoeda() {
        var elemento = document.getElementById('valor');
        var valor = elemento.value;

        valor = valor + '';
        valor = parseInt(valor.replace(/[\D]+/g, ''));
        valor = valor + '';
        valor = valor.replace(/([0-9]{2})$/g, ",$1");

        if (valor.length > 6) {
            valor = valor.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
        }

        elemento.value = valor;
        if(valor == 'NaN') elemento.value = '';
    }
</script>

Eis o resultado, legal né?

Opção 2 – Formatação de Moeda com jQuery

Se você gosta do jQuery, pode se interessar também pela biblioteca jMask, que oferece máscara para os tipos de dados mais comuns como CPF, CNPJ, telefone e também moeda.

Eu recomendo a leitura completa do artigo Como formatar campos de CPF, CEP, Telefone e moeda com jQuery (jMask) aqui no Blogson, ou se preferir, continue lendo que irei fazer um breve resumo de como aplicar esta biblioteca.

Primeiramente você deve carregar a biblioteca em seu site, preferencialmente logo após a carga do jQuery; por exemplo;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

Agora que você j[a fez a carga do jQuery e do jMask, o que você precisa agora é criar o input que irá receber o valor do dinheiro junto com a máscara definida na documentação do jMask; $(this).mask('R$ #.##0,00', {reverse: true});

<input type="text" class="form-control" onkeypress="$(this).mask('R$ #.##0,00', {reverse: true});">

O resultado será este;

Se você gostou deste artigo por favor, ajude clicando em qualquer anúncio publicitário, isso me ajuda a manter os custos da hospedagem do servidor. Obrigado.

Ads

Anderson Oliveira

Anderson Oliveira é desenvolvedor, escritor e docente no CEETPS - Centro Estadual de Educação Tecnologia de São Paulo. Atualmente trabalha na Administração Central do CPS e leciona aulas de programação na Etec Prof. Carmine Biagio Tundisi de Atibaia.