JavaScript Format Number 2 Decimals

Last Updated : Sep 4, 2023

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>

To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
<head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
Attach an external CSS file using <link> tag to give style to the page
<h1> tag used to add heading here and also adding the inline CSS here.
Create a <Script> tag to write JavaScript within it.
A constant num with some values a created using const
Using toFixed() function and set the decimal value to 2
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>

To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
<head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
Attach an external CSS file using <link> tag to give style to the page
<h1> tag used to add heading here and also adding the inline CSS here.
Create a <Script> tag to write JavaScript within it.
A constant value created with Math.random() that returns a random integer
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
Using console.log() to display the formatted number upto 2 decimal