Como resolver: somar dois números juntam eles em vez de somar

Neste artigo você vai aprender a como resolver o classico problema: somar dois números juntam eles em vez de somar, em JavaScript.

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Introdução

Uma situação comum que os programadores enfrentam ao trabalhar com JavaScript é quando tentam somar dois números, mas, em vez disso, eles são concatenados como strings.

Isso ocorre porque o JavaScript é uma linguagem de tipagem dinâmica e, às vezes, não distingue corretamente entre números e strings.

Neste artigo, discutiremos o problema de somar dois números juntam eles em vez de somar e abordaremos várias soluções para resolvê-lo.

Entendendo o problema

Vamos começar com um exemplo simples:

const a = "10";
const b = "20";
const soma = a + b;
console.log(soma); // "1020" em vez de 30

Neste exemplo, esperamos que a e b sejam somados e o resultado seja 30.

No entanto, como a e b são strings, o operador + os concatena em vez de somá-los, resultando em “1020”.

Isso ocorre porque o JavaScript trata o operador + como uma concatenação de strings quando pelo menos um dos operandos é uma string.

Converter strings em números

A solução mais simples para esse problema é converter as strings em números antes de somá-los. Existem várias maneiras de fazer isso no JavaScript:

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

Usar o construtor Number:

const a = "10";
const b = "20";
const soma = Number(a) + Number(b);
console.log(soma); // 30

Usar o operador unário +:

const a = "10";
const b = "20";
const soma = +a + +b;
console.log(soma); // 30

Usar a função parseInt:

const a = "10";
const b = "20";
const soma = parseInt(a, 10) + parseInt(b, 10);
console.log(soma); // 30

Usar a função parseFloat para números decimais:

const a = "10.5";
const b = "20.5";
const soma = parseFloat(a) + parseFloat(b);
console.log(soma); // 31

Qualquer uma dessas abordagens converterá as strings em números antes de realizar a soma, fornecendo o resultado esperado.

Garantindo que os valores sejam números

Se você estiver trabalhando com dados de entrada que podem ser números ou strings, pode ser útil garantir que todos os valores sejam números antes de realizar operações matemáticas.

Uma maneira de fazer isso é usar a função Number.isFinite:

function somar(a, b) {
  if (!Number.isFinite(a) || !Number.isFinite(b)) {
    throw new Error("Os valores devem ser números.");
  }

  return a + b;
}

const a = "10";
const b = "20";
const soma = somar(Number(a), Number(b));
console.log(soma); // 30

Neste exemplo, a função somar verifica se ambos os argumentos são números finitos e lança um erro se algum deles não for.

Isso pode ajudar a evitar problemas ao somar valores inesperadamente tratados como strings.

Usando o TypeScript

Se você encontrar esse problema com frequência e desejar uma solução mais robusta, pode considerar o uso do TypeScript.

O TypeScript é um superconjunto de JavaScript que adiciona tipos estáticos à linguagem.

Com o TypeScript, você pode especificar os tipos de variáveis e funções e o compilador TypeScript verificará se os tipos estão corretos durante a compilação.

function somar(a: number, b: number): number {
  return a + b;
}

const a = 10;
const b = 20;
const soma = somar(a, b);
console.log(soma); // 30

Neste exemplo, a função somar recebe dois argumentos do tipo number e retorna um number.

Se você tentar passar uma string para a função, o compilador TypeScript lançará um erro.

const a = "10";
const b = "20";
const soma = somar(a, b); // Erro: Argumento do tipo 'string' não é atribuível ao parâmetro do tipo 'number'.

Isso pode ajudar a evitar problemas com a concatenação de strings em vez da soma de números.

Lidando com entradas de usuário e validação

Muitas vezes, o problema de somar dois números juntam eles em vez de somar surge quando lidamos com entradas de usuário.

Ao receber entradas de usuário, é importante validar e limpar os dados antes de usá-los em cálculos ou outras operações.

Aqui estão algumas dicas para lidar com entradas de usuário:

• Use a função Number ou parseFloat para converter strings em números antes de realizar operações matemáticas.
• Verifique se os valores convertidos são números finitos usando a função Number.isFinite.
• Informe o usuário sobre erros de entrada e forneça orientações sobre como corrigi-los.
• Considere o uso de bibliotecas de validação de entrada, como Joi, para simplificar a validação e limpeza de dados de entrada.

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo, exploramos o problema de somar dois números juntam eles em vez de somar no JavaScript e discutimos várias soluções para resolvê-lo.

Aprendemos como converter strings em números antes de somá-los, garantir que os valores sejam números antes de realizar operações matemáticas, usar o TypeScript para adicionar tipos estáticos e lidar com entradas de usuário e validação.

Ao aplicar essas técnicas, você pode evitar problemas com a concatenação de strings em vez da soma de números e escrever código JavaScript mais robusto e confiável.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Um bloco enxuto de resposta direta pra quem chegou com pressa, algo tipo:

A solução rápida:

Envolve os dois valores com Number() antes de usar o +

const a = "10" const b = "20" const soma = Number(a) + Number(b) console.log(soma) // 30

O problema não é o seu +, é que um dos valores é texto (string) e o JavaScript concatena texto em vez de somar

Converteu pra número, o + volta a somar de boa

Explicar que input.value SEMPRE devolve string, mesmo em <input type="number">, e mostrar o antes e depois:

const valor1 = document.getElementById("num1").value // isso é string! const valor2 = document.getElementById("num2").value

const errado = valor1 + valor2 // "1020" const certo = Number(valor1) + Number(valor2) // 30

Antecipar o erro do leitor: mesmo marcando type="number" no HTML, o .value continua vindo como texto, se liga nisso porque pega muita gente

Um bloco comparando as três conversões que o post já cita, mas sem explicar quando escolher cada uma:

Number(): converte o valor inteiro, se tiver qualquer caractere estranho vira NaN, bom quando você quer o número exato incluindo decimais

parseInt(): lê da esquerda pra direita e para no primeiro caractere não numérico, ignora a parte decimal (parseInt("10.9") vira 10), sempre passe a base 10 como segundo argumento

parseFloat(): igual ao parseInt mas mantém os decimais, é o que você usa pra preço, medida, nota

Regra prática: número redondo use Number, precisa de casa decimal use parseFloat

Bloco de FAQ com perguntas reais de quem busca esse erro, cada uma respondida em 2 ou 3 linhas:

Por que o + concatena em vez de somar no JavaScript? Porque quando um dos lados do + é string, o JavaScript entende que você quer juntar texto, não somar. Basta um dos valores ser texto pra ele concatenar tudo

Como somar valores de dois inputs no JavaScript? Pega os dois .value, converte com Number() ou parseFloat() e aí soma. O .value sempre vem como string, mesmo em input type number

Apareceu NaN quando fui somar, o que é isso? NaN é "não é um número". Rola quando você tenta converter um texto que não representa número (um campo vazio ou com letra, por exemplo). Vale validar o valor antes de somar

Qual a diferença entre Number e parseInt? Number converte o valor todo e vira NaN se tiver caractere inválido. parseInt lê só até onde for número e descarta os decimais