Number methods help you work with numbers.
Number Methods and Properties
Primitive values (like 3.14 or 2014), cannot have properties and methods (because they are not objects).
But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.
The toString() Method
The toString() method returns a number as a string.
All number methods can be used on any type of numbers (literals, variables, or expressions):
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Methods</h2>
<p>The toString() method converts a number to a string.</p>
<p id="demo"></p>
<script>
let x = 123;
document.getElementById("demo").innerHTML =
x.toString() + "<br>" +
(123).toString() + "<br>" +
(100 + 23).toString();
</script>
</body>
</html>
Result:
JavaScript Number Methods
The toString() method converts a number to a string.
123
123
123
The toExponential() Method
toExponential() returns a string, with a number rounded and written using exponential notation.
A parameter defines the number of characters behind the decimal point:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Methods</h2>
<p>The toExponential() method returns a string, with the number rounded and written using exponential notation.</p>
<p>An optional parameter defines the number of digits behind the decimal point.</p>
<p id="demo"></p>
<script>
let x = 9.656;
document.getElementById("demo").innerHTML =
x.toExponential() + "<br>" +
x.toExponential(2) + "<br>" +
x.toExponential(4) + "<br>" +
x.toExponential(6);
</script>
</body>
</html>
Result:
JavaScript Number Methods
The toExponential() method returns a string, with the number rounded and written using exponential notation.
An optional parameter defines the number of digits behind the decimal point.
9.656e+0
9.66e+0
9.6560e+0
9.656000e+0
The parameter is optional. If you don’t specify it, JavaScript will not round the number.
The toFixed() Method
toFixed() returns a string, with the number written with a specified number of decimals:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Methods</h2>
<p>The toFixed() method rounds a number to a given number of digits.</p>
<p>For working with money, toFixed(2) is perfect.</p>
<p id="demo"></p>
<script>
let x = 9.656;
document.getElementById("demo").innerHTML =
x.toFixed(0) + "<br>" +
x.toFixed(2) + "<br>" +
x.toFixed(4) + "<br>" +
x.toFixed(6);
</script>
</body>
</html>
Result:
JavaScript Number Methods
The toFixed() method rounds a number to a given number of digits.
For working with money, toFixed(2) is perfect.
10
9.66
9.6560
9.656000
toFixed(2) is perfect for working with money.
The toPrecision() Method
toPrecision() returns a string, with a number written with a specified length:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Methods</h2>
<p>The toPrecision() method returns a string, with a number written with a specified length:</p>
<p id="demo"></p>
<script>
let x = 9.656;
document.getElementById("demo").innerHTML =
x.toPrecision() + "<br>" +
x.toPrecision(2) + "<br>" +
x.toPrecision(4) + "<br>" +
x.toPrecision(6);
</script>
</body>
</html>
Result:
JavaScript Number Methods
The toPrecision() method returns a string, with a number written with a specified length:
9.656
9.7
9.656
9.65600
The valueOf() Method
valueOf() returns a number as a number.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Methods</h2>
<p>The valueOf() method returns a number as a number:</p>
<p id="demo"></p>
<script>
let x = 123;
document.getElementById("demo").innerHTML =
x.valueOf() + "<br>" +
(123).valueOf() + "<br>" +
(100 + 23).valueOf();
</script>
</body>
</html>
Result:
JavaScript Number Methods
The valueOf() method returns a number as a number:
123
123
123
In JavaScript, a number can be a primitive value (typeof = number) or an object (typeof = object).
The valueOf() method is used internally in JavaScript to convert Number objects to primitive values.
There is no reason to use it in your code.
All JavaScript data types have a valueOf() and a toString() method.
Converting Variables to Numbers
There are 3 JavaScript methods that can be used to convert variables to numbers:
- The
Number()method - The
parseInt()method - The
parseFloat()method
These methods are not number methods, but global JavaScript methods.
Global JavaScript Methods
JavaScript global methods can be used on all JavaScript data types.
These are the most relevant methods, when working with numbers:
| Method | Description |
|---|---|
| Number() | Returns a number, converted from its argument. |
| parseFloat() | Parses its argument and returns a floating point number |
| parseInt() | Parses its argument and returns an integer |
The Number() Method
Number() can be used to convert JavaScript variables to numbers:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Methods</h2>
<p>The Number() method converts variables to numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number(true) + "<br>" +
Number(false) + "<br>" +
Number("10") + "<br>" +
Number(" 10") + "<br>" +
Number("10 ") + "<br>" +
Number(" 10 ") + "<br>" +
Number("10.33") + "<br>" +
Number("10,33") + "<br>" +
Number("10 33") + "<br>" +
Number("John");
</script>
</body>
</html>
Result:
JavaScript Global Methods
The Number() method converts variables to numbers:
1
0
10
10
10
10
10.33
NaN
NaN
NaN
If the number cannot be converted, NaN (Not a Number) is returned.
The Number() Method Used on Dates
Number() can also convert a date to a number.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Methods</h2>
<p>The Number() method can convert a date to a number:</p>
<p id="demo"></p>
<script>
let x = new Date("1970-01-01");
document.getElementById("demo").innerHTML = Number(x);
</script>
</body>
</html>
Result:
JavaScript Global Methods
The Number() method can convert a date to a number:
0
The Number() method returns the number of milliseconds since 1.1.1970.
The number of milliseconds between 1970-01-02 and 1970-01-01 is 86400000:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Methods</h2>
<p>The Number() method can convert a date to a number:</p>
<p id="demo"></p>
<script>
let x = new Date("1970-01-02");
document.getElementById("demo").innerHTML = Number(x);
</script>
</body>
</html>
Result:
JavaScript Global Methods
The Number() method can convert a date to a number:
86400000
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Methods</h2>
<p>The Number() method can convert a date to a number:</p>
<p id="demo"></p>
<script>
let x = new Date("2017-09-30");
document.getElementById("demo").innerHTML = Number(x);
</script>
</body>
</html>
Result:
JavaScript Global Methods
The Number() method can convert a date to a number:
1506729600000
The parseInt() Method
parseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is returned:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Functions</h2>
<h2>parseInt()</h2>
<p>The global JavaScript function parseInt() converts strings to numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
parseInt("-10") + "<br>" +
parseInt("-10.33") + "<br>" +
parseInt("10") + "<br>" +
parseInt("10.33") + "<br>" +
parseInt("10 6") + "<br>" +
parseInt("10 years") + "<br>" +
parseInt("years 10");
</script>
</body>
</html>
Result:
JavaScript Global Functions
parseInt()
The global JavaScript function parseInt() converts strings to numbers:
-10
-10
10
10
10
10
NaN
If the number cannot be converted, NaN (Not a Number) is returned.
The parseFloat() Method
parseFloat() parses a string and returns a number. Spaces are allowed. Only the first number is returned:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Methods</h2>
<p>The parseFloat() method converts strings to numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
parseFloat("10") + "<br>" +
parseFloat("10.33") + "<br>" +
parseFloat("10 6") + "<br>" +
parseFloat("10 years") + "<br>" +
parseFloat("years 10");
</script>
</body>
</html>
Result:
JavaScript Global Methods
The parseFloat() method converts strings to numbers:
10
10.33
10
10
NaN
If the number cannot be converted, NaN (Not a Number) is returned.
Number Properties
| Property | Description |
|---|---|
| MAX_VALUE | Returns the largest number possible in JavaScript |
| MIN_VALUE | Returns the smallest number possible in JavaScript |
| POSITIVE_INFINITY | Represents infinity (returned on overflow) |
| NEGATIVE_INFINITY | Represents negative infinity (returned on overflow) |
| NaN | Represents a “Not-a-Number” value |
JavaScript MIN_VALUE and MAX_VALUE
MAX_VALUE returns the largest possible number in JavaScript.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Properties</h2>
<p>MAX_VALUE returns the largest possible number in JavaScript.</p>
<p id="demo"></p>
<script>
let x = Number.MAX_VALUE;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Number Properties
MAX_VALUE returns the largest possible number in JavaScript.
1.7976931348623157e+308
MIN_VALUE returns the lowest possible number in JavaScript.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Properties</h2>
<p>MIN_VALUE returns the smallest number possible in JavaScript.</p>
<p id="demo"></p>
<script>
let x = Number.MIN_VALUE;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Number Properties
MIN_VALUE returns the smallest number possible in JavaScript.
5e-324
JavaScript POSITIVE_INFINITY
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Properties</h2>
<p>POSITIVE_INFINITY</p>
<p id="demo"></p>
<script>
let x = Number.POSITIVE_INFINITY;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Number Properties
POSITIVE_INFINITY
Infinity
POSITIVE_INFINITY is returned on overflow:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Properties</h2>
<p>POSITIVE_INFINITY is returned on overflow:</p>
<p id="demo"></p>
<script>
let x = 1 / 0;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Number Properties
POSITIVE_INFINITY is returned on overflow:
Infinity
JavaScript NEGATIVE_INFINITY
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Properties</h2>
<p>NEGATIVE_INFINITY</p>
<p id="demo"></p>
<script>
let x = Number.NEGATIVE_INFINITY;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Number Properties
NEGATIVE_INFINITY
-Infinity
NEGATIVE_INFINITY is returned on overflow:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Properties</h2>
<p>NEGATIVE_INFINITY</p>
<p id="demo"></p>
<script>
let x = -1 / 0;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Number Properties
NEGATIVE_INFINITY
-Infinity
JavaScript NaN – Not a Number
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Properties</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Number.NaN;
</script>
</body>
</html>
Result:
JavaScript Number Properties
NaN
NaN is a JavaScript reserved word indicating that a number is not a legal number.
Trying to do arithmetic with a non-numeric string will result in NaN (Not a Number):
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>A number divided by a non-numeric string becomes NaN (Not a Number):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>
</body>
</html>
Result:
JavaScript Numbers
A number divided by a non-numeric string becomes NaN (Not a Number):
NaN
Number Properties Cannot be Used on Variables
Number properties belongs to the JavaScript’s number object wrapper called Number.
These properties can only be accessed as Number.MAX_VALUE.
Using myNumber.MAX_VALUE, where myNumber is a variable, expression, or value, will return undefined:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Number Properties</h2>
<p>Using a Number property on a variable, expression, or value, will return undefined:</p>
<p id="demo"></p>
<script>
let x = 6;
document.getElementById("demo").innerHTML = x.MAX_VALUE;
</script>
</body>
</html>
Result:
JavaScript Number Properties
Using a Number property on a variable, expression, or value, will return undefined:
undefined