Como Converter Strings em Números no JavaScript: Number(), parseInt(), parseFloat() e Melhores Práticas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

JavaScript é uma das linguagens de programação mais amplamente usadas no desenvolvimento web. Entre suas muitas funcionalidades, converter strings em números é uma operação fundamental que é frequentemente necessária em aplicações reais.

Por exemplo, valores inseridos por usuários em formulários ou dados recuperados de APIs são frequentemente tratados como strings. Esses valores não podem ser usados diretamente em cálculos ou comparações a menos que sejam convertidos para tipos numéricos.

Neste artigo, explicaremos métodos concretos para converter strings em números em JavaScript. Abordaremos como cada função e técnica funciona, suas diferenças e pontos importantes a serem lembrados. Use este guia como referência prática.

2. Visão geral dos tipos de dados em JavaScript

JavaScript é conhecida como uma linguagem tipada dinamicamente, o que significa que o tipo de uma variável é determinado automaticamente durante a execução do programa. Embora isso ofereça flexibilidade, também pode levar a erros ou comportamentos inesperados se a conversão de tipos não for tratada com cuidado.

Principais tipos de dados

Os tipos de dados em JavaScript podem ser amplamente divididos nas duas categorias a seguir.

1. Tipos primitivos

• Number: Representa números inteiros e de ponto flutuante.
• String: Representa dados de texto.
• Boolean: Possui apenas true ou false.
• Undefined: Indica que um valor não foi atribuído.
• Null: Representa explicitamente a ausência de um valor.
• Symbol: Usado como identificador único.

1. Tipos de objeto

• Inclui arrays (Array), funções (Function), datas (Date) e mais.

Tipos dinâmicos e armadilhas da conversão de tipos

Em JavaScript, os tipos de variáveis podem ser convertidos de forma implícita ou explícita. Atenção especial é necessária ao lidar com strings e números.

Exemplo:

console.log("10" + 5); // Output: "105" (string concatenation)
console.log("10" - 5); // Output: 5 (numeric calculation)

Como mostrado acima, o mesmo operador pode se comportar de maneira diferente dependendo do contexto. A conversão explícita de tipos é essencial para evitar resultados indesejados.

3. Métodos para converter strings em números

JavaScript oferece várias maneiras de converter strings em números. Esta seção explica detalhadamente quatro métodos comumente usados.

A função Number()

A função Number() é a forma mais básica de converter uma string em um número.

Exemplos:

console.log(Number("42"));    // Output: 42
console.log(Number("3.14"));  // Output: 3.14
console.log(Number(""));      // Output: 0 (empty string becomes 0)
console.log(Number("abc"));   // Output: NaN (returns NaN if conversion fails)

Características:

• Converte tanto inteiros quanto números de ponto flutuante.
• Uma string vazia é convertida para 0.
• Retorna NaN (Not-a-Number) se a conversão falhar.

Nota importante:
NaN é um valor numérico especial que não pode ser usado em cálculos. Utilizá‑lo inadvertidamente pode levar a comportamentos inesperados.

A função parseInt()

A função parseInt() converte uma string em um inteiro. Ela analisa a string a partir do início e interrompe a leitura ao encontrar o primeiro caractere não numérico.

Exemplos:

console.log(parseInt("42"));         // Output: 42
console.log(parseInt("42.99"));      // Output: 42 (decimal part is ignored)
console.log(parseInt("10abc"));      // Output: 10
console.log(parseInt("abc10"));      // Output: NaN

Especificando a base (radix):

console.log(parseInt("10", 2)); // Output: 2 (binary)
console.log(parseInt("A", 16)); // Output: 10 (hexadecimal)

Características:

• Útil quando apenas a parte inteira é necessária.
• Suporta conversão a partir de diferentes sistemas numéricos.

Atenção:
Se a base for omitida, o resultado pode depender do formato da string, potencialmente causando resultados inesperados.

A função parseFloat()

A função parseFloat() converte uma string em um número de ponto flutuante.

Exemplos:

console.log(parseFloat("3.14"));     // Output: 3.14
console.log(parseFloat("3.14abc"));  // Output: 3.14
console.log(parseFloat("abc3.14"));  // Output: NaN

Características:

• Ideal para lidar com valores decimais.
• Funciona corretamente também para valores inteiros.

Atenção:

• Assim como parseInt(), ele ignora caracteres após a parte numérica.

O Operador Unary Plus (+)

O operador unary plus (+) oferece uma forma curta e simples de realizar conversão de tipo.

Exemplos:

console.log(+"42");      // Output: 42
console.log(+"3.14");    // Output: 3.14
console.log(+"abc");     // Output: NaN

Características:

• Produz código conciso.
• Se comporta da mesma forma que Number().

Atenção:
Embora conciso, essa abordagem pode reduzir a legibilidade. Para códigos voltados a iniciantes ou em equipes, Number() costuma ser mais claro.

Resumo

A próxima seção explica as diferenças entre esses métodos e como escolher o mais adequado.

4. Diferenças Entre Métodos de Conversão e Como Escolher

