Como Corrigir a Concatenção de Strings em vez de Adição de Números em JavaScript
Resposta Rápida
let soma = +input1.value + +input2.value;
// Para garantir que a string seja convertida em um número, evite a concatenação usando o sinal de mais unário `+` nos valores de entrada.Conversão de Tipo
No JavaScript, os valores obtidos de formulários são interpretados como strings por padrão. Para tratar os dados de entrada como números, é necessária uma conversão de tipo explícita.
let numero = Number(input);
// Dica: Um método abreviado é usar o sinal de mais +input, que também é eficaz.Tratamento de Inteiros com parseInt
Para trabalhar com inteiros, use a função parseInt() e certifique-se de especificar o sistema numérico (geralmente base 10). Isso ajuda a evitar interpretações octais inesperadas.
let inteiro = parseInt(string, 10);
// Esqueça os problemas de números octais e binários.Navegando em Números Decimais com parseFloat
Se você está lidando com números fracionários, parseFloat() é o caminho a seguir. Essa função preserva o número como uma representação de ponto flutuante sem perder sua parte decimal.
let decimal = parseFloat(string);
// Navegar pelo mar de números se torna possível graças ao parseFloat.Entrada Incorreta? Sem Problemas!
Quando a entrada do usuário é imprevisível e pode incluir valores não numéricos, uma boa estratégia é usar a expressão parseInt(input, 10) || 0. Esse truque garante que qualquer erro de entrada seja automaticamente definido como zero, mantendo a estabilidade dos cálculos.
Visualização
Imagine cada número como uma cor separada:
1️⃣ (vermelho) + 2️⃣ (azul) => 🟣 (roxo)
// Da adição de cores, esperamos obter uma nova cor (a soma das cores).
No entanto, o JavaScript se comporta de maneira diferente sem o tratamento adequado de tipo:
"1️⃣" (tubo de tinta vermelha) + "2️⃣" (tubo de tinta azul) => "12️⃣" (tubo vermelho-azul)
// Em vez de misturar cores, elas ficam lado a lado.
Só após a mistura correta das cores obtemos o resultado desejado:
parseInt("1️⃣", 10) + parseInt("2️⃣", 10) => 3️⃣ (roxo)
// Assim, adicionar números resulta no nascimento de uma nova cor!Nuances da Adição em JavaScript
O + Tem Suas Estranhezas!
No JavaScript, o operador + pode funcionar de maneira diferente, pois está sobrecarregado. Se encontrar uma string, ele prefere a concatenação de strings. Atenção aos tipos de dados ao usá-lo.
Boa Notícia: Strings Não São Permanentes
Os campos de entrada HTML funcionam com texto por padrão, mas podemos convertê-los em números usando as funções Number() ou parseFloat().
Validação de Entrada
Não deixe que entradas incorretas interrompam seus algoritmos numéricos. Inclua verificações de validação para garantir o tratamento adequado de números e antecipe como sua aplicação deve reagir a entradas inesperadas.
Possíveis Problemas e Soluções
Concatenção Inesperada
Se os resultados da adição parecerem mais com concatenação de strings, pode ser que você tenha esquecido a conversão de tipo explícita. Verifique seu código quanto à precisão.
Arredondamento de Números Decimais para Inteiros
Usar parseInt() com números decimais irá truncar a parte fracionária. Se você precisar manter os decimais, use parseFloat().
Base Incorreta em parseInt
Configure a função parseInt() para garantir que o sistema numérico seja base 10 e exclua zeros à esquerda que podem acionar problemas octais.
Recursos Úteis
- Expressões e Operadores — JavaScript | MDN — um estudo detalhado sobre expressões aritméticas e operadores em JavaScript.
- parseInt() — JavaScript | MDN — dominando a função
parseIntem JavaScript. - Método parseFloat() em JavaScript — nuances de converter strings em valores numéricos corretamente.
- Criando um Formulário HTML — W3Schools Você Mesmo — um exemplo de construção de um formulário HTML simples para realizar operações de adição.
- Método toFixed() em JavaScript — usando o método
toFixed()para formatar números decimais em JavaScript. - Tipos de Dados de Entrada em HTML — uma visão geral dos diferentes tipos de entradas HTML necessárias ao trabalhar com formulários e dados do usuário.
- Guia de Manipulação de Eventos | MDN — uma revisão abrangente sobre a manipulação de eventos em JavaScript para aplicações web interativas.