# How to format a number with two decimals in JavaScript?

JavascriptWeb DevelopmentFront End Technology

#### JavaScript for beginners

Best Seller

74 Lectures 10 hours

#### Modern Javascript for Beginners + Javascript Projects

Most Popular

112 Lectures 15 hours

#### The Complete Full-Stack JavaScript Course!

Best Seller

96 Lectures 24 hours

This tutorial will teach us how to format a number with two decimals using JavaScript. Formatting a number means rounding the number up to a specified decimal place. In JavaScript, we can apply many methods to perform the formatting. Some of them are listed as follows −

• The toFixed() Method

• Math.round() Method

• Math.floor() Method

• Math.ceil() Method

## The toFixed() Method

The toFixed() method formats a number with a specific number of digits to the right of the decimal. it returns a string representation of the number that does not use exponential notation and has the exact number of digits after the decimal place.

### Syntax

Following is the syntax format for a number up to 2 decimals using the toFixed() method −

number.toFixed(2);


In the above syntax toFixed() is the method of formatting a number with twoIn the above syntax toFixed() is the method of formatting a number with two decimals in JavaScript and number is the number to be formatted with two decimals.

### Algorithm

• STEP 1 − Declare a variable named “num” and assign a number to the variable.
• STEP 2 − Compute num.toFixed(2). The result is formatted with two decimals.
• STEP 3 − Display the result on the user screen

### Example 1

The example below will illustrate numbers before and after formatting in JavaScript.

<html>
<body>
<h2>JavaScript Number toFixed()</h2>
<p>format a number with two decimals:</h3>
<p id="number">Number before formatting:<br></p>
<p id="result">Number After formatting:<br></p>
<script>
var number = 9.1291754;
document.getElementById("number").innerHTML += number;
var fixedNum = number.toFixed(2);
document.getElementById("result").innerHTML += fixedNum;
</script>
</body>
</html>


In the above program, we have used the number.toFixed(2) rounds a number to the number with two decimal positions. 9.1291754 will be rounded down to (9.13).

## Math.round()

The Math.round() method returns the given numeric expression rounded to its nearest number. We will use the method to format a number with two decimals. Please have a look at the below syntax.

### Syntax

Following is the syntax for rounding off a given number in JavaScript −

Math.round(num*100)/100;


In the above syntax Math.round() is the method of formatting a number and num is the number to be formatted with two decimals.

### Algorithm

• STEP 1 − As a first step, we will create a variable named “number” and assign a value to it.
• STEP 2 − Now we compute Math.round() and assign it to a new variable fixedNum, i.e. var fixedNum = Math.round(number*100)/100.
• STEP 3 − The last or the third step will display the result on the user screen

### Example 2

The example below will illustrate numbers before and after formatting in JavaScript.

<html>
<body>
<h3>JavaScript Math.round()</h3>
<p>format a number with two decimals</h3>
<p id="number">Number before formatting:<br></p>
<p id="result">Number after formatting:<br></p>
<script>
const number = 9.1291754;
document.getElementById("number").innerHTML += number;
const fixedNum = Math.round(number*100)/100;
document.getElementById("result").innerHTML += fixedNum;
</script>
</body>
</html>


In the above program, we have used the Math.round() method which rounds a number to a number with two decimal positions. 9.1291754 will be rounded down to (9.13).

## Math.floor() Method

The Math.floor() method returns the greatest integer less than or equal to its argument. But we can use this method to format a number with two decimals.

### Syntax

Following is the syntax to format a number with two decimals using Math.floor() method −

Math.floor(num*100)/100


Here num is the number to be formatted with two decimals

### Example 3

In the below example, we format 9.1291754 to a number with two decimals. We use of Math.floor() method for formatting the number.

<html>
<body>
<h3>JavaScript Math.floor() Method</h3>
<p>Format a nubmer with 2 decimals:</p>
<p id="input"></p>
<p id="result"></p>
<script>
var num = 9.1291754;
document.getElementById("input").innerHTML = "Number before Format:<br> " + num;
var formatNum = Math.floor(num*100)/100;
document.getElementById("result").innerHTML = "Number after format :<br> " + formatNum;
</script>
</body>
</html>


## Math.ceil() Method

The Math.ceil() method returns the smallest integer greater than or equal to the number. We could apply this method to format a number to the number with two decimals.

### Syntax

Following is the syntax to format a number with two decimals −

Math.ceil(num*100)/100


Here num is the float number to be formatted with two decimals

### Example 4

In the below example, we format 9.1291754 to a number with two decimals We use of Math.ceil() method for formatting the number.

<html>
<body>
<h3>JavaScript Math.ceil() Method</h3>
<p>Format a number with 2 decimals:</p>
<p id="input"></p>
<p id="result"></p>
<script>
const num = 9.1291754 ;
document.getElementById("input").innerHTML = "Number before Format:<br> " + num;
const formatNum = Math.ceil(num*100)/100;
document.getElementById("result").innerHTML = "Number after format :<br> " + formatNum;
</script>
</body>
</html>


In this tutorial, we have discussed four methods to format a number with two decimals. Please see note the difference between the results in the different examples. Notice why Math.floor() method gives a different result. Can you try with different numbers and find which of the methods gives a different result from the others?