Início /Programação /JavaScript /Como converter uma String para um número em JavaScript

Como converter uma String para um número em JavaScript

Por: Angelo Luis Ferreira | 10/09/2018 Acessos: 12.103

Tudo sobre JavaScript - Ricardo Metring

Neste tutorial vamos mostrar como converter uma "string" em um número inteiro ou em um número decimal utilizando-se JavaScript. Para isto vamos utilizar as funções globais parseInt() e parseFloat().

String é uma sequência de caracteres, geralmente utilizada para representar palavras, frases ou textos em programação de computadores.

Exemplo 1 - Converter uma string em um número inteiro

Imagine que queremos criar um sistema de soma de números como no exemplo abaixo:

<script>
    function somar() {
        var campo1 = document.getElementById('campo1').value;
        var campo2 = document.getElementById('campo2').value;
      
    	var soma = campo1 + campo2;
        alert("campo 1 = "+campo1+" | campo 2 = "+campo2+" | soma = "+ soma);

    }
</script>

<body>
<input id="campo1" type="text" name="campo1">
<input id="campo2" type="text" name="campo2">
<button onclick="somar()">Somar</button>
</body>

Agora como exemplo, acesse o nosso Squids Editor e faça a soma de 1 + 2. Observe que a soma resultou 12 e não 3 como se esperava.

Isto ocorre porque inserimos os números 1 e 2 em campos de texto (type="text") fazendo com que o valor retornado para cada campo também seja um texto ("string"). Desta forma, ao utilizarmos o símbolo "+" vamos concatenar os dois textos retornados, formando a string 12.

Função parseInt()

Para resolvermos o nosso código, vamos utilizar a função global parseInt(). Esta função do JavaScript analisa o argumento "string" e retorna um valor numérico inteiro na base especificada.

Síntaxe:

parseInt(string, base);

 Observações:

  • Quando a base não é especificada atribui-se por padrão o sistema numérico decimal, ou seja, base 10.
  • Apenas o primeiro número da string é retornado! Ex.: 40a retorna o número 40.
  • Espaços à esquerda e à esquerda são permitidos.
  • Se o primeiro caractere não puder ser convertido em um número, parseInt () retornará NaN (Not-A-Number). Ex.: a40 retorna NaN.

Veja abaixo como fica o nosso código corrigido:

<script>
    function somar() {
        var campo1 = parseInt(document.getElementById('campo1').value);
        var campo2 = parseInt(document.getElementById('campo2').value);     

    	var soma = campo1 + campo2;
        alert("campo 1 = "+campo1+" | campo 2 = "+campo2+" | soma = "+ soma);
  
    }
</script>

<body>
<input id="campo1" type="text" name="campo1">
<input id="campo2" type="text" name="campo2">
<button onclick="somar()">Somar</button>
</body>

Acesse o nosso Squids Editor e faça a soma de 1 + 2. Observe que agora a soma resultou 3, corrigindo nosso código. 

Exemplo 2 - Converter uma string em um número decimal

Imagine agora que utilizando o código anterior, queremos somar números com casas decimais.

 Acesse o nosso Squids Editor e faça a soma de 3.2 + 2.65. Observe que o valor retornado é 5 e não 5.85. Isto ocorre porque a função parseInt() retorna um número inteiro.

Função parseFloat()

Para resolvermos o nosso código e retornarmos valores decimais, vamos utilizar a função global parsefloat(). Esta função do JavaScript analisa o argumento "string" e retorna um número de ponto flutuante, ou seja, retorna valores decimais.

Síntaxe:

parseFloat(string)

Observações:

  • Apenas o primeiro número da string é retornado! Ex.: 40a retorna apenas o número 40.
  • Espaços à esquerda e à esquerda são permitidos.
  • Se o primeiro caractere não puder ser convertido em um número, parseFloat () retornará NaN (Not-A-Number). Ex.: a40 retorna NaN.

Veja abaixo como fica o nosso código alterado com a função parsefloat() :

