- JavaScript Numbers
- Example
- Example
- JavaScript Numbers are Always 64-bit Floating Point
- Integer Precision
- Example
- Floating Precision
- Adding Numbers and Strings
- Example
- Example
- Example
- Example
- Example
- Example
- Numeric Strings
- How to format a number with two decimals in JavaScript?
- The toFixed() Method
- Syntax
- Algorithm
- Example 1
- Math.round()
- Syntax
- Algorithm
- Example 2
- Math.floor() Method
- Syntax
- Example 3
- Math.ceil() Method
- Syntax
- Example 4
JavaScript Numbers
JavaScript has only one type of number. Numbers can be written with or without decimals.
Example
Extra large or extra small numbers can be written with scientific (exponent) notation:
Example
JavaScript Numbers are Always 64-bit Floating Point
Unlike many other programming languages, JavaScript does not define different types of numbers, like integers, short, long, floating-point etc.
JavaScript numbers are always stored as double precision floating point numbers, following the international IEEE 754 standard.
This format stores numbers in 64 bits, where the number (the fraction) is stored in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63:
Value (aka Fraction/Mantissa) | Exponent | Sign |
---|---|---|
52 bits (0 — 51) | 11 bits (52 — 62) | 1 bit (63) |
Integer Precision
Integers (numbers without a period or exponent notation) are accurate up to 15 digits.
Example
let x = 999999999999999; // x will be 999999999999999
let y = 9999999999999999; // y will be 10000000000000000
The maximum number of decimals is 17.
Floating Precision
Floating point arithmetic is not always 100% accurate:
To solve the problem above, it helps to multiply and divide:
Adding Numbers and Strings
JavaScript uses the + operator for both addition and concatenation.
Numbers are added. Strings are concatenated.
If you add two numbers, the result will be a number:
Example
If you add two strings, the result will be a string concatenation:
Example
If you add a number and a string, the result will be a string concatenation:
Example
If you add a string and a number, the result will be a string concatenation:
Example
A common mistake is to expect this result to be 30:
Example
A common mistake is to expect this result to be 102030:
Example
The JavaScript interpreter works from left to right.
First 10 + 20 is added because x and y are both numbers.
Then 30 + «30» is concatenated because z is a string.
Numeric Strings
JavaScript strings can have numeric content:
let x = 100; // x is a number
let y = «100»; // y is a string
JavaScript will try to convert strings to numbers in all numeric operations:
How to format a number with two decimals in JavaScript?
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 −
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 −
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 −
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:
" + num; var formatNum = Math.floor(num*100)/100; document.getElementById("result").innerHTML = "Number after format :
" + 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 −
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:
" + num; const formatNum = Math.ceil(num*100)/100; document.getElementById("result").innerHTML = "Number after format :
" + 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?