How can I remove the decimal part of JavaScript number?

Front End Technology Javascript Web Development

In this tutorial, we will learn to remove the decimal part of the number in JavaScript. While working with JavaScript, many times, developers need to play with the numbers stored in the database and needs to convert float and double numbers into the pure decimal or integer number.

In this situation, developers can have multiple methods to truncate the decimal part of the number. We will see different approaches to overcome the above problem.

Using the Math.trunc() method
Using the Bitwise operators
Using the Math.ceil() and Math.floor() method

Using the Math.Trunc() method

The Math.trunc() is the most popular method to remove the decimal part of JavaScript. It takes positive, negative, or float numbers as an input and returns the integer part after removing the decimal part. For example, when we give an input of 5.45, it returns 5 only, and for the input of -5.45, it returns -5 only.

Syntax

Users can follow the below syntax for the Math.trunc() method.

let decimal = Math.trunc( number )

Parameters

Number − This parameter represents the number input from which we need to remove the decimal part.

Example 1

The below example demonstrates the use of the Math.trunc() method in the JavaScript.

<!DOCTYPE html>
<html>
<body>
   <h2>Removing the decimal part from the number.</h2>
   <p> Result fter removing the decimal part from 4.96 using Math.trunc() method.</p>
   <p id = "result"></p>
   <script type="text/javascript" >
      let number = 4.96;
      let decimal = Math.trunc( number );
      document.getElementById("result").innerHTML = decimal;
   </script>
</body>
</html>

In the above output users can see that, we have removed the decimal part of the 4.96 and it becomes 4.

Using the Bitwise operators

In this approach, we will use the different Bitwise operators to cut out the decimal part of the number. To overcome our problem, we can use four different Bitwise operators such as Bitwise OR, Double Not, Right Shift, and Left Shift operators. We will perform the Bitwise OR operation of the input number with 0. Also, in the same way, we can perform the right and left shifts by 0 with the input number, which removes the decimal part from it.

The built-in Math library function takes more calculation time than the Bitwise operation. So, this is the fastest approach to truncate the number.

Syntax

let result = ~~number // Double Not operator
let result = number | 0 // Bitwise OR operation of number with 0.
let result = number >> 0 // Right shift of number by 0.
let result = number << 0 // Left shift of number by 0.

Example 2

Users can learn to perform the Bitwise operation with the number to remove the decimal part with the below example. We have used all different Bitwise operators in the below example and prints the output.

<!DOCTYPE html>
<html>
<body>
   <h2> Removing the decimal part from the number.
   <h4> After removing the decimal part from <i> -5.69 </i> using Double Not operator.</h4>
   <p id = "DoubleNot"> </p>
   <h4> After removing the decimal part from <i> 2.34 </i> using BitWise ORoperator.</h4>
   <p id = "BitwiseOR"> </p>
   <h4> After removing the decimal part from <i> 100.87 </i> using RightShift operator. </h4>
   <p id = "RightShift"> </p>
   <h4> After removing the decimal part from <i> -0.7 </i> using left Shiftoperator. </h4>
   <p id = "LeftShift"> </p>
   <script type="text/javascript" >
      // remove decimal part using the double not operator.
      let DoubleNot = document.getElementById("DoubleNot");
      let number = -5.69;
      DoubleNot.innerHTML = ~~number;

      // remove decimal part using the Bitwise OR operator.
      let BitwiseOR = document.getElementById("BitwiseOR");
      number = 2.34;
      BitwiseOR.innerHTML = number | 0;

      // remove decimal part using the Right shift operator.
      let = document.getElementById("RightShift");
      number = 100.87;
      RightShift.innerHTML = number >> 0;
   
      // remove decimal part using the left shift operator.
      let LeftShift = document.getElementById("LeftShift");
      number = -0.7;
      LeftShift.innerHTML = number << 0;
   </script>
</body>
</html>

In the above output, users can observe that how we can truncate the decimal part of the number using the Bitwise operator and it return the number of left of the decimal point.

Using the Math.ceil() and Math.floor() Methods

We will use the Math.ceil() and Math.floor() methods in this approach. The Math.ceil() method returns the next greater integer element of the float number element. For example, for 5.1, it returns the 5.

The Math.floor() method returns the previous small integer of the float number input. For example, for input 5.9, it returns the 5.

Syntax

Math.ceil ( number )
Math.floor ( number )

Example 2

In the below example, we have used the Math.ceil() method and Math.floor() method. Also, we are printing the output of both methods.

<!DOCTYPE html>
<html>
<body>
   <h2>Removing the decimal part from the number</h2>
   <h4> After removing the decimal part from <i> 0.01 </i> using the Math.ceil() method. </h4>
   <p id = "CeilMethod"> </p>
   <h4> After removing the decimal part from <i> 6.99 </i> using the Math.floor() method. </h4>
   <p id = "FloorMethod"> </p>
   <script type="text/javascript">
      // remove decimal part using the Math.ceil() method.
      let CeilMethod = document.getElementById("CeilMethod");
      let number = 0.01;
      CeilMethod.innerHTML = Math.ceil(number);

      // remove decimal part using the Math.floor() method.
      let FloorMethod = document.getElementById("FloorMethod");
      number = 6.99;
      FloorMethod.innerHTML = Math.floor(number);
   </script>
</body>
</html>

In the above output, users can see that Math.ceil() function has returned the next greater element of 0.01, which is 1, and Math.floor() function has returned the previous small integer of 6.99, which is 6.

Conclusion

We have used three approaches to remove the decimal part of the number in this tutorial. The most popular way is the first approach, and the most efficient is the second approach. The Bitwise operations take significantly less time than JavaScript's Math library function to remove the decimal part from the number.