Floating point number precision in JavaScript

The representation of floating points in JavaScript follows the IEEE-754 format. It is a double precision format where 64 bits are allocated for every floating point. The displaying of these floating values could be handled using 2 methods:

Using toFixed() Method: The number of decimal places in float values can be set using the toFixed() method. This method converts the number into a string, keeping the specified number of digits after the point. If no value is passed as a parameter, then it takes 0 as default value i.e. no decimal points are displayed.

Syntax:

number.toFixed(digits)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Floating point number precision
        in JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Floating point number precision
        in JavaScript?
    </b>
      
    <p>
        Original floating point: 3.14159265359
    </p>
      
    <p>
        Floating point when decimal places set
        to 2: <span class="output-2"></span>
    </p>
      
    <p>
        Floating point when decimal places set
        to 5: <span class="output-5"></span>
    </p>
  
    <button onclick="setDecimalPlaces()">
        Change decimal points
    </button>
      
    <script type="text/javascript">
        function setDecimalPlaces() {
            pi = 3.14159265359;
            twoPlaces = pi.toFixed(2);
            fivePlaces = pi.toFixed(5);
  
            document.querySelector('.output-2').textContent
                    = twoPlaces;
            document.querySelector('.output-5').textContent
                    = fivePlaces;
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    before-fixed
  • After clicking the button:
    after-fixed

Using toPrecision() Method: The number of total digits in float values can be set using the toPrecision() method. This method converts the number into a string, keeping the total number of digits of the value as specified and rounding them to the nearest number. If no value is passed as a parameter, then the function acts as a toString() function effectively returning the value passed as a string.

Syntax:

number.toPrecision(precision)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Floating point number precision
        in JavaScript?
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Floating point number precision
        in JavaScript?
    </b>
      
    <p>
        Original floating point: 3.14159265359
    </p>
      
    <p>
        Floating point when precision set to
        2: <span class="output-2"></span>
    </p>
      
    <p>
        Floating point when precision set to
        5: <span class="output-5"></span>
    </p>
  
    <button onclick="setPrecision()">
        Click to check
    </button>
      
    <script type="text/javascript">
        function setPrecision() {
            pi = 3.14159265359;
            twoPlaces = pi.toPrecision(2);
            fivePlaces = pi.toPrecision(5);
  
            document.querySelector('.output-2').textContent
                    = twoPlaces;
            document.querySelector('.output-5').textContent
                    = fivePlaces;
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    before-precision
  • After clicking the button:
    after-precision


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.