Introduction to JavaScript Number
A number is a wrapper object in JavaScript that allows us to store different types of numerical values. It is a primitive data type available in JavaScript which can represent multiple types of values such as integer, decimal, float, octal or exponential values. All the numeric values are represented in an object and these objects are stored in a 64-bits format which is known as “double-precision floating-point” numbers following the international IEEE 754 standard. The number is stored in this way 1-bit at a position of 63 is a sign bit, 52 to 62 bit is used for the exponent, and 0 to 51 is used for storing an actual number.
Syntax
As Number is an object in JavaScript, it provides a Number() constructor to create an object. The primitive number datatype is created using the Number() function. Number objects can be created with or without using the constructor.
1. Literal Syntax
var integer = 50;
var float = 50.15;
var exponential = 3.14e2;
var hexadecimal = 0xcdf;
var octal = 051;2. Constructor Syntax
var integer = new Number(50);
var float = new Number(50.15);
var exponential = new Number(3.14e2);
var hexadecimal = new Number(0xcdf);
var octal = new Number(051);The number object can be created using the new keyword. The Number object can be used for the type conversion. If the argument cannot be converted into a number, it will return NaN.
JavaScript Number Methods and Examples
Below are the methods and examples for the javascript number:
1. toString()
This method converts the number into String and returns it.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Number Methods
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : auto;
width : auto;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Number Methods </h2>
<p> Click on button to convert the Number </p>
</div>
<div class = "list" >
<p> var integer = 50; </p>
<p> var float = 3.14; </p>
</br>
<button type = "submit" value = "submit" onclick = "convertNumber()"> toString() </button>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
</div>
</div>
<script type = "text/javascript">
var integer = 50;
var float = 3.14;
function convertNumber() {
var intString = integer.toString();
var floatString = float.toString();
document.getElementById("result1").innerHTML = "Integer to String:" + " " + intString;
document.getElementById("result2").innerHTML = "Float to String:" + " " + floatString;
}
</script>
</body>
</html>Output:
2. toFixed()
This method rounds off the number to a given number of digits and returns a String.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Number Methods
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : auto;
width : auto;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Number Methods </h2>
<p> Click on button to convert the Number </p>
</div>
<div class = "list" >
<p> var pie = 3.1415; </p>
</br>
<button type = "submit" value = "submit" onclick = "convertNumber()"> toFixed() </button>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
</div>
</div>
<script type = "text/javascript">
var pie = 3.1415;
function convertNumber() {
document.getElementById("result1").innerHTML = "toFixed(3): " + pie.toFixed(3);
document.getElementById("result2").innerHTML = "toFixed(2): " + pie.toFixed(2);
document.getElementById("result3").innerHTML = "toFixed(1): " + pie.toFixed(1);
document.getElementById("result4").innerHTML = "toFixed(0): " + pie.toFixed(0);
}
</script>
</body>
</html>Output:
3. toExponential()
This method rounds off the number to a given number of digits and returns a String with a number in exponential notation.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Number Methods
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : auto;
width : auto;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Number Methods </h2>
<p> Click on button to convert the Number </p>
</div>
<div class = "list" >
<p> var pie = 3.1415; </p>
</br>
<button type = "submit" value = "submit" onclick = "convertNumber()"> toExponential() </button>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
</div>
</div>
<script type = "text/javascript">
var pie = 3.1415;
function convertNumber() {
document.getElementById("result1").innerHTML = "toExponential(): " + pie.toExponential();
document.getElementById("result2").innerHTML = "toExponential(2): " + pie.toExponential(2);
document.getElementById("result3").innerHTML = "toExponential(3): " + pie.toExponential(3);
document.getElementById("result4").innerHTML = "toExponential(5): " + pie.toExponential(7);
}
</script>
</body>
</html>Output:
4. toPrecision()
This method converts a number into String and returns it with a given length.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Number Methods
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : auto;
width : auto;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Number Methods </h2>
<p> Click on button to convert the Number </p>
</div>
<div class = "list" >
<p> var pie = 3.1415; </p>
</br>
<button type = "submit" value = "submit" onclick = "convertNumber()"> toPrecision() </button>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
</div>
</div>
<script type = "text/javascript">
var pie = 3.1415;
function convertNumber() {
document.getElementById("result1").innerHTML = "toPrecision(): " + pie.toPrecision();
document.getElementById("result2").innerHTML = "toPrecision(2): " + pie.toPrecision(2);
document.getElementById("result3").innerHTML = "toPrecision(3): " + pie.toPrecision(3);
document.getElementById("result4").innerHTML = "toPrecision(5): " + pie.toPrecision(7);
}
</script>
</body>
</html>Output:
5. valueOf()
This method returns the number as a number.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Number Methods
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : auto;
width : auto;
}
.list {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.list p, .resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
.list button[ type = submit] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.list button[ type = submit]:hover {
background: #2173f3;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Number Methods </h2>
<p> Click on button to convert the Number </p>
</div>
<div class = "list" >
<p> var pie = 3.1415; </p>
</br>
<button type = "submit" value = "submit" onclick = "convertNumber()"> valueOf() </button>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
</div>
</div>
<script type = "text/javascript">
var pie = 3.1415;
function convertNumber() {
document.getElementById("result1").innerHTML = "pie.valueOf(): " + pie.valueOf();
document.getElementById("result2").innerHTML = "(3.1415).valueOf(): " + (3.1415).valueOf();
document.getElementById("result3").innerHTML = "(10 / 5).valueOf(): " + (10 / 5).valueOf();
}
</script>
</body>
</html>Output:
6. Number()
This method is used to convert JavaScript variables to number. It returns NaN if specified argument cannot be converted.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Number Methods
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : auto;
width : auto;
}
.resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Number Methods </h2>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
<p id = "result5"> </p>
<p id = "result6"> </p>
</div>
</div>
<script type = "text/javascript">
document.getElementById("result1").innerHTML = "Number(50): " + Number(50);
document.getElementById("result2").innerHTML = "Number(\"50\"): " + Number("50");
document.getElementById("result3").innerHTML = "Number(\"50.125\"): " + Number("50.125");
document.getElementById("result4").innerHTML = "Number(true): " + Number(true);
document.getElementById("result5").innerHTML = "Number(false): " + Number(false);
document.getElementById("result6").innerHTML = "Number(3,14): " + Number(3,14);
</script>
</body>
</html>Output:
7. parseInt()
This method parses its argument and returns it as an integer.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Number Methods
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : auto;
width : auto;
}
.resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Number Methods </h2>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
<p id = "result5"> </p>
<p id = "result6"> </p>
</div>
</div>
<script type = "text/javascript">
document.getElementById("result1").innerHTML = "parseInt(50): " + parseInt(50);
document.getElementById("result2").innerHTML = "parseInt(\"50\"): " + parseInt("50");
document.getElementById("result3").innerHTML = "parseInt(\"50.125\"): " + parseInt("50.125");
document.getElementById("result4").innerHTML = "parseInt(some 15): " + parseInt("some 15");
document.getElementById("result5").innerHTML = "parseInt(15 some): " + parseInt("15 some");
document.getElementById("result6").innerHTML = "parseInt(true): " + parseInt(true);
</script>
</body>
</html>Output:
8. parseFloat()
This method parses its argument and return it as floating point number.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>
JavaScript Number Methods
</title>
<style>
.body-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : auto;
width : auto;
}
.resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>
</head>
<body>
<div class = "body-data" >
<div class = "heading" >
<h2> JavaScript Number Methods </h2>
</div>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
<p id = "result5"> </p>
</div>
</div>
<script type = "text/javascript">
document.getElementById("result1").innerHTML = "parseFloat(50.33): " + parseFloat(50.33);
document.getElementById("result2").innerHTML = "parseFloat(\"50.123\"): " + parseFloat("50.123");
document.getElementById("result3").innerHTML = "parseFloat(some 15): " + parseFloat("some 15");
document.getElementById("result4").innerHTML = "parseFloat(15.2 some): " + parseFloat("15.2 some");
document.getElementById("result5").innerHTML = "parseFloat(true): " + parseFloat(true);
</script>
</body>
</html>Output:
Conclusion
A Number in JavaScript is a primitive data type that stores numeric value. It is a single object that allows us to store all types of numeric values. There are multiple methods available to perform operations on the number as we have seen.
Recommended Articles
This is a guide to JavaScript Number. Here we discuss an introduction, syntax, with methods and examples to implement with proper coding. You can also go through our other related articles to learn more –
