Open Playground
JS TutorialLesson #110

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

javascript
Try it Yourself
Number("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:

MethodDescription
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

javascript
Try it Yourself
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 with the value NaN (Not a Number):

Example

Example Code

javascript
Try it Yourself
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 to strings.

It can be used on any type of numbers, literals, variables, or expressions:

Example

Example Code

javascript
Try it Yourself
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 Number method toString() does the same.

Example

Example Code

javascript
Try it Yourself
x.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:

MethodDescription
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

javascript
Try it Yourself
d = new Date();
Number(d)          // returns 1404568027739

The date method getTime() does the same.

Example

Example Code

javascript
Try it Yourself
d = new Date();
d.getTime()        // returns 1404568027739

Converting Dates to Strings

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

Example

Example Code

javascript
Try it Yourself
String(Date())

The Date method toString() does the same.

Example

Example Code

javascript
Try it Yourself
Date().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:

MethodDescriptionTry 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
Try it Yourself
(date.getMonth()+1).toString();

Month Name

Use the toLocaleString() method for easy formatting:

Example

Example Code

javascript
Try it Yourself
date.toLocaleString('default', { month: 'long' });
Learn More: > JavaScript Date Methods

Converting Booleans to Numbers

The global method Number() can also convert booleans to numbers.

Example

Example Code

javascript
Try it Yourself
Number(false)     // returns 0

Number(true)      // returns 1

Converting Booleans to Strings

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

Example

Example Code

javascript
Try it Yourself
String(false)      // returns "false"

String(true)       // returns "true"

The Boolean method toString() does the same.

Example

Example Code

javascript
Try it Yourself
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

Example Code

javascript
Try it Yourself
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 calls the variable's toString() function when you try to "output" an object or a variable:

Example

Example Code

javascript
Try it Yourself
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:

Example

Example Code

javascript
Try it Yourself
// 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 ValueConverted to NumberConverted to StringConverted to BooleanTry it
false0"false"falseTry it
true1"true"trueTry it
00"0"falseTry it
11"1"trueTry it
"0"0"0"trueTry it
"000"0"000"trueTry it
"1"1"1"trueTry it
NaNNaN"NaN"falseTry it
InfinityInfinity"Infinity"trueTry it
-Infinity-Infinity"-Infinity"trueTry it
""0""falseTry it
"20"20"20"trueTry it
"twenty"NaN"twenty"trueTry it
[ ]0""trueTry it
[20]20"20"trueTry it
[10,20]NaN"10,20"trueTry it
["twenty"]NaN"twenty"trueTry it
["ten","twenty"]NaN"ten,twenty"trueTry it
function(){}NaN"function(){}"trueTry it
{ }NaN"[object Object]"trueTry it
null0"null"falseTry it
undefinedNaN"undefined"falseTry it

Values in quotes indicate string values.

Red values indicate values (some) programmers might not expect.



Interactive Code Examples

Examples

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
Number("3.14")

Number(Math.PI)

Number(" ")

Number("")

JS Example 2

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
let y = "5";     
// y is a string

let x = + y;      
// x is a number

JS Example 3

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
let y = "John";  
// y is a string

let x = + y;      // x is a number (NaN)

JS Example 4

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
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

JS Example 5

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
x.toString()
(123).toString()
(100 + 23).toString()

Example 6

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
d = new Date();
Number(d)          // returns 1404568027739