How to check whether the value is decimal or not in VueJS?

June 14, 2022

Hi Friends 👋,

Welcome To SortoutCode! ❤️

Today I am going to show you How do you check value is decimal or not in VueJS.

This tutorial will help you to check value is decimal or not in javascript, here we will you three ways to check decimal numbers.

Table of Content

Define three string num1,num2,num3,num4 for test
Number.isInteger() Method
Math.floor() Method
Using indexOf() Method

Let’s start the today’s tutorial How do I check value is decimal or not in VueJS?

1. Define three string num1,num2,num3,num4 for test

Let’s define the num1,num2,num3,num4 in data of the FirstComponent.vue component for testing purposes.

<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            num1:786.00,
            num2:-786,
            num3:-786.03,
            num4:25.00000000000001,
        }
    },
}
</script>

Data is used to define properties in a particular component. In a single-file component, data() is a function that returns a set of properties that have been defined in the function.

we define the three properties that are num1,num2,num3,num4.

2. Number.isInteger() Method

we are using the Number.isInteger() Method for chack whether value decimal or not. Number.isInteger() is part of the ES6 standard, and if you are using an older version, you should move to the second solution.

<template>
    <div>
        <h1>Welcome to SortoutCode</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            num1:786.00,
            num2:-786,
            num3:-786.03,
            num4:25.00000000000001,
        }
    },
    mounted(){
        console.log(this.num1, 'is decimal,' ,!Number.isInteger(this.num1)); // false
        console.log(this.num2, 'is decimal,' ,!Number.isInteger(this.num2)); // false
        console.log(this.num3, 'is decimal,' ,!Number.isInteger(this.num3)); // true
        console.log(this.num4, 'is decimal,' ,!Number.isInteger(this.num4)); // true
    }
}
</script>

For now, let’s check the output of Number.isInteger() method.

Output

3. Math.floor() Method

To check decimal numbers, we will use Javascript Math.floor() Method, which will same work as Number.isInteger() method.

<template>
    <div>
        <h1>Welcome to SortoutCode</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            num1:786.00,
            num2:-786,
            num3:-786.03,
            num4:25.00000000000001,
        }
    },
    mounted(){
        console.log(this.num1,' is decimal ',this.isDecimal(this.num1)); // true
        console.log(this.num2,' is decimal ',this.isDecimal(this.num2)); // true
        console.log(this.num3,' is decimal ',this.isDecimal(this.num3)); // false
        console.log(this.num4,' is decimal ',this.isDecimal(this.num4)); // false
    },
    methods:{
        isDecimal(n) {
            var result = n - Math.floor(n) !== 0;
            if (result) return true;
            else return false;
        }

    }
}
</script>

For now, let’s check the output of Math.floor() method.

Output

$Math.floor() Method$

4. Using indexOf() Method

If you want to get isDecimal to provide true when you pass 0.00, and 12.00 then you will help indexOf() Method, it only checks ”.” in provided value, and if it is available it will return true.

Note: to use indexOf() method you have to first convert the value number to a string.

<template>
    <div>
        <h1>Welcome to SortoutCode</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            num1:786.00,
            num2:-786,
            num3:-786.03,
            num4:25.00000000000001,
        }
    },
    mounted(){
        console.log(this.num1,'datatype of',typeof(this.num1),' is decimal ',this.isDecimal(this.num1)); // false
        console.log(this.num2,'datatype of',typeof(this.num2),' is decimal ',this.isDecimal(this.num2)); // false
        console.log(this.num3,'datatype of',typeof(this.num3),' is decimal ',this.isDecimal(this.num3)); // true
        console.log(this.num4,'datatype of',typeof(this.num4),' is decimal ',this.isDecimal(this.num4)); // true
    },
    methods:{
        isDecimal(n) {
            let str = String(n);
            var result = !(str.indexOf(".") == -1);
            if (result) return true;
            else return false;
        }

    }
}
</script>

For now, let’s check the output of str.indexOf() method.

Output

All the best 👍.

How to check whether the value is decimal or not in VueJS?

1. Define three string num1,num2,num3,num4 for test

2. Number.isInteger() Method

Output

3. Math.floor() Method

Output

4. Using indexOf() Method

Output

Follow me on Twitter