Floating point number precision in JavaScript

20 May, 2019
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:
<!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>                    
Output:
Before clicking the button:
After clicking the button:
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:
<!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>                    
Output:
Before clicking the button:
After clicking the button:
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.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?