Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
4K+ Views
