Como verificar se um número é decimal em JavaScript

Neste artigo você vai aprender a como verificar se um número é decimal na linguagem JavaScript, utilizando

verificar se um número é decimal capa

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre números, inteiros, floats e também JavaScript!

Os números quebrados ou números decimais, que contém casas após a vírgula, nas linguagens de programação geralmente são denominados de float

Por este motivo estaremos tratando com esta nomenclatura ao longo do artigo

Vamos criar uma função que verificar se o valor não é um número primeiramente, e depois vamos verificar se o número é um inteiro

Veja o exemplo:

function isFloat(x) {

    if(!isNaN(x)) {
    	if(parseInt(x) != parseFloat(x)) {
				return true;
      }
    }   
    
    return false;
}

console.log(isFloat("teste")); // false
console.log(isFloat(5)); // false
console.log(isFloat("999")); // false
console.log(isFloat("12.9")); // true
console.log(isFloat(53.4)); // true

E aqui temos nossa função isFloat, primeiramente utilizando o método isNaN para checar se o dado é de fato um número

Se for, prosseguimos para o resto da função

O primeiro caso de teste, onde inserimos a palavra teste, cai justamente neste primeiro if, ele barra dados que não são números

Depois verificamos se o número convertido para inteiro e depois convertido para float é diferente

Se for, temos um float, se não, temos um inteiro

Este testes são feitos por parseInt e parseFloat, que convertem os valores para os tipos descritos (inteiro e float)

E segundo nossos testes, vemos que números inteiros retornam falso

E números considerados floats retornam true, mesmo que estejam como string

Conclusão

Neste artigo aprendemos a verificar se um número é decimal em JavaScript

Utilizamos recursos da linguagem para criar a nossa própria função

Que detecta se um dado inserido nela é um float ou não

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Bloco novo mostrando a forma inversa e mais direta usando um recurso nativo da linguagem

Tem um jeito mais curto de resolver isso, se liga

O Number.isInteger diz se um valor é inteiro, então basta negar ele pra saber se é decimal

function isFloat(x) { return typeof x === ‘number’ && !Number.isInteger(x) }

console.log(isFloat(5)) // false console.log(isFloat(53.4)) // true console.log(isFloat(‘12.9’)) // false

Repara numa diferença importante em relação à primeira função

Aqui o ‘12.9’ como string retorna false, porque o typeof já barra o que não é number de verdade

Se você QUER aceitar número em texto, fica com a versão do parseInt/parseFloat lá de cima

Se você só trabalha com number puro, o Number.isInteger é mais limpo e mais confiável

Bloco novo com a abordagem do operador módulo

Tem ainda uma terceira forma, usando o resto da divisão por 1

A ideia é simples: se sobra alguma coisa ao dividir por 1, tem casa depois da vírgula

function temDecimal(x) { return x % 1 !== 0 }

console.log(temDecimal(5)) // false console.log(temDecimal(53.4)) // true

É um truque bem usado no dia a dia por ser curtinho

Só toma cuidado com um detalhe: o % espera um number, então se o dado vier como string vale converter antes com Number(x)

H3 ‘Qual a diferença entre número inteiro e decimal (float)?’ Inteiro é o número sem casas após a vírgula, tipo 5, 10, 200

Decimal (ou float) é o número quebrado, que tem parte após a vírgula, tipo 12.9 ou 53.4

Na maioria das linguagens de programação o decimal é chamado de float, por isso o nome da nossa função

H3 ‘Como saber se um número é inteiro em JavaScript?’ É o caminho inverso do que vimos

Basta usar Number.isInteger(x), que retorna true quando o valor é inteiro e false quando tem casas decimais

H3 ‘O isFloat funciona com número em texto (string)?’ Depende da versão que você usa

A função com parseInt e parseFloat aceita string, então ‘12.9’ retorna true

Já a versão com Number.isInteger barra a string, porque checa o typeof antes

Leia também

Subscribe
Notify of
guest

0 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Blog | Mais populares