<script>
    function somar() {
        var campo1 = parseFloat(document.getElementById('campo1').value);
        var campo2 = parseFloat(document.getElementById('campo2').value);     

    	var soma = campo1 + campo2;
        alert("campo 1 = "+campo1+" | campo 2 = "+campo2+" | soma = "+ soma);
  
    }
</script>

<body>
<input id="campo1" type="text" name="campo1">
<input id="campo2" type="text" name="campo2">
<button onclick="somar()">Somar</button>
</body>

 Acesse o nosso Squids Editor e faça a soma de 3.2 + 2.65. Observe que agora o valor retornado é 5.85. 

Exemplo 3 - Validar valores numéricos

Ao utilizarmos as funções parseInt() ou parseFloat() é necessário que a "string" analisada possa ser convertida em um número. Caso isto não aconteça, NaN (Not-A-Number) é retornada. 

Veja no nosso exemplo abaixo, onde somamos 3.2 + FFG, por exemplo:

Isto ocorre porque a string "FFG" não pode ser convertida em um número.

Função isNaN()

A função isNaN() determina se o valor é NaN ou não.

Sintaxe:

isNaN(testValue)

Obs.: Esta função retorna true se o valor for igual a NaN. Caso contrário, retorna falso.

Veja abaixo o nosso código onde utilizamos um sistema para verificar e validar se os campos foram digitados com "strings" que podem ser convertidas em números.

Atenção: O método de validação abaixo verifica apenas se o primeiro número da string é um número. Por exemplo, a string 40a retorna o número 40 e string a40 retorna NaN. Portanto, para utilizar um sistema de validação completo você precisará utilizar outros recursos.

<script>
    function somar() {
        var campo1 = parseInt(document.getElementById('campo1').value);
        var campo2 = parseInt(document.getElementById('campo2').value);
        
        if (!isNaN(campo1) && !isNaN(campo2)) {
    	var soma = campo1 + campo2;
        alert("campo 1 = "+campo1+" | campo 2 = "+campo2+" | soma = "+ soma);
        }
        
        else {alert("Digite um número válido!!!");}
    }
</script>

<body>
<input id="campo1" type="text" name="campo1">
<input id="campo2" type="text" name="campo2">
<button onclick="somar()">Somar</button>
</body>

 Acesse agora o Squids Editor e faça a soma de 3.2 + FFG. Observe que o código verificou os valores digitados e sugeriu que se digite um número válido, pois a string "FFG" não pode ser convertida em um valor numérico.

 

Exemplo 4 - Converter uma string em um número decimal (usando operador numérico +)

Usando o operador (+) antes da variável

Uma outra forma para resolvermos o nosso código e retornarmos valores decimais, é utilizarmos o operador aritmético (+) antes variável. Isto faz com o valor da variável, quando string, seja sempre convertido para um valor numérico tipo float.

Obs.: Como nas formas anteriores, se o valor da variável não for constituído de caracteres numéricos, a expressão (+) antes da variável irá retornar NaN (Not-A-Number).

<script>
    function somar() {
        var campo1 = document.getElementById('campo1').value;
        var campo2 = document.getElementById('campo2').value;     

    	var soma = +campo1 + +campo2;
        alert("campo 1 = "+campo1+" | campo 2 = "+campo2+" | soma = "+ soma);
  
    }
</script>

</head>

<body>
<input id="campo1" type="text" name="campo1">
<input id="campo2" type="text" name="campo2">
<button onclick="somar()">Somar</button>
</body>

Acesse o nosso Squids Editor e faça a soma de 3.2 + 2.65. Observe que agora o valor retornado é 5.85. 

REFERÊNCIA JAVASCRIPT

1. [Funcão parseInt()] >> Sintaxe e exemplos

2. [Função parseFloat()] >> Sintaxe e exemplos

3. [Função isNaN()] >> Sintaxe e exemplos

4. [Operadores Numéricos] >> Referência

4. [document.getElementById()] >> Sintaxe e exemplos

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO