Como converter string para float em JavaScript

Neste artigo você vai aprender a como converter string para float com a linguagem JavaScript, utilizando uma simples abordagem!

Fala programador(a), beleza? Bora aprender mais sobre strings em JavaScript!

Hoje vamos falar sobre como converter strings para floats em JavaScript.

Às vezes, você pode ter uma string com um número que precisa ser tratado como ponto flutuante (float) para ser usado em cálculos ou outras operações.

Existem algumas maneiras de fazer isso e vamos apresentar algumas delas aqui.

Usar o método parseFloat()

O método parseFloat() é uma das maneiras mais simples de converter uma string em um float em JavaScript.

Ele aceita uma string como argumento e tenta retornar um número de ponto flutuante.

Se a string não puder ser convertida em um número válido, o método retornará NaN (Not a Number).

Veja o exemplo abaixo:

const str = "3.14";
const num = parseFloat(str);
console.log(num); // 3.14
console.log(typeof num); // "number"

Usar o método Number()

Outra opção é usar o método Number() para converter uma string em um float.

Ele também aceita uma string como argumento e tenta retornar um número.

Se a string não puder ser convertida em um número válido, o método retornará NaN.

Veja o exemplo abaixo:

const str = "3.14";
const num = Number(str);
console.log(num); // 3.14
console.log(typeof num); // "number"

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Usar o operador +

O operador + também pode ser usado para converter uma string em um float em JavaScript.

Quando usado com uma string, o operador tenta converter a string em um número.

Se a string não puder ser convertida em um número válido, o resultado será NaN.

Veja o exemplo abaixo:

const str = "3.14";
const num = +str;
console.log(num); // 3.14
console.log(typeof num); // "number"

Usar a função Number.parseFloat() (ES6)

A partir do ECMAScript 6 (ES6), é possível usar a função Number.parseFloat() para converter uma string em um float em JavaScript.

Ela funciona da mesma maneira que o método parseFloat(), mas é um pouco mais legível.

Veja o exemplo abaixo:

const str = "3.14";
const num = Number.parseFloat(str);
console.log(num); // 3.14
console.log(typeof num); // "number"

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Existem diversas maneiras de converter strings para floats em JavaScript.

Você pode usar métodos como parseFloat(), Number() e Number.parseFloat(), ou operadores como o +, dependendo do que mais se adequa ao seu código.

Lembre-se de sempre testar o seu código para garantir que está obtendo o resultado esperado.

É importante também levar em consideração o fato de que essas funções e operadores podem retornar NaN se a string não puder ser convertida em um número válido.

Portanto, é sempre uma boa ideia tratar esses casos de maneira adequada no seu código.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

parseFloat() ou Number(): qual escolher?

O artigo mostrou as duas, mas falta o principal: elas NÃO se comportam igual quando a string vem suja

O parseFloat() lê a string da esquerda pra direita e para no primeiro caractere que não faz parte do número, devolvendo o que já conseguiu ler até ali

Já o Number() é radical: ou a string inteira é um número válido, ou ele te devolve NaN

Se liga na diferença:

console.log(parseFloat("10.5kg")); // 10.5
console.log(Number("10.5kg")); // NaN

console.log(parseFloat("")); // NaN
console.log(Number("")); // 0

Repara no caso da string vazia, esse é o pega mais comum de todos: o Number() transforma vazio em 0 e o seu cálculo segue rodando como se nada tivesse acontecido 😬

Regra prática pra decidir na hora:

quer aproveitar o número mesmo com sujeira na string (tipo "10.5kg" vindo de um input)? parseFloat()

quer que qualquer coisa fora do padrão vire NaN e estoure na sua validação? Number()

Como converter string com vírgula (3,14) para float?

Aqui no Brasil o número quase sempre chega com vírgula no decimal, e o JavaScript não entende isso

Ele só reconhece o PONTO como separador decimal

Olha o estrago:

console.log(parseFloat("3,14")); // 3
console.log(Number("3,14")); // NaN

