JavaScript Type Conversion

• 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 of a different data type in two ways:

• Using a JavaScript function
• Automatically by JavaScript itself

Converting Strings to Numbers

The global method Number() converts a variable (or value) into a number.

A numeric string (such as “3.14”) is converted to a number (3.14).

An empty string (like “”) is converted to 0.

A non-numeric string (like “John”) is converted to NaN (Not a Number).

Examples

The following will be converted:

Number(“3.14”) Number(Math.PI) Number(” “) Number(“”)

The following will not be converted:

Number(“99 88”) Number(“John”)

Number Methods

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 into a number.

Example

let y = “5”;      // y is a string let x = + y;      // x is a number

If the variable cannot be converted, it will still become a number, but its value will be NaN (Not a Number).

Example

let 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 into strings.

It can be applied to any type of number, including literals, variables, or expressions.

Example

String(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 expression

The toString() method of the Number object performs the same function.

Example

x.toString() (123).toString() (100 + 23).toString()

More Methods

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 into numbers.

d = new Date(); Number(d)          // returns 1404568027739

The getTime() method of the Date object performs the same function.

d = new Date(); d.getTime()        // returns 1404568027739

Converting Dates to Strings

The global method String() can convert dates into strings.

String(Date())  // returns “Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)”

The toString() method of the Date object does the same.

Example

Date().toString()  // returns “Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)”

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 into numbers.

Number(false)     // returns 0 Number(true)      // returns 1

Converting Booleans to Strings

The global method String() can convert booleans into strings.

String(false)      // returns “false” String(true)       // returns “true”

The toString() method of the Boolean object performs the same function.

false.toString()   // returns “false” true.toString()    // returns “true”

Automatic Type Conversion

When JavaScript attempts to perform operations on an incorrect data type, it will try to convert the value to a suitable type.

The outcome is not always what you might expect.

5 + 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 2

Automatic String Conversion

JavaScript automatically invokes the variable’s toString() function when you attempt to “output” an object or 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 less noticeable.

// 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 illustrates the results of converting various 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

Values in quotes represent string values.

Red values highlight results that some programmers may not anticipate.