JavaScript: convertendo String para número

Introdução

Recentemente eu desenvolvi uma aplicação para descobrir qual seria o novo salário de um funcionário baseado na porcentagem de aumento que ele recebeu.

const salario = pegaSalarioDoFuncionario();
const aumento = 20;
const novoSalario = ( salario * aumento)/100) + salario;
console.log( "Seu novo salario é: " +novoSalario ); 

A resposta para o novo salário foi 3001500! Esse resultado aconteceu porque os dados vieram de um formulário HTML e, em razão disso, a variável salario é uma string.

Apesar de o JavaScript ser uma linguagem fracamente tipada e conseguir fazer operações de subtração, divisão e multiplicação envolvendo strings, ele não entende uma operação de soma envolvendo strings. O que ele faz é concatenar, ou seja ele junta essas duas strings.

As funções parseInt() e parseFloat()

Para que a lógica da aplicação funcione, a variável salario precisa ser transformada em um número.

Em JavaScript temos uma função chamada parseInt(), que vai, em outras palavras, analisar a string e retornar um número inteiro. Agora, com o uso da função, o código da aplicação ficou assim:

const salario = pegaSalarioDoFuncionario();
const salarioFormatado =  parseInt(salario);
const aumento = 20;
const novoSalario = ( salario * aumento)/100) + salarioFormatado;
console.log( "Seu novo salário é: " + novoSalario );

Como cálculos envolvendo salário geralmente utilizam representação de pontos flutuantes, isto é, contém casas decimais, podemos utilizar a função parseFloat() que vai justamente analisar a string e retornar um número com representação decimal, ou seja, com ponto flutuante.

const salario = pegaSalarioDoFuncionario();
const aumento = 0.9;
const salarioFormatado = parseFloat(salario);
const novoSalario = ( salario * aumento)/100) + salarioFormatado;
console.log( "Seu novo salário é: " +novoSalario );

Conclusão

Podemos perceber que dependendo do tipo de entrada que a função recebe ela pode mudar de comportamento e afetar a nossa lógica dentro do sistema.

Tendo em vista que em algumas vezes iremos capturar dados dos usuários para realizar alguma operação de adição, temos que lembrar que em muitas dessas vezes esses inputs virão em formato de string.

Portanto, para não correr o risco de acabar concatenando esses dados ao invés de realizar uma soma, é sempre importante lembrar de utilizar as funções parseInt() ou parseFloat() dependendo do tipo de número que será utilizado para realizar as operações.

Se ficou interessado em como o JavaScript funciona e como você pode utilizá-lo melhor, aqui na Alura temos uma formação em desenvolvimento JavaScript. Nela, você verá como programar em JavaScript, utilizar expressões regulares, entre outras coisas.