Como converter números no JavaScript

As conversões entre string e number são bastante comuns no JavaScript. A linguagem oferece diversos mecanismos para realizar essas conversões de forma natural. Por exemplo:

let a = 5 * '100';  // resulta em 500
let b = '10' / 1;   // resulta em 10
let c = 2 - '1';    // resulta em 1
let d = '2' ** '4'; // resulta em 16

Atenção! Tenha cuidado ao usar o operador de soma + com valores de tipos mistos (string e number), pois ele sempre realizará a concatenação dos valores. Veja o exemplo:

// Resulta em '5100' ao invés de 500
let a = 5 + '100'

// Imprime 'string'
console.log( typeof(a) )

// Agora sim, resulta em 500
let b = 5 + Number('100')

// Imprime 'number'
console.log( typeof(b) )

Portanto, é fundamental realizar a conversão explícita de uma string para number antes de qualquer operação matemática.

Conversão de string para number

Existem várias formas de converter uma string em number. Abaixo estão as mais comuns:

Detalhes sobre parseInt

O método parseInt() é amplamente utilizado para converter uma string em um número inteiro. Ele ignora qualquer caractere não numérico após o número inicial e aceita um segundo parâmetro opcional chamado radix, que define a base numérica (como decimal, binário, hexadecimal, etc.).

Exemplos de uso:

let numeroDecimal = parseInt('42') // Converte para 42
let numeroHexadecimal = parseInt('2A', 16) // Converte para 42 (base hexadecimal)
let numeroComTexto = parseInt('123abc') // Converte para 123, ignorando 'abc'

console.log(numeroDecimal, numeroHexadecimal, numeroComTexto)

Atenção: Se a string começar com um caractere não numérico, o resultado será NaN.

let invalido = parseInt('abc123') // Retorna NaN
console.log(invalido)

Conversão de number para string

De forma semelhante, há várias maneiras de converter um number em string. Confira as mais utilizadas:

A escolha do método ideal dependerá do contexto do algoritmo e das necessidades específicas do seu código.

Conversão de moedas com toLocaleString

O método toLocaleString() é uma ferramenta poderosa para formatar números de acordo com a localização e o estilo desejado. Ele é especialmente útil para exibir valores monetários.

Exemplo básico:

let valor = 1234567.89
let valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })

console.log(`O valor formatado é ${valorFormatado}`)
// Saída: "O valor formatado é R$ 1.234.567,89"

Personalização de formatação:

Além de moedas, você pode usar toLocaleString() para formatar números com separadores de milhares ou definir o número de casas decimais.

let numero = 1234567.89

// Formatação com separadores de milhares
let formatadoMilhares = numero.toLocaleString('en-US')
console.log(formatadoMilhares) // Saída: "1,234,567.89"

// Formatação com casas decimais fixas
let formatadoDecimais = numero.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
console.log(formatadoDecimais) // Saída: "1.234.567,89"

O uso de toLocaleString() é altamente recomendado para garantir que os números sejam exibidos de forma consistente e adequada ao público-alvo.

Uso do método toFixed

O método toFixed() é utilizado para formatar um número, limitando o número de casas decimais e retornando o resultado como uma string. Ele é útil em situações onde é necessário exibir valores com precisão decimal, como em cálculos financeiros.

Exemplo básico:

let numero = 123.456789
let formatado = numero.toFixed(2)

console.log(formatado) // Saída: "123.46"

Arredondamento automático:

O método toFixed() realiza o arredondamento automático com base no valor da próxima casa decimal.

let numero = 1.005
let formatado = numero.toFixed(2)

console.log(formatado) // Saída: "1.01"

Conversão de volta para número:

Como o retorno de toFixed() é uma string, você pode convertê-lo de volta para number caso necessário.

let numero = 123.456
let formatado = parseFloat(numero.toFixed(2))

console.log(formatado) // Saída: 123.46

Exemplos de situações reais

Validação de entrada do usuário

Ao receber dados de um formulário, geralmente os valores vêm como string. É necessário convertê-los para number antes de realizar cálculos.

let input = '42' // valor recebido como string
let number = Number(input)

if (!isNaN(number)) {
  console.log(`O dobro do número é ${number * 2}`)
} 
else {
  console.log('Por favor, insira um número válido.')
}

Cálculo de preços em um carrinho de compras

Ao somar valores de produtos, é importante garantir que os valores sejam tratados como números.

let precoProduto1 = '19.99'
let precoProduto2 = '35.50'

let total = parseFloat(precoProduto1) + parseFloat(precoProduto2)
console.log(`O total da compra é R$ ${total.toFixed(2)}`)

Formatação de números para exibição

Ao exibir valores monetários ou grandes números, é comum formatá-los como string.

let valor = 1234567.89
let valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })

console.log(`O valor formatado é ${valorFormatado}`)

Conversão para cálculos em APIs

Ao trabalhar com APIs, os dados podem ser enviados ou recebidos como string. É necessário convertê-los para realizar operações.

let dadosRecebidos = { quantidade: '3', precoUnitario: '49.90' }

let quantidade = parseInt(dadosRecebidos.quantidade)
let precoUnitario = parseFloat(dadosRecebidos.precoUnitario)

let total = quantidade * precoUnitario
console.log(`O valor total é R$ ${total.toFixed(2)}`)