How to Set Decimal Precision in Javascript

In this tutorial, you will learn how to set decimal precision in javascript. It is very likely that there will be a large number of digits after the decimal point when we carry out a certain computation and return a decimal value. In order to make a number more readable, it is therefore quite standard practice to round it to a certain number of decimal places. For a newbie developer, it can be a bit tricky to set decimal precision.

There are numerous ways to set decimal precision. We are going to use the simplest approach which involves the usage of the toFixed() method. It converts the number to string and rounds it to a specified number of decimals.

In the following example, we have one global variable that holds a number. Upon click of a button, we will set decimal precision and display the result on the screen. Please have a look over the code example and the steps given below.

  • We have selected 2 elements (button and h1) using the document.querySelector() method and stored them in btn and result variables.
  • We have created a global variable num that holds a decimal number as a value.
  • We have added a click event listener to the button element.
  • We are executing the toFixed() method and passing 2 as a parameter. As a result, it will set the number to 2 decimal places.
  • We will display the result in the h1 element.
let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

let num = 54251.2460223;

btnGet.addEventListener('click', () => {
    result.innerText = num.toFixed(2);