How to format a float in JavaScript ? - GeeksforGeeks

25 Sep, 2019
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:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills