Converter String para Número e vice-versa em JavaScript

Neste tutorial, vamos aprender como transformar uma variável que é string em número (tanto inteiro como decimal, os floats) e vice-versa, em JavaScript.

Tutorial anterior: Como receber dados do usuário

Baixe nosso PDF: Apostila de JavaScript

Trabalhando com Dados do Usuário

Vamos criar um script que pede um número ao usuário, e armazena na variável num1.

Depois, vamos pedir outro número ao usuário, e vamos armazenar na variável num2.

Por fim, vamos exibir o resultado da soma dessas duas variáveis, no documento HTML.

Nosso código HTML/JS fica:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    var num2 = prompt("Segundo  numero: ");
    document.write("Soma = ", num1+num2);
   </script>

 </head>
</html>

Digitando 1 num primeiro prompt() e 2 no segundo, temos o resultado:
12

Ou seja: 1 + 2 = 12
É...

Acho que o JavaScript não é muito com Matemática, não é mesmo?
É sim! Mas foi a gente que errou!

E por um motivo bem simples: quando o usuário digita algo para o método prompt(), este método armazena a informação digitada na forma de STRING.

Ou seja, não é 1, é "1" que está armazenado na variável num1, é um texto.
Não é 2, é "2".

Então, fizemos: "1" + "2" = "12"
Ou seja, agrupamos, concatenamos duas strings, grudamos uma na outra!

String para Inteiro: parseInt()

Para calcularmos corretamente a soma, precisamos usar uma função que já vem, por natureza, no JavaScript, a parseInt().

Para transformar "2" em 2, basta fazer: parseInt("2")
Ou seja, essa função recebe uma string e transforma num inteiro.

Vamos calcular a soma novamente, mas ao invés e usar num1 e num2, vamos usar parseInt(num1) e parseInt(num2) e ver o resultado:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    var num2 = prompt("Segundo  numero: ");
    document.write("Soma = ", parseInt(num1) + parseInt(num2) );
   </script>

 </head>
</html

O resultado da soma fica:

Agora sim! O JS somou dois inteiros e exibiu a soma corretamente.
Faça um teste: digite um número decimal (lembre-se de usar ponto ao invés de vírgula).

String para Decimal: parseFloat()

Se digitar 0.5 para o primeiro número e 1.5 para o segundo, o resultado do parseInt() será um bizarro 1. Isso mesmo:
0.5 + 1.5 = 1

Isso acontece pois usamos número decimais (flutuantes) na função parseInt(), que deve receber apenas números inteiros.

A maneira correta de transformar string para decimais (flutuantes) é usando a função parseFloat(), veja como fica o código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero decimal: ");
    var num2 = prompt("Segundo  numero decimal: ");
    document.write("Soma = ", parseFloat(num1) + parseFloat(num2) );
   </script>

 </head>
</html>

Conversão de Números para Strings

Para converter um número, seja ele inteiro ou decimal, em uma string, é bem simples: basta concatenar ele com uma String vazia.

Ou seja, 'somar' o número com "", veja:
1 + "" = "1"
2.9 + "" = "2.9"
2112 + "" = "2112"

Ou seja, o JavaScript entende que se somar um número com uma String, o resultado deve ser uma nova string, cuja concatenação é o número mais uma string vazia, ou seja, o número na forma de string.

Durante nosso curso precisaremos fazer essas conversões diversas vezes, dependendo do tipos de dados em JavaScript que queremos trabalhar.