JavaScript Format Number 2 Decimals
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
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
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.
About Dikshita
