All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Format Number 2 Decimals

Last Updated : Sep 4, 2023

JavaScript Format Number 2 Decimals

In this article we will show you the solution of JavaScript Format Number 2 Decimals, in this tutorial, we will use two different methods in JavaScript to format the number 2 decimal.

toFixed() method

toFixed() method: this method is used to return any number to a specified decimal value. Syntax:

number.toFixed(NoOfDecimal)

math.random() method

math.random() method: in this method, we will have a random integer. And using a function to format numbers to 2 decimal values.

And also gonna use a function of Number.EPSILON.

Step By Step Guide On JavaScript Format Number 2 Decimals :-

Method 1 - using toFixed() method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript format number 2 decimals</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
    </style>
</head>
<body>
    <center>
        <h1> TALKERSCODE </h1>
        <h3> javascript format number 2 decimal </h3>
    </center>
    <script>
        const num = 51.4861379871 ;
        const decimal_num = num.toFixed(2) ;
        console.log("formatted to 2 decimal: ", decimal_num) ;
    </script>
</body>
</html>
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. Attach an external CSS file using <link> tag to give style to the page
  6. <h1> tag used to add heading here and also adding the inline CSS here.
  7. Create a <Script> tag to write JavaScript within it.
  8. A constant num with some values a created using const
  9. Using toFixed() function and set the decimal value to 2
  10. Console.log() to display the formatted number upto 2 decimal

Method 2 - using math.random()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript format number 2 decimals</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
    </style>
</head>
<body>
    <center>
        <h1> TALKERSCODE </h1>
        <h3> javascript format number 2 decimal </h3>
    </center>
    <script>
        const value = Math.random() ;
        const round = (value, digits) => {
            const factor = Math.pow(10, digits) ;
            value += Math.sign(value) * Number.EPSILON ;
            return Math.round(value*factor) / factor ;
        } ;
        console.log(round(value, 2)) ;
    </script>
</body>
</html>
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. Attach an external CSS file using <link> tag to give style to the page
  6. <h1> tag used to add heading here and also adding the inline CSS here.
  7. Create a <Script> tag to write JavaScript within it.
  8. A constant value created with Math.random() that returns a random integer
  9. Create a function round() with value and digit. Then using Number.EPSILON to return the difference between 1 and the smallest floating number with is greater than 1
  10. Using console.log() to display the formatted number upto 2 decimal

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know how to format the number 2 decimal in JavaScript.

I hope this article on JavaScript Format Number 2 Decimals helps you and the steps and method mentioned above are easy to follow and implement.