How can I round a number to 1 decimal place in JavaScript?

Front End TechnologyJavascriptWeb Development

In this tutorial, we will learn to round a number to a one decimal place in JavaScript. There are various needs to round the float numbers and show particular digits after the decimal point.

In our case, we need to show only the digit after the decimal point. However, we will create a customizable manual function that can round off the number and show the particular number of digits after the decimal point at the end of this tutorial.

This example lets users understand the fundamental need to round a number to a single decimal digit. Suppose the scenario where you are developing the application for the online store, and you need to show the price of every product, but in the database, you have stored the price till five digits after the decimal point. After fetching the price of products from the database, you need to show till one decimal digit. In this case, you must find a way to solve your problem.

Furthermore, we have different methods to achieve our goal in this tutorial.

  • Using the toFixed() Method

  • Using the Math.round() function

Using the toFixed() Method

In this approach, we will round a number to 1 decimal place using the toFixed() method. It takes a single parameter; the number of digits you want to keep after the decimal point. Also, the toFixed() method “returns the string output” even if you add a number input. We need to convert the string output to float.

Syntax

Users can follow the below syntax to use the toFixed() method.

number.toFixed(decimal_digits);

Parameters

  • decimal_digits − This parameter takes the number input which represent the number of digits you want to keep after decimal point. In our case, we will take 1 as this parameter.

Example

The below example demonstrates how to use the toFixed() method to round numbers to 1 decimal place. As discussed above, the toFixed() method returns a string so that we will convert the returned string value to the float again.

<!DOCTYPE html>
<html>
   <body>
   <h2>Round a number to 1 decimal place in JavaScript</h2>
   <h4> After rounding the 103.72456 to 1 decimal place, output is </h4>
   <p id="output"> </p>
   <p id="previousType"> </p>
   <p id="AfterType"> </p>
   <script type="text/javascript">
      let output = document.getElementById("output");
      let previousType = document.getElementById("previousType");
      let AfterType = document.getElementById("AfterType");

      // rounding number to 1 decimal place using toFixed() method
      let number = 103.72456;
      let result = number.toFixed(1);
      output.innerHTML = result;
      previousType.innerHTML = " The type of output is: " + typeof result;
      result = parseFloat( result );
      AfterType.innerHTML = " The type of the output after converting to float is " + typeof result;
   </script>
</body>
</html>

In the above output, users can see that type of output after rounding the number to 1 decimal place using the toFixed() method is a string. After that, we have converted output to float using the parseFloat() function.

Using the Math.round() function

We will use the Math.round() function from the JavaScript math library in this approach. The Math.round() function round off the number to its nearest number, but we will apply some precious logic to round of number to a single digit only.

We can multiply the number by 10 and apply the round() function. After that, we can divide the rounded number by 10 again, so we can achieve our goal.

Users can understand the above approach using this example. For example, we want to round a number 10.34532 to 1 decimal digit. Let’s multiply the number by 10, and it turns to 103.4532. Now, if we apply the round function, we get result 103 only. Next, divide the number by 10, the number turns to 10.3, and we get the correct result.

Syntax

let result = Math.round(number*10)/10;

Example

In the below example, we have created a rounding function so that users can customize it according to their needs. Our function takes 2 parameters, one is the number you want to round off, and another is the number of digits you want to keep after decimal points.

<!DOCTYPE html>
<html >
   <body>
   <h2>Round a number to 1 decimal place in JavaScript</h2>
   <p> Result after rounding the 81.43426 to 1 decimal place using the Math.Round() method − </p>
   <p id="output"> </p>
   <script>
      let output = document.getElementById( "output" );

      // customizable function to round number to any decimal place
      function roundNumber(number, decimal_digit) {
         let powerOften = Math.pow( 10, decimal_digit );
         let result = Math.round( number * powerOften ) / powerOften;
         output.innerHTML = result;
      }
      let number = 81.43426;
      roundNumber(number, 1);
   </script>
</body>
</html>

In the above example, we have passed the 1 as a value of the decimal_digit parameter. So, we will get 101 = 10, and Math.round() function rounds number to 1 decimal place.

If users want to round numbers to n decimal place, they will pass n as decimal_digit value, and as a power of 10, they get 10n and Math.round() function round off a number to n decimal place.

Conclusion

In this tutorial, we used two approaches to round numbers to a single decimal place. The first approach is not so good as it returns the string, and you need to convert it into float again. The second approach is beneficial as it is customizable even though it will work round off numbers to n decimal places.

raja
Updated on 14-Jul-2022 11:51:13

Advertisements