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:
html
<h1 style="color: green"> neveropen </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> |
Output:
Floating point number precision in JavaScript
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:
html
<h1 style="color: green"> neveropen </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> |
Output:
Floating point number precision in JavaScript
