Como já disseram as outras respostas, o problema ocorre porque toFixed
retorna uma string, então numero1
e numero2
serão strings. E quando você usa o operador +
em strings, elas são concatenadas e o resultado é outra string.
No caso, após as chamadas de toFixed
, numero1
se torna a string '1.10'
e numero2
se torna '2.20'
. E ao concatená-las, o resultado é a string '1.102.20'
:
let numero1 = '1,10';
numero1 = parseFloat(numero1.replace(/[^0-9,]*/g, '').replace(',', '.')).toFixed(2);
let numero2 = '2,20';
numero2 = parseFloat(numero2.replace(/[^0-9,]*/g, '').replace(',', '.')).toFixed(2);
console.log(numero1 + numero2); // 1.102.20
E essa string, quando passada para Math.round
, resulta em NaN
, já que ela não é um número válido (comportamento descrito na especificação da linguagem). Mas apenas para deixar claro, ao contrário do que afirmou outra resposta, Math.round
pode sim receber strings como parâmetro, desde que elas representem números válidos:
console.log(Math.round('1.23')); // 1
console.log(Math.round('7.9')); // 8
console.log(Math.round('-1234')); // -1234
console.log(Math.round('3.02e4')); // 30200 (número em notação científica)
console.log(Math.round('0xff')); // 255 (número em hexadecimal)
console.log(Math.round('')); // 0 (OK, esse é um caso "estranho", string vazia não deveria ser um "número válido", mas o JS acha que é...)
console.log(Math.round('1.102.20')); // NaN
console.log(Math.round('123xyz')); // NaN
Arredondar ou não, eis a questão
Dito isso, a solução correta depende de vários fatores. Pois tem um detalhe importante que deve ser levado em conta: o arredondamento. toFixed
, além de limitar a quantidade de casas decimais, também arredonda o valor caso necessário. Exemplos:
console.log(1.991.toFixed(2)); // '1.99'
console.log(2.999.toFixed(2)); // '3.00'
console.log(1.247.toFixed(2)); // '1.25'
console.log(1.244.toFixed(2)); // '1.24'
E no seu caso, parece que você quer primeiro arredondar os valores (limitando-os a 2 casas decimais com toFixed
) e depois somá-los - e no final arredondar o resultado com Math.round
. Ou seja, se numero1
for '1,247'
e numero2
for '1,245'
, o resultado será 3
:
function arredonda(n) {
n = parseFloat(n.replace(/[^0-9,]*/g, '').replace(',', '.')).toFixed(2);
// toFixed retorna uma string, então eu preciso converter para número de novo
return parseFloat(n);
}
let numero1 = '1,247';
numero1 = arredonda(numero1);
let numero2 = '1,245';
numero2 = arredonda(numero2);
console.log(numero1); // 1.25
console.log(numero2); // 1.25
console.log(numero1 + numero2); // 2.5
console.log(Math.round(numero1 + numero2)); // 3
Mas e se eu não arredondasse os números, e só aplicasse Math.round
no resultado final? Nesse caso o resultado seria 2
:
function converte(n) {
// não usa toFixed, retorna o número com todas as casas decimais
return parseFloat(n.replace(/[^0-9,]*/g, '').replace(',', '.'));
}
let numero1 = '1,247';
numero1 = converte(numero1);
let numero2 = '1,245';
numero2 = converte(numero2);
console.log(numero1); // 1.247
console.log(numero2); // 1.245
console.log(numero1 + numero2); // 2.492
console.log(Math.round(numero1 + numero2)); // 2
Outra opção seria pegar somente as duas primeiras casas decimais dos números (sem arredondar) e o resultado também seria 2
:
function converte(n) {
n = parseFloat(n.replace(/[^0-9,]*/g, '').replace(',', '.'));
// em vez de toFixed, uso matemática para pegar somente as duas primeiras casas decimais
return Math.floor(n * 100) / 100;
}
numero1 = '1,247';
numero1 = converte(numero1);
numero2 = '1,245';
numero2 = converte(numero2);
console.log(numero1); // 1.24
console.log(numero2); // 1.24
console.log(numero1 + numero2); // 2.48
console.log(Math.round(numero1 + numero2)); // 2
Ou seja, cabe a você decidir qual abordagem usar. Não ficou claro se todos os valores que você recebe sempre tem exatamente 2 casas depois da vírgula. Se for isso, então não há arredondamento a ser feito e você nem precisaria usar toFixed(2)
. Bastaria usar a segunda opção acima, que só converte para número, sem arredondar nada. Mas se a quantidade de casas decimais varia e pode ser maior que 2, a escolha de uma das abordagens acima pode fazer toda a diferença no resultado final.
Aliás, o primeiro replace
é desnecessário para estes casos, pois ele remove tudo que não é número nem vírgula. Mas como as strings de exemplo só tem números e uma vírgula, então esse replace
não faz nada. Mas enfim, se os dados reais possuem outros caracteres, aí faz mais sentido usá-lo, senão poderia removê-lo sem problemas.
Dinheiro?
Por este comentário, dá a entender que você está trabalhando com valores monetários. Se realmente for isso, então o melhor é não usar números de ponto flutuante (leia mais sobre o assunto aqui). Em vez disso, você pode simplesmente remover a vírgula e trabalhar com a quantidade total de centavos. Depois, na hora de exibir o valor, aí você formata da maneira que achar melhor.
No caso de valores monetários, você pode inclusive usar Intl.NumberFormat
para formatar o valor de uma maneira mais "bonita":
function converteParaCentavos(n) {
// assumindo que o valor sempre tem 2 casas depois da vírgula,
//basta remover tudo que nao é número para ter a quantidade de centavos
return parseFloat(n.replace(/[^0-9]*/g, ''));
}
// converte tudo para centavos
numero1 = '1,24';
numero1 = converteParaCentavos(numero1);
numero2 = '1,24';
numero2 = converteParaCentavos(numero2);
console.log(numero1); // 124
console.log(numero2); // 124
console.log(numero1 + numero2); // 248
// somente na hora de mostrar, eu divido por 100 para mostrar o valor em reais
console.log(Math.round((numero1 + numero2) / 100)); // 2
// exemplo com Intl.NumberFormat
let formatter = new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL',
});
// sem arredondar
console.log(formatter.format((numero1 + numero2) / 100)); // R$ 2,48
// arredondando
console.log(formatter.format(Math.round((numero1 + numero2) / 100))); // R$ 2,00
+
funciona como concatenador.