O parseFloat() lê o 3, esbarra na vírgula e para por ali, o que é até pior que dar erro: seu cálculo continua rodando com o valor errado e ninguém percebe

A solução é trocar a vírgula por ponto ANTES de converter:

const str = "3,14";
const num = parseFloat(str.replace(",", "."));

console.log(num); // 3.14

E se o valor vier formatado com separador de milhar, tipo "1.234,56", tem que tirar os pontos primeiro e só depois trocar a vírgula:

const valor = "1.234,56";
const num = parseFloat(valor.replace(/\./g, "").replace(",", "."));

console.log(num); // 1234.56

Tome cuidado com a ORDEM! Se você trocar a vírgula por ponto primeiro, a string fica com dois pontos e o parseFloat() para no meio do caminho de novo

Como saber se a conversão deu certo (tratando o NaN)

A conclusão do artigo avisa pra tratar o NaN, mas e COMO testa isso na prática?

Comparar com === não funciona, porque o NaN é o único valor do JavaScript que não é igual a ele mesmo

const num = parseFloat("abc");

console.log(num === NaN); // false

Pra checar de verdade, use o Number.isNaN():

const num = parseFloat("abc");

if (Number.isNaN(num)) {
console.log("Valor inválido!");
} else {
console.log(num * 2);
}

E qual a diferença pro isNaN() global? O global converte o argumento antes de testar, então ele grita true até pra string "abc" que você nem converteu ainda

Já o Number.isNaN() só devolve true se o valor JÁ for do tipo number e for NaN, que é exatamente o que você quer depois de um parseFloat() 🙂

Como arredondar o float depois de converter?

Esse é o passo que quase sempre vem logo em seguida: você converteu, fez a conta e agora quer só duas casas decimais

O toFixed() resolve, mas tem uma pegadinha: ele devolve uma STRING, não um número

const num = parseFloat("3.14159");
const arredondado = num.toFixed(2);

console.log(arredondado); // "3.14"
console.log(typeof arredondado); // "string"

Ou seja, se você seguir calculando com esse valor, tá de volta no problema do começo do artigo 😅

Se precisar do número de novo, é só converter mais uma vez:

const num = parseFloat("3.14159");
const arredondado = parseFloat(num.toFixed(2));

console.log(arredondado); // 3.14
console.log(typeof arredondado); // "number"

Dica: use o toFixed() só na hora de MOSTRAR o valor na tela, e guarde o número cheio pra fazer os cálculos

parseFloat() ou parseInt(): qual a diferença?

Vale a parada rápida aqui, porque muita gente troca um pelo outro sem querer

O parseInt() ignora tudo depois do separador decimal, e presta atenção: ele não arredonda, ele CORTA

console.log(parseFloat("9.99")); // 9.99
console.log(parseInt("9.99")); // 9

Se o que você quer é o valor com as casas decimais (preço, nota, medida), é parseFloat()

O parseInt() só entra quando você quer mesmo o número inteiro, tipo pegar um id ou uma quantidade

Perguntas frequentes

Qual a diferença entre parseFloat() e Number()?

O parseFloat() aproveita o número que estiver no começo da string e ignora o resto, então "10.5kg" vira 10.5

O Number() exige a string inteira válida, então "10.5kg" vira NaN e string vazia vira 0

Como converter uma string com vírgula para float?

Troque a vírgula por ponto antes de converter: parseFloat("3,14".replace(",", ".")) devolve 3.14

Sem isso o parseFloat() para na vírgula e te entrega só o 3

Como converter o valor de um input de formulário para float?

O value de um input é SEMPRE string, mesmo com type="number"

const preco = parseFloat(document.querySelector("#preco").value);

Depois é só checar com Number.isNaN() antes de usar o valor na conta

E como faço o caminho contrário, de float para string?

Dá pra usar o toString() ou o String(), assim:

const num = 3.14;

console.log(num.toString()); // "3.14"
console.log(String(num)); // "3.14"