Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I round a number to 1 decimal place in JavaScript?
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 one digit after the decimal point. However, we will create a customizable 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 you are developing an application for an online store, and you need to show the price of every product, but in the database, you have stored the price with five digits after the decimal point. After fetching the price of products from the database, you need to show only 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
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. The toFixed() method returns a string output, so we need to convert the result back to a number if needed.
Syntax
number.toFixed(decimal_digits);
Parameters
- decimal_digits ? This parameter takes a number representing the digits you want to keep after the decimal point. In our case, we will use 1.
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 we will convert it back to a number using parseFloat().
<!DOCTYPE html>
<html>
<body>
<h2>Round a number to 1 decimal place in JavaScript</h2>
<h4>After rounding 103.72456 to 1 decimal place:</h4>
<p id="output"></p>
<p id="previousType"></p>
<p id="afterType"></p>
<script>
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: " + result;
previousType.innerHTML = "Type of output: " + typeof result;
result = parseFloat(result);
afterType.innerHTML = "Type after converting to float: " + typeof result;
</script>
</body>
</html>
Result: 103.7 Type of output: string Type after converting to float: number
In the above output, users can see that the type of output after rounding the number to 1 decimal place using the toFixed() method is a string. After that, we converted the output to a number 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 rounds a number to its nearest integer, but we will apply some logic to round a number to a single decimal place only.
We can multiply the number by 10 and apply the round() function. After that, we can divide the rounded number by 10 again to achieve our goal.
Users can understand the above approach using this example. For instance, we want to round the number 10.34532 to 1 decimal place. Let's multiply the number by 10, and it becomes 103.4532. Now, if we apply the round function, we get 103. Next, divide the number by 10, the number becomes 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 customizable rounding function. Our function takes 2 parameters: the number you want to round off, and the number of digits you want to keep after the decimal point.
<!DOCTYPE html>
<html>
<body>
<h2>Round a number to 1 decimal place in JavaScript</h2>
<p>Result after rounding 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;
return result;
}
let number = 81.43426;
let result = roundNumber(number, 1);
output.innerHTML = "Result: " + result;
</script>
</body>
</html>
Result: 81.4
In the above example, we passed 1 as the value of the decimal_digit parameter. So, we get 10^1 = 10, and the Math.round() function rounds the number to 1 decimal place.
If users want to round numbers to n decimal places, they can pass n as the decimal_digit value, and as a power of 10, they get 10^n, allowing the Math.round() function to round off a number to n decimal places.
Comparison
| Method | Return Type | Customizable | Recommended |
|---|---|---|---|
toFixed() |
String | No | For display purposes |
Math.round() |
Number | Yes | For calculations |
Conclusion
In this tutorial, we used two approaches to round numbers to a single decimal place. Use toFixed() for display purposes when you need string output, and use Math.round() with multiplication/division for mathematical calculations where you need numeric results.
34K+ Views
