# How to format a float in JavaScript?

In this tutorial, we will see how to format a floating point number to the desired format using JavaScript. Formatting a floating number means rounding the number up to a given decimal place. We will discuss in detail the various methods listed below−

• Math.round() Method

• Math.floor() Method

• Math.ceil() Method

• toFixed() Method

• toPrecision() Method

## Math.round() method

The Math.round() method rounds a number to the nearest integer. We can use this method to format to the nearest integer and also with some decimals. To round with decimals, multiply the number by 10 power of the decimals and then round the number, and then divide by 10 power of the decimal.

### Syntax

Following is the syntax to format a float using the Math.round() method −

Math.round(num) // format to nearest integer
let n = 10**d ;
Math.round(num*n)/n // format to d decimal place.


Here num is the float number to be formatted with d decimals.

### Algorithm

• STEP 1 − Declare a variable and assign a float number to the variable.
• STEP 2 − Apply the Math.round() method to format the float.
• STEP 3 − Display the result on the user screen.

### Example 1

#### Format the float to nearest integer.

In the below example, we format a float number to nearest integer using the Math.round() method.

<html>
<body>
<h3>JavaScript Math.round() Method</h3>
<p>format a float to nearest integer.</p>
<p id="result">final result:<br></p>
<script>
var number = 4.8754;
var roundNum = Math.round(number);
document.getElementById("result").innerHTML = "Math.round(4.8754) = " + roundNum;
</script>
</body>
</html>


In the above program, we have used Math.round() method which rounds a numeric expression to the nearest integer. The 4.8754 will be rounded down to 5.

### Example 2

#### Format the float with n decimal points.

In the below example, we format the float number with n decimal points using the Math.round() method. We format the number with one, two and five decimals

<html>
<body>
<h3>JavaScript Math.round() Method</h3>
<p>Format the float with n decimals</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result")
const number = 9.1931754;
const roundNum = Math.round(number*10)/10;
resultDiv.innerHTML += "With 1 decimal: " + roundNum;
resultDiv.innerHTML += "<br>With 2 decimals: " + Math.round(number*100)/100;
resultDiv.innerHTML += "<br>With 5 decimals: " + Math.round(number*100000)/100000;
</script>
</body>
</html>


## Math.floor() method

The Math.floor() method returns the greatest integer less than or equal to its argument. We can use this method to format a float to nearest integer or with some decimals.

### Syntax

Following is the syntax to format a float using Math.floor() method −

Math.floor(num) // format to greatest integer less than or equal to num.
let n = 10**d ;
Math.floor(num*n)/n // format to d decimal place.


Here num is the float number to be formatted with d decimals.

### Example 3

In the below example, we format a float to greatest integer less than or equal to the float, and with 1 and three decimals. We use of Math.floor() method for formatting the float.

<html>
<body>
<h3>JavaScript Math.floor() Method</h3>
<p>Format a float (3.31754) with n decimals:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
var number = 3.31754;
var floorNum = Math.floor(number);
resultDiv.innerHTML += "To nearest integer: " + floorNum;
resultDiv.innerHTML += "<br>With 1 decimal: " + Math.floor(number*10)/10;
resultDiv.innerHTML += "<br>With 3 decimals : " + Math.floor(number*1000)/1000;
</script>
</body>
</html>


## Math.ceil() Method

The Math.ceil() method returns the smallest integer greater than or equal to the float. We should apply this method to format the float with some decimals as well as to smallest integer greater than or equal to the float

### Syntax

Following is the syntax to format a float using Math.ceil() method −

Math.ceil(num) // format to smallest integer greater than or equal to num.
let n = 10**d ;
Math.ceil(num*n)/n // format to d decimal place


Here num is the float number to be formatted with d decimals.

### Example 4

In the below example, we format a float to smallest integer greater than or equal to the float, and with 1 and three decimals. We use of Math.ceil() method to format the float

<html>
<body>
<h3>JavaScript Math.ceil() Method</h3>
<p>Format a float (3.31754) with n decimals:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
var number = 3.31754;
var floorNum = Math.ceil(number);
resultDiv.innerHTML += "To nearest integer: " + floorNum;
resultDiv.innerHTML += "<br>With 1 decimal: " + Math.ceil(number*10)/10;
resultDiv.innerHTML += "<br>With 3 decimals : " + Math.ceil(number*1000)/1000;
</script>
</body>
</html>


Please note the difference between the outputs in Example 3 and Example 4.

## Number toFixed() Method

The Number toFixed() method rounds a number to a specified decimal. It converts the number to a string. It adds zeros if the number of decimals is higher than the number itself.

### Syntax

Following is the syntax to format a float with a specified decimal using the toFixed() method −

num.toFixed(n);


Here the float num is formatted with n decimals. If the parameter n is not provided the num is formatted to the nearest integer.

### Example 5

In the below example, we format 8.131754 with specific decimals using the toFixed() method.

<html>
<body>
<h2>JavaScript Number toFixed() Method</h2>
<p>Format 8.131754 to secified decimals:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
const number = 8.131754;
var fixedNum = number.toFixed();
resultDiv.innerHTML += "number.toFixed() = " + fixedNum;
resultDiv.innerHTML += "<br>number.toFixed(1) = " + number.toFixed(1);
resultDiv.innerHTML += "<br>number.toFixed(2) = " + number.toFixed(2);
resultDiv.innerHTML += "<br>number.toFixed(3) = " + number.toFixed(3);
resultDiv.innerHTML += "<br>number.toFixed(5) = " + number.toFixed(5);
resultDiv.innerHTML += "<br>number.toFixed(10) = " + number.toFixed(10);
</script>
</body>
</html>


## Number toPrecision() Method

The Number toPrecision() method is used to format a numeric expression to a certain length

### Syntax

Following is the syntax of the toPrecision() method −

num.toPrecision(l);


Here the num is formatted with specific length l.

### Example 6

In the below example, we format 8.131754 with specific decimals using the toPrecision() method.

<html>
<body>
<h2>JavaScript Number toPrecision() Method</h2>
<p>Format 8.131754 to secified decimals:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
const number = 8.131754;
var fixedNum = number.toPrecision();
resultDiv.innerHTML += "number.toPrecision() = " + fixedNum;
resultDiv.innerHTML += "<br>number.toPrecision(1) = " + number.toPrecision(1);
resultDiv.innerHTML += "<br>number.toPrecision(2) = " + number.toPrecision(2);
resultDiv.innerHTML += "<br>number.toPrecision(3) = " + number.toPrecision(3);
resultDiv.innerHTML += "<br>number.toPrecision(5) = " + number.toPrecision(5);
resultDiv.innerHTML += "<br>number.toPrecision(10) = " + number.toPrecision(10);
</script>
</body>
</html>


In this tutorial, we discussed five methods to format a float to a specified decimal point. The Math round(), floor() and ceil() methods work in a similar manner when we format the float to a specific decimal. You can make clear differences in the results using floor() and ceil() methods. The Number toFixed() and toPrecision() methods works in similar manner while you can see the clear differences in the results in these two methods.

Updated on: 05-Sep-2022

3K+ Views 