- Converting Strings to Numbers
- Converting Numbers to Strings
- Converting Dates to Numbers
- Converting Numbers to Dates
- Converting Booleans to Numbers
- Converting Numbers to Booleans
JavaScript Type Conversion
JavaScript variables can be converted to a new variable and another data type:
- By the use of a JavaScript function
- Automatically by JavaScript itself
Converting Strings to Numbers
The global method Number() converts a variable (or a value) into a number.
A numeric string (like “3.14”) converts to a number (like 3.14).
An empty string (like “”) converts to 0.
A non numeric string (like “John”) converts to NaN (Not a Number).
Examples
These will convert:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>The Number() Method</h2>
<p>The Number() metod converts a variable (or value) into a number:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number("3.14") + "<br>" +
Number(Math.PI) + "<br>" +
Number(" ") + "<br>" +
Number("") + "<br>" +
Number("99 88") + "<br>" +
Number("John") + "<br>";
</script>
</body>
</html>
Result:
JavaScript Numbers
The Number() Method
The Number() metod converts a variable (or value) into a number:
3.14
3.141592653589793
0
0
NaN
NaN
Number Methods
In the chapter Number Methods, you will find more methods that can be used to convert strings to numbers:
| Method | Description |
|---|---|
| Number() | Returns a number, converted from its argument |
| parseFloat() | Parses a string and returns a floating point number |
| parseInt() | Parses a string and returns an integer |
The Unary + Operator
The unary + operator can be used to convert a variable to a number:
Example
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript typeof Operator</h2>
<p>The typeof operator returns the type of a variable or expression:</p>
<p id="demo"></p>
<script>
let y = "5";
let x = + y;
document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
</script>
</body>
</html>
Result:
The JavaScript typeof Operator
The typeof operator returns the type of a variable or expression:
string
number
If the variable cannot be converted, it will still become a number, but with the value NaN (Not a Number):
Example
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript typeof Operator</h2>
<p>The typeof operator returns the type of a variable or expression:</p>
<p id="demo"></p>
<script>
let y = "John";
let x = + y;
document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
</script>
</body>
</html>
Result:
The JavaScript typeof Operator
The typeof operator returns the type of a variable or expression:
string
number
Converting Numbers to Strings
The global method String() can convert numbers to strings.
It can be used on any type of numbers, literals, variables, or expressions:
Example
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript String() Method</h2>
<p>The String() method can convert a number to a string.</p>
<p id="demo"></p>
<script>
let x = 123;
document.getElementById("demo").innerHTML =
String(x) + "<br>" +
String(123) + "<br>" +
String(100 + 23);
</script>
</body>
</html>
Result:
The JavaScript String() Method
The String() method can convert a number to a string.
123
123
123
The Number method toString() does the same.
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
More Methods
In the chapter Number Methods, you will find more methods that can be used to convert numbers to strings:
| Method | Description |
|---|---|
| toExponential() | Returns a string, with a number rounded and written using exponential notation. |
| toFixed() | Returns a string, with a number rounded and written with a specified number of decimals. |
| toPrecision() | Returns a string, with a number written with a specified length |
Converting Dates to Numbers
The global method Number() can be used to convert dates to numbers.d = new Date();
Number(d) // returns 1404568027739
The date method getTime() does the same.d = new Date();
d.getTime() // returns 1404568027739
Converting Dates to Strings
The global method String() can convert dates to strings.String(Date()) // returns “Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)”
The Date method toString() does the same.
Example
Date().toString() // returns “Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)”
In the chapter Date Methods, you will find more methods that can be used to convert dates to strings:
| Method | Description |
|---|---|
| getDate() | Get the day as a number (1-31) |
| getDay() | Get the weekday a number (0-6) |
| getFullYear() | Get the four digit year (yyyy) |
| getHours() | Get the hour (0-23) |
| getMilliseconds() | Get the milliseconds (0-999) |
| getMinutes() | Get the minutes (0-59) |
| getMonth() | Get the month (0-11) |
| getSeconds() | Get the seconds (0-59) |
| getTime() | Get the time (milliseconds since January 1, 1970) |
Converting Booleans to Numbers
The global method Number() can also convert booleans to numbers.Number(false) // returns 0
Number(true) // returns 1
Converting Booleans to Strings
The global method String() can convert booleans to strings.String(false) // returns “false”
String(true) // returns “true”
The Boolean method toString() does the same.false.toString() // returns “false”
true.toString() // returns “true”
Automatic Type Conversion
When JavaScript tries to operate on a “wrong” data type, it will try to convert the value to a “right” type.
The result is not always what you expect:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Type Conversions</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
(5 + null) + "<br>" +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>
</body>
</html>
Result:
JavaScript Type Conversions
5
5null
52
3
10
2.5
Automatic String Conversion
JavaScript automatically calls the variable’s toString() function when you try to “output” an object or a variable:document.getElementById(“demo”).innerHTML = myVar;
// if myVar = {name:”Fjohn”} // toString converts to “[object Object]”
// if myVar = [1,2,3,4] // toString converts to “1,2,3,4”
// if myVar = new Date() // toString converts to “Fri Jul 18 2014 09:08:55 GMT+0200”
Numbers and booleans are also converted, but this is not very visible:// if myVar = 123 // toString converts to “123”
// if myVar = true // toString converts to “true”
// if myVar = false // toString converts to “false”
JavaScript Type Conversion Table
This table shows the result of converting different JavaScript values to Number, String, and Boolean:
| Original Value | Converted to Number | Converted to String | Converted to Boolean |
|---|---|---|---|
| false | 0 | “false” | false |
| true | 1 | “true” | true |
| 0 | 0 | “0” | false |
| 1 | 1 | “1” | true |
| “0” | 0 | “0” | true |
| “000” | 0 | “000” | true |
| “1” | 1 | “1” | true |
| NaN | NaN | “NaN” | false |
| Infinity | Infinity | “Infinity” | true |
| -Infinity | -Infinity | “-Infinity” | true |
| “” | 0 | “” | false |
| “20” | 20 | “20” | true |
| “twenty” | NaN | “twenty” | true |
| [ ] | 0 | “” | true |
| [20] | 20 | “20” | true |
| [10,20] | NaN | “10,20” | true |
| [“twenty”] | NaN | “twenty” | true |
| [“ten”,”twenty”] | NaN | “ten,twenty” | true |
| function(){} | NaN | “function(){}” | true |
| { } | NaN | “[object Object]” | true |
| null | 0 | “null” | false |
| undefined | NaN | “undefined” | false |