JavaScript Type Conversion
- Converting Strings to Numbers
- Converting Strings to Numbers
- Converting Numbers to Strings
- Converting Dates to Numbers
- Converting Numbers to Dates
- Converting Booleans to Numbers
- Converting Numbers to Booleans
Share
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
Example Code
javascriptNumber("3.14")
Number(Math.PI)
Number(" ")
Number("")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
Example Code
javascriptlet y = "5";
// y is a string
let x = + y;
// x is a numberIf the variable cannot be converted, it will still become a number, but with the value NaN (Not a Number):
Example
Example Code
javascriptlet y = "John";
// y is a string
let x = + y; // x is a number (NaN)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
Example Code
javascriptString(x) // returns a string from a number variable x
String(123) // returns a string from a number literal 123
String(100 + 23) // returns a string from a number from an expressionThe Number method toString() does the same.
Example
Example Code
javascriptx.toString()
(123).toString()
(100 + 23).toString()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.
Example
Example Code
javascriptd = new Date();
Number(d) // returns 1404568027739The date method getTime() does the same.
Example
Example Code
javascriptd = new Date();
d.getTime() // returns 1404568027739Converting Dates to Strings
The global method String() can convert dates to strings.
Example
Example Code
javascriptString(Date())The Date method toString() does the same.
Example
Example Code
javascriptDate().toString()Date Parts
Many Date Methods returns a Date part as a number.
You can use the toString() method to convert the return values to strings:
| Method | Description | Try it |
|---|---|---|
| getFullYear() | Get the four digit year (yyyy) | Try it |
| getMonth() | Get the month number (0-11) | Try it |
| getDate() | Get the day number (1-31) | Try it |
| getDay() | Get the weekday number (0-6) | Try it |
| getHours() | Get the hours (0-23) | Try it |
| getMinutes() | Get the minutes (0-23) | Try it |
| getSeconds() | Get the seconds (0-59) | Try it |
| getMilliseconds() | Get the milliseconds (0-999) | Try it |
Month is Zero Based
By default, getMonth() returns an integer between 0 (January) and 11 (December).
To get a standard 1 to 12 range, you must add 1 to the result.
Example
Example Code
javascript(date.getMonth()+1).toString();Month Name
Use the toLocaleString() method for easy formatting:
Example
Example Code
javascriptdate.toLocaleString('default', { month: 'long' });Converting Booleans to Numbers
The global method Number() can also convert booleans to numbers.
Example
Example Code
javascriptNumber(false) // returns 0
Number(true) // returns 1Converting Booleans to Strings
The global method String() can convert booleans to strings.
Example
Example Code
javascriptString(false) // returns "false"
String(true) // returns "true"The Boolean method toString() does the same.
Example
Example Code
javascriptfalse.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
Example Code
javascript5 + null // returns 5 because null is converted to 0
"5" + null // returns "5null" because null is converted to "null"
"5" + 2 // returns
"52" because 2 is converted to "2"
"5" - 2 // returns 3 because "5" is converted to 5
"5" * "2" // returns
10 because "5" and "2" are
converted to 5 and 2Automatic String Conversion
JavaScript automatically calls the variable's toString() function when you try to "output" an object or a variable:
Example
Example Code
javascriptdocument.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:
Example
Example Code
javascript// 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 | Try it |
|---|---|---|---|---|
| false | 0 | "false" | false | Try it |
| true | 1 | "true" | true | Try it |
| 0 | 0 | "0" | false | Try it |
| 1 | 1 | "1" | true | Try it |
| "0" | 0 | "0" | true | Try it |
| "000" | 0 | "000" | true | Try it |
| "1" | 1 | "1" | true | Try it |
| NaN | NaN | "NaN" | false | Try it |
| Infinity | Infinity | "Infinity" | true | Try it |
| -Infinity | -Infinity | "-Infinity" | true | Try it |
| "" | 0 | "" | false | Try it |
| "20" | 20 | "20" | true | Try it |
| "twenty" | NaN | "twenty" | true | Try it |
| [ ] | 0 | "" | true | Try it |
| [20] | 20 | "20" | true | Try it |
| [10,20] | NaN | "10,20" | true | Try it |
| ["twenty"] | NaN | "twenty" | true | Try it |
| ["ten","twenty"] | NaN | "ten,twenty" | true | Try it |
| function(){} | NaN | "function(){}" | true | Try it |
| { } | NaN | "[object Object]" | true | Try it |
| null | 0 | "null" | false | Try it |
| undefined | NaN | "undefined" | false | Try it |
Values in quotes indicate string values.
Red values indicate values (some) programmers might not expect.
Interactive Code Examples
Examples
javascriptNumber("3.14")
Number(Math.PI)
Number(" ")
Number("")JS Example 2
javascriptlet y = "5";
// y is a string
let x = + y;
// x is a numberJS Example 3
javascriptlet y = "John";
// y is a string
let x = + y; // x is a number (NaN)JS Example 4
javascriptString(x) // returns a string from a number variable x
String(123) // returns a string from a number literal 123
String(100 + 23) // returns a string from a number from an expressionJS Example 5
javascriptx.toString()
(123).toString()
(100 + 23).toString()Example 6
javascriptd = new Date();
Number(d) // returns 1404568027739