Open In App

How to format a float in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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(), 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:



Last Updated : 25 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads