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 to format a number with two decimals in JavaScript?
This tutorial will teach us how to format a number with two decimals using JavaScript. Formatting a number means rounding the number up to a specified decimal place. In JavaScript, we can apply many methods to perform the formatting. Some of them are listed as follows ?
The
toFixed()MethodMath.round()MethodMath.floor()MethodMath.ceil()Method
Using toFixed() Method (Recommended)
The toFixed() method formats a number with a specific number of digits to the right of the decimal. It returns a string representation of the number that does not use exponential notation and has the exact number of digits after the decimal place.
Syntax
number.toFixed(2);
Example
<html>
<body>
<h2>JavaScript Number toFixed()</h2>
<p>Format a number with two decimals:</p>
<p id="number">Number before formatting:<br></p>
<p id="result">Number After formatting:<br></p>
<script>
var number = 9.1291754;
document.getElementById("number").innerHTML += number;
var fixedNum = number.toFixed(2);
document.getElementById("result").innerHTML += fixedNum;
</script>
</body>
</html>
Number before formatting: 9.1291754 Number After formatting: 9.13
Using Math.round() Method
The Math.round() method returns the given numeric expression rounded to its nearest number. We can use this method to format a number with two decimals by multiplying by 100, rounding, then dividing by 100.
Syntax
Math.round(num * 100) / 100;
Example
<html>
<body>
<h3>JavaScript Math.round()</h3>
<p>Format a number with two decimals</p>
<p id="number">Number before formatting:<br></p>
<p id="result">Number after formatting:<br></p>
<script>
const number = 9.1291754;
document.getElementById("number").innerHTML += number;
const fixedNum = Math.round(number * 100) / 100;
document.getElementById("result").innerHTML += fixedNum;
</script>
</body>
</html>
Number before formatting: 9.1291754 Number after formatting: 9.13
Using Math.floor() Method
The Math.floor() method returns the greatest integer less than or equal to its argument. This method always rounds down to the nearest two decimal places.
Syntax
Math.floor(num * 100) / 100
Example
<html>
<body>
<h3>JavaScript Math.floor() Method</h3>
<p>Format a number with 2 decimals:</p>
<p id="input"></p>
<p id="result"></p>
<script>
var num = 9.1291754;
document.getElementById("input").innerHTML = "Number before Format:<br> " + num;
var formatNum = Math.floor(num * 100) / 100;
document.getElementById("result").innerHTML = "Number after format:<br> " + formatNum;
</script>
</body>
</html>
Number before Format: 9.1291754 Number after format: 9.12
Using Math.ceil() Method
The Math.ceil() method returns the smallest integer greater than or equal to the number. This method always rounds up to the nearest two decimal places.
Syntax
Math.ceil(num * 100) / 100
Example
<html>
<body>
<h3>JavaScript Math.ceil() Method</h3>
<p>Format a number with 2 decimals:</p>
<p id="input"></p>
<p id="result"></p>
<script>
const num = 9.1291754;
document.getElementById("input").innerHTML = "Number before Format:<br> " + num;
const formatNum = Math.ceil(num * 100) / 100;
document.getElementById("result").innerHTML = "Number after format:<br> " + formatNum;
</script>
</body>
</html>
Number before Format: 9.1291754 Number after format: 9.13
Comparison
| Method | Result for 9.1291754 | Rounding Behavior |
|---|---|---|
toFixed(2) |
9.13 | Standard rounding (returns string) |
Math.round() |
9.13 | Standard rounding (returns number) |
Math.floor() |
9.12 | Always rounds down |
Math.ceil() |
9.13 | Always rounds up |
Conclusion
The toFixed(2) method is the most commonly used approach as it's simple and returns a properly formatted string. Use Math.floor() or Math.ceil() when you specifically need to round down or up respectively.
102K+ Views
