Cálculo aceitando vírgula para separar casas decimais em JavaScript

Neste artigo você vai aprender a como realizar um cálculo aceitando vírgula para separar casas decimais em JavaScript, de uma maneira muito simples!

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender a realizar cálculos com vírgula em JS!

A premissa básica é que o JS funciona com o padrão de números americano, ou seja, ao contrário do nosso

Então não devemos mudar o comportamento padrão dele, e sim se adaptar a maneira que ele calcula

A forma mais fácil de fazer isso é converter o número com vírgula para float, realizar a operação e depois voltar para o formato que desejamos novamente

Até por que as vezes não controlamos como recebemos os dados, eles podem vir formatados do back-end no padrão brasileiro, então esta conversão é a melhor pŕatica

Vamos ver um exemplo prático:

var a = "12,13";
var b = "48,12"
var n1 = parseFloat(a.replace(',', '.'));
var n2 = parseFloat(b.replace(',', '.'));
var resultado = n1 + n2;
console.log(resultado); // 60.25

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Utilizamos o replace para trocar o ponto pela vírgula, e o método parseFloat para transformar esta string em um flot

Veja que conseguimos realizar o cálculo normalmente, supondo que os números venham com vírgula no lugar de ponto e em string

Imprimimos o resultado final que é a operação matemática que vamos realizar com os números convertidos

Agora caso você precise voltar a formatação original é só fazer o processo inverso, converter para string e trocar o ponto pela vírgula

Conclusão

Neste artigo vimos como realizar um cálculo aceitando vírgula para separar casas decimais

Não mudamos o comportamento padrão de JavaScript, e sim convertemos o nosso valor para o que a linguagem usa

Assim obtemos o valor final da operação e depois podemos converter novamente para o nosso formato

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

E quando o número vem com separador de milhar?

Aqui mora a pegadinha que quebra o cálculo em produção

Se o valor chega como "1.234,56" e você só troca a vírgula pelo ponto, o ponto do milhar continua lá, e aí o parseFloat lê até o primeiro ponto e para

Ou seja, você acha que somou mil e duzentos e somou 1.234 mesmo, mas com o resto jogado fora

Então a ordem importa: primeiro tira o ponto do milhar, depois troca a vírgula pelo ponto

var valor = "1.234,56";
var numero = parseFloat(valor.replace(/\./g, '').replace(',', '.'));
console.log(numero); // 1234.56

E o que significa aquele /\./g? É uma expressão regular que pega TODOS os pontos da string, não só o primeiro

Sem o g ele troca só a primeira ocorrência, e valores grandes continuam quebrados

Tome cuidado com a ordem, invertendo você perde a parte inteira do número e nem percebe

Voltando o resultado para o formato brasileiro:

O parágrafo acima diz o caminho, agora bora ver ele em código

A forma mais direta é fixar as casas decimais e trocar o ponto pela vírgula

var resultado = 60.25;
var formatado = resultado.toFixed(2).replace('.', ',');
console.log(formatado); // "60,25"

O toFixed(2) já resolve dois problemas de uma vez: garante as duas casas decimais e devolve uma string pronta pra trocar o separador

Se além da vírgula você também quer o ponto do milhar de volta, dá pra pedir a formatação em português direto:

var total = 1234.5;
var formatado = total.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
console.log(formatado); // "1.234,50"

Repare que o retorno é sempre string, então esse valor serve pra MOSTRAR na tela, não pra continuar fazendo conta em cima

A regra é simples: calcula com número, formata só na hora de exibir 🙂

Caso o resultado apareça como NaN:

Já me ferrei com isso mais de uma vez, então já te aviso

NaN quer dizer "Not a Number", e no nosso caso quase sempre significa que sobrou sujeira na string antes da conversão

Os suspeitos de sempre: símbolo de moeda, espaço, ponto de milhar esquecido ou campo vazio

A saída é limpar tudo que não for dígito, vírgula ou sinal de menos, e só então converter

console.log(numero); // 1234.56

E antes de somar, vale uma checagem simples pra não propagar o erro pro resto da conta:

if (isNaN(numero)) {
numero = 0;
}

Assim um campo em branco vira zero em vez de contaminar o total inteiro com NaN

Somando valores que vêm de um campo do formulário:

Na prática o número com vírgula quase nunca está fixo no código, ele vem do que o usuário digitou

E o valor de um input chega SEMPRE como string, mesmo que pareça número na tela

Então é o mesmo processo, só que pegando o valor do campo antes:

var campo1 = document.querySelector('#valor1');
var campo2 = document.querySelector('#valor2');

var n1 = parseFloat(campo1.value.replace(',', '.'));
var n2 = parseFloat(campo2.value.replace(',', '.'));

var total = n1 + n2;
console.log(total.toFixed(2).replace('.', ',')); // "60,25"

Se forem vários campos, o pulo do gato é isolar a conversão numa função e reaproveitar:

function paraNumero(texto) {
return parseFloat(texto.replace(/\./g, '').replace(',', '.')) || 0;
}

Aí tu chama paraNumero(campo.value) em qualquer lugar e para de repetir replace espalhado pelo projeto

Bora testar no seu formulário?

Perguntas frequentes sobre cálculo com vírgula em JavaScript

Dá para somar direto usando vírgula no JavaScript?

Não dá

A linguagem enxerga o ponto como separador decimal, e a vírgula tem outro papel dentro do código

Por isso o caminho é sempre converter antes de calcular, e não tentar mudar o comportamento da linguagem

Qual a diferença entre parseFloat e Number nessa conversão?

Os dois transformam string em número, mas reagem diferente à sujeira

O parseFloat lê a string até achar um caractere inválido e devolve o que conseguiu ler, já o Number é tudo ou nada

console.log(parseFloat("12,13")); // 12
console.log(Number("12,13"));     // NaN

Repare que o parseFloat sozinho não te salva: ele devolve 12 e engole os centavos calado, que é o pior tipo de bug

A troca da vírgula pelo ponto continua sendo obrigatória nos dois casos

Por que 0.1 + 0.2 não dá exatamente 0.3?

Esse é o famoso ponto flutuante, e não tem nada a ver com vírgula

Os números decimais são guardados em binário, e alguns valores não têm representação exata, então sobra aquela sujeirinha no fim

console.log(0.1 + 0.2); // 0.30000000000000004

Pra valor monetário, arredondar na hora de exibir com toFixed(2) já resolve o dia a dia

Se o sistema é financeiro de verdade, o caminho mais seguro é trabalhar com centavos em número inteiro e só dividir na exibição