O JavaScript oferece várias maneiras de converter strings em números, cada uma com comportamento distinto. Compreender essas diferenças é essencial para selecionar o método correto.

Number() vs parseInt()

Number() avalia a string inteira como um valor numérico, enquanto parseInt() extrai apenas a parte inteira.

Exemplo:

console.log(Number("42.5"));     // Output: 42.5
console.log(parseInt("42.5"));  // Output: 42

Diretrizes de Uso:

• Use Number() quando valores numéricos precisos são necessários.
• Use parseInt() quando decimais devem ser ignorados.

parseInt() vs parseFloat()

parseInt() está limitado a inteiros, enquanto parseFloat() lida com valores decimais.

Exemplo:

console.log(parseInt("42.75"));     // Output: 42
console.log(parseFloat("42.75"));  // Output: 42.75

Diretrizes de Uso:

• Use parseInt() para números inteiros, como idades ou IDs.
• Use parseFloat() para preços ou medições.

Number() vs Unary Plus (+)

Tanto Number() quanto o operador unary plus se comportam de forma semelhante, mas a legibilidade difere.

Exemplo:

console.log(Number("42"));  // Output: 42
console.log(+"42");         // Output: 42

Diretrizes de Uso:

• Number() expressa claramente a intenção e é recomendado para projetos em equipe.
• O operador unary plus é útil quando a concisão é preferida.

Tratamento de Casos Especiais

Strings Vazias e Valores Inválidos

Exemplo:

console.log(Number(""));           // Output: 0
console.log(parseInt(""));         // Output: NaN
console.log(+"");                  // Output: 0
console.log(Number("abc"));        // Output: NaN
console.log(parseFloat("abc123")); // Output: NaN

Pontos Principais:

• Use Number() ou unary + quando strings vazias devem se tornar 0.
• Tenha cautela com parseInt() e parseFloat(), pois pode ocorrer análise parcial.

Resumo

5. Tratamento de Erros Durante a Conversão

O tratamento adequado de erros é essencial ao converter strings em números, especialmente ao lidar com entrada de usuário ou dados externos.

Tratamento de NaN (Not-a-Number)

Quando a conversão falha, o JavaScript retorna NaN, que tecnicamente é um tipo numérico, mas não pode ser usado em cálculos.

Exemplo:

console.log(Number("abc"));      // Output: NaN
console.log(parseInt("xyz"));    // Output: NaN
console.log(+"test");            // Output: NaN

Pontos Principais:

• Qualquer cálculo envolvendo NaN resulta em NaN.
• NaN === NaN retorna false.

Usando isNaN()

A função isNaN() verifica se um valor é NaN.

Exemplo:

console.log(isNaN("abc")); // true
console.log(isNaN(42));    // false
console.log(isNaN(NaN));   // true

Atenção:
isNaN() realiza conversão de tipo implícita.

Usando Number.isNaN()

Number.isNaN() realiza uma verificação estrita sem conversão de tipo.

Exemplo:

console.log(Number.isNaN("abc"));      // false
console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN(undefined));  // false

Recomendação:

• Use Number.isNaN() para verificação de erros confiável.

Exemplo: Tratando Entrada Inválida

function safeConvert(input) {
  let value = Number(input);
  return Number.isNaN(value) ? 0 : value;
}

6. Exemplos Práticos

Esta seção apresenta casos de uso do mundo real, incluindo entrada de usuário, arrays, formulários e dados JSON.

1. Convertendo Entrada do Usuário

function processUserInput(input) {
  let value = Number(input);

  if (Number.isNaN(value)) {
    console.log("Error: Please enter a number.");
    return null;
  }

  console.log("Entered value: " + value);
  return value;
}

2. Convertendo Valores de String em Arrays

let data = ["10", "20", "30", "40"];
let numbers = data.map(Number);
console.log(numbers);

3. Processando Dados de Formulário

function calculateTotalPrice(priceInput, quantityInput) {
  let price = parseFloat(priceInput);
  let quantity = parseInt(quantityInput);

  if (Number.isNaN(price) || Number.isNaN(quantity)) {
    console.log("Error: Please enter valid numbers.");
    return null;
  }

  let total = price * quantity;
  console.log("Total price: " + total);
  return total;
}

4. Convertendo Dados JSON

let jsonData = '[{"id": "1", "price": "120.5"}, {"id": "2", "price": "200"}]';
let products = JSON.parse(jsonData);

let total = products.reduce((sum, product) => {
  let price = Number(product.price);
  return sum + (Number.isNaN(price) ? 0 : price);
}, 0);

console.log("Total price: " + total);

7. Conclusão

Neste artigo, abordamos a conversão de string para número em JavaScript, desde os fundamentos até casos de uso avançados.

Os principais aprendizados incluem entender os tipos de dados, escolher o método de conversão adequado e implementar o tratamento de erros correto.

A conversão de string para número é uma habilidade básica, porém essencial, para o desenvolvimento JavaScript no mundo real. Pratique os exemplos fornecidos aqui e aplique-os em seus próprios projetos para melhorar a confiabilidade e a precisão.