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 float in JavaScript?
In JavaScript, formatting floating point numbers means controlling how many decimal places are displayed or how the number is rounded. There are several built-in methods to format floats, each with different behaviors for rounding and precision control.
Math.round() Method
Math.floor() Method
Math.ceil() Method
toFixed() Method
toPrecision() Method
Math.round() Method
The Math.round() method rounds a number to the nearest integer. For decimal precision, multiply by 10^n, round, then divide by 10^n.
Syntax
Math.round(num) // format to nearest integer let n = 10**d; Math.round(num*n)/n // format to d decimal places
Example: Rounding to Nearest Integer
<html>
<body>
<h3>JavaScript Math.round() Method</h3>
<p>Format a float to nearest integer.</p>
<p id="result"></p>
<script>
var number = 4.8754;
var roundNum = Math.round(number);
document.getElementById("result").innerHTML = "Math.round(4.8754) = " + roundNum;
</script>
</body>
</html>
Math.round(4.8754) = 5
Example: Rounding to Specific Decimal Places
<html>
<body>
<h3>JavaScript Math.round() Method</h3>
<p>Format the float with n decimals</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
const number = 9.1931754;
const roundNum = Math.round(number*10)/10;
resultDiv.innerHTML += "With 1 decimal: " + roundNum;
resultDiv.innerHTML += "<br>With 2 decimals: " + Math.round(number*100)/100;
resultDiv.innerHTML += "<br>With 5 decimals: " + Math.round(number*100000)/100000;
</script>
</body>
</html>
With 1 decimal: 9.2 With 2 decimals: 9.19 With 5 decimals: 9.19318
Math.floor() Method
The Math.floor() method returns the largest integer less than or equal to the given number, effectively rounding down.
Syntax
Math.floor(num) // rounds down to integer let n = 10**d; Math.floor(num*n)/n // rounds down to d decimal places
Example
<html>
<body>
<h3>JavaScript Math.floor() Method</h3>
<p>Format a float (3.31754) with n decimals:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
var number = 3.31754;
var floorNum = Math.floor(number);
resultDiv.innerHTML += "To nearest integer: " + floorNum;
resultDiv.innerHTML += "<br>With 1 decimal: " + Math.floor(number*10)/10;
resultDiv.innerHTML += "<br>With 3 decimals: " + Math.floor(number*1000)/1000;
</script>
</body>
</html>
To nearest integer: 3 With 1 decimal: 3.3 With 3 decimals: 3.317
Math.ceil() Method
The Math.ceil() method returns the smallest integer greater than or equal to the given number, effectively rounding up.
Syntax
Math.ceil(num) // rounds up to integer let n = 10**d; Math.ceil(num*n)/n // rounds up to d decimal places
Example
<html>
<body>
<h3>JavaScript Math.ceil() Method</h3>
<p>Format a float (3.31754) with n decimals:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
var number = 3.31754;
var ceilNum = Math.ceil(number);
resultDiv.innerHTML += "To nearest integer: " + ceilNum;
resultDiv.innerHTML += "<br>With 1 decimal: " + Math.ceil(number*10)/10;
resultDiv.innerHTML += "<br>With 3 decimals: " + Math.ceil(number*1000)/1000;
</script>
</body>
</html>
To nearest integer: 4 With 1 decimal: 3.4 With 3 decimals: 3.318
toFixed() Method
The toFixed() method formats a number with a specified number of decimal places and returns a string. It adds trailing zeros when necessary.
Syntax
num.toFixed(n)
Example
<html>
<body>
<h3>JavaScript Number toFixed() Method</h3>
<p>Format 8.131754 to specified decimals:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
const number = 8.131754;
var fixedNum = number.toFixed();
resultDiv.innerHTML += "number.toFixed() = " + fixedNum;
resultDiv.innerHTML += "<br>number.toFixed(1) = " + number.toFixed(1);
resultDiv.innerHTML += "<br>number.toFixed(2) = " + number.toFixed(2);
resultDiv.innerHTML += "<br>number.toFixed(3) = " + number.toFixed(3);
resultDiv.innerHTML += "<br>number.toFixed(5) = " + number.toFixed(5);
</script>
</body>
</html>
number.toFixed() = 8 number.toFixed(1) = 8.1 number.toFixed(2) = 8.13 number.toFixed(3) = 8.132 number.toFixed(5) = 8.13175
toPrecision() Method
The toPrecision() method formats a number to a specified total number of significant digits and returns a string.
Syntax
num.toPrecision(precision)
Example
<html>
<body>
<h3>JavaScript Number toPrecision() Method</h3>
<p>Format 8.131754 to specified precision:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
const number = 8.131754;
resultDiv.innerHTML += "number.toPrecision(1) = " + number.toPrecision(1);
resultDiv.innerHTML += "<br>number.toPrecision(2) = " + number.toPrecision(2);
resultDiv.innerHTML += "<br>number.toPrecision(3) = " + number.toPrecision(3);
resultDiv.innerHTML += "<br>number.toPrecision(5) = " + number.toPrecision(5);
</script>
</body>
</html>
number.toPrecision(1) = 8 number.toPrecision(2) = 8.1 number.toPrecision(3) = 8.13 number.toPrecision(5) = 8.1318
Comparison
| Method | Behavior | Return Type | Use Case |
|---|---|---|---|
Math.round() |
Nearest integer/decimal | Number | General rounding |
Math.floor() |
Always rounds down | Number | Truncating decimals |
Math.ceil() |
Always rounds up | Number | Ensuring minimum value |
toFixed() |
Fixed decimal places | String | Display formatting |
toPrecision() |
Total significant digits | String | Scientific precision |
Conclusion
Choose toFixed() for consistent decimal display, Math rounding methods for calculations, and toPrecision() for scientific notation. Each method serves different formatting needs depending on your specific requirements.
6K+ Views
