Artigos de Tecnologia e Negócios > Front-end

Convertendo String para número em JavaScript

Felipe Nascimento
Felipe Nascimento
Imagem de destaque

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.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1056 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1056 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1056 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1056 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana