Format a float number means to round off a number up to the given decimal place, ceiling, flooring, etc. There are many operations used to format the float number which are given below:
- Math.ceil() Method
- float.toFixed() Method
- Math.round() Method
- Math.floor() Method
- float.toExponential() Method
- number.toPrecision() Method
Math.ceil(), float.toFixed() and Math.round() Method: All the methods are similar and giving the same output. The implementation of Math.ceil() and Math.round() are totally same but the Math.round() function is used to round a number to its nearest integer.
Example:
<!DOCTYPE html> <html> <head> <title>
How to format a float
value in javascript ?
</title>
</head> <body> <h1 style= "color:green;" >
GeeksforGeeks
</h1>
<h3>
Format a float value
6.56759 in JavaScript
</h3>
<p id= "d1" ></p>
<p id= "d2" ></p>
<p id= "d3" ></p>
<p id= "d4" ></p>
<p id= "d5" ></p>
<script>
var n = 6.56759;
// Rounds to next highest integer
document.getElementById( "d1" ).innerHTML
= "Math.ceil(n) = " + Math.ceil(n)
+ "<br />Math.round(n) = " + Math.round(n)
+ "<br />n.toFixed() = " + n.toFixed();
// Rounds to the highest decimal upto one point
document.getElementById( "d2" ).innerHTML
= "Math.ceil(n*10)/10 = " + Math.ceil(n*10)/10
+ "<br />Math.round(n*10)/10 = "
+ Math.round(n*10)/10
+ "<br />n.toFixed(1) = " + n.toFixed(1);
// Rounds to the highest decimal upto two points
document.getElementById( "d3" ).innerHTML
= "Math.ceil(n*100)/100 = " + Math.ceil(n*100)/100
+ "<br />Math.round(n*100)/100 = "
+ Math.round(n*100)/100
+ "<br />n.toFixed(2) = " + n.toFixed(2);
// Rounds to the highest decimal upto three points
document.getElementById( "d4" ).innerHTML
= "Math.ceil(n*1000)/1000 = " + Math.ceil(n*1000)/1000
+ "<br />Math.round(n*1000)/1000 = "
+ Math.round(n*1000)/1000
+ "<br />n.toFixed(3) = " + n.toFixed(3);
// Rounds to the specified length, as the
// manipulation stops to the original float
document.getElementById( "d5" ).innerHTML
= "Math.ceil(n*1000000000)/1000000000 = "
+ Math.ceil(n*1000000000)/1000000000
+ "<br />Math.round(n*1000000000)/1000000000 = "
+ Math.round(n*1000000000)/1000000000
+ "<br />n.toFixed(9) = " + n.toFixed(9);
</script>
</body> </html> |
Output:
Math.floor() Method: The Math.floor() function is used to round off the number passed as a parameter to its nearest integer in Downward direction of rounding i.e. towards the lesser value.
Example:
<!DOCTYPE html> <html> <head> <title>
How to format a float
value in javascript ?
</title>
</head> <body> <h1 style= "color:green;" >
GeeksforGeeks
</h1>
<h3>
Format a float value
6.56759 in JavaScript
</h3>
<p id= "d1" ></p>
<p id= "d2" ></p>
<p id= "d3" ></p>
<script>
var n = 6.56759;
// Rounds off to the floor value
document.getElementById( "d1" ).innerHTML
= "Math.floor(n) = " + Math.floor(n);
// Rounds off upto one decimal place
document.getElementById( "d2" ).innerHTML
= "Math.floor(n*10)/10 = "
+ Math.floor(n*10)/10;
// Rounds off upto two decimal place
document.getElementById( "d3" ).innerHTML
= "Math.floor(n*100)/100 = "
+ Math.floor(n*100)/100;
</script>
</body> </html> |
Output:
float.toExponential() Method: The toExponential() method is used to convert a number to its exponential form. It returns a string representing the Number object in exponential notation.
Example:
<!DOCTYPE html> <html> <head> <title>
How to format a float
value in javascript ?
</title>
</head> <body> <h1 style= "color:green;" >
GeeksforGeeks
</h1>
<h3>
Format a float number
in JavaScript
</h3>
<p id= "GFG" ></p>
<script>
var n1 = 5.569999999999999999999;
var n2 = 5.569999999999;
// The complexity of the float results
// in its conversion
document.getElementById( "GFG" ).innerHTML
= "n1.toExponential() = "
+ n1.toExponential()
+ "<br />n2.toExponential() = "
+ n2.toExponential();
</script>
</body> </html> |
Output:
number.toPrecision() Method: The toPrecision() method is used to format a number to a specific precision or length. If the formatted number requires more number of digits than the original number then decimals and nulls are also added to create the specified length.
Example:
<!DOCTYPE html> <html> <head> <title>
How to format a float
value in javascript ?
</title>
</head> <body> <h1 style= "color:green;" >
GeeksforGeeks
</h1>
<h3>
Format a float number
in JavaScript
</h3>
<p id= "d1" ></p>
<p id= "d2" ></p>
<p id= "d3" ></p>
<script>
var n1 = 13.3714;
var n2 = 0.0016588874;
var n3 = 13.3714;
document.getElementById( "d1" ).innerHTML
= "n1.toPrecision() = " + n1.toPrecision()
+ "<br \>n1.toPrecision(2) = " + n1.toPrecision(2)
+ "<br \>n1.toPrecision(3) = " + n1.toPrecision(3)
+ "<br \>n1.toPrecision(10) = " + n1.toPrecision(10);
document.getElementById( "d2" ).innerHTML
= "n2.toPrecision() = " + n2.toPrecision()
+ "<br \>n2.toPrecision(2) = " + n2.toPrecision(2)
+ "<br \>n2.toPrecision(3) = " + n2.toPrecision(3)
+ "<br \>n2.toPrecision(10) = " + n2.toPrecision(10);
document.getElementById( "d3" ).innerHTML
= "n3.toPrecision() = " + n3.toPrecision()
+ "<br \>n3.toPrecision(2) = " + n3.toPrecision(2)
+ "<br \>n3.toPrecision(3) = " + n3.toPrecision(3)
+ "<br \>n3.toPrecision(10) = " + n3.toPrecision(10);
</script>
</body> </html> |
Output: