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;"> neveropen </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;"> neveropen </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;"> neveropen </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;"> neveropen </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:
