JavaScript type conversion

Number() converts to a number, String() converts to a string, and Boolean() converts to a Boolean value.

JavaScript Data Types

There are 5 different data types in JavaScript:

string
number
boolean
object
function

##3 Object types:

Object
Date
Array

##2 data types that contain no values:

##typeof operator

You can use the typeof operator to view the data type of a JavaScript variable.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p> typeof 操作符返回变量、对象、函数、表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
    typeof "john" + "<br>" +
    typeof 3.14 + "<br>" +
    typeof NaN + "<br>" +
    typeof false + "<br>" +
    typeof [1,2,3,4] + "<br>" +
    typeof {name:'john', age:34} + "<br>" +
    typeof new Date() + "<br>" +
    typeof function () {} + "<br>" +
    typeof myCar + "<br>" +
    typeof null;
</script>
</body>
</html>

Run the program and try it

Please note:

The data type of NaN is number

The data type of array (Array) is object
The data type of date (Date) is object
The data type of null is object
The data type of undefined variables is undefined
If the object is a JavaScript Array or JavaScript Date, we cannot judge them through typeof Type, because they all return Object.

constructor property

The constructor property returns the constructor of all JavaScript variables.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p> constructor 属性返回变量或对象的构造函数。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
    "john".constructor + "<br>" +
    (3.14).constructor + "<br>" +
    false.constructor + "<br>" +
    [1,2,3,4].constructor + "<br>" +
    {name:'john', age:34}.constructor + "<br>" +
    new Date().constructor + "<br>" +
    function () {}.constructor;
</script>
</body>
</html>

Run the program and try it

You can use the constructor property to see if the object is an array (containing the string "Array"):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p>判断是否为数组。</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>

Run the program and try it

You can use the constructor property to see whether the object is a date (containing the string "Date") :

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p>判断是否为日期。</p>
<p id="demo"></p>
<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>
</body>
</html>

Run the program to try it

JavaScript type conversion

JavaScript variables can be converted to new variables or other data types:

By using JavaScript functions

Automatic conversion through JavaScript itself

Convert numbers to strings

Global method String() can convert numbers Convert to string.

This method can be used for any type of numbers, letters, variables, expressions:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p> String() 方法可以将数字转换为字符串。</p>
<p id="demo"></p>
<script>
    var x = 123;
    document.getElementById("demo").innerHTML =
            String(x) + "<br>" +
            String(123) + "<br>" +
            String(100 + 23);
</script>
</body>
</html>

Run the program to try it

Number method toString() also has the same effect.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p>toString() 方法将数字转换为字符串。</p>
<p id="demo"></p>
<script>
    var x = 123;
    document.getElementById("demo").innerHTML =
            x.toString() + "<br>" +
            (123).toString() + "<br>" +
            (100 + 23).toString();
</script>
</body>
</html>

Run the program to try

How to convert numbers to strings:

Method	Description
toExponential()	Convert the value of the object to Exponential counting method.
toFixed()	Convert the number to a string, and the result will have the specified number of digits after the decimal point.
toPrecision()	Format the number to the specified length.

Convert Boolean value to string

Global method String() can convert Boolean value to string.

String(false) // Returns "false"
String(true) // Returns "true"

Boolean method toString() also has the same effect .

false.toString() // Return "false"
true.toString() // Return "true"

Convert the date to String

Global method String() can convert date to string.

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

Date method toString( ) has the same effect.

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

The date is converted to String function:

Method	Description
getDate()	From The Date object returns the day of the month (1 ~ 31).
getDay()	Returns the day of the week (0 ~ 6) from the Date object.
getFullYear()	Returns the year as a four-digit number from a Date object.
getHours()	Returns the hours (0 ~ 23) of the Date object.
getMilliseconds()	Returns the milliseconds (0 ~ 999) of the Date object.
getMinutes()	Returns the minutes (0 ~ 59) of the Date object.
getMonth()	Returns the month (0 ~ 11) from the Date object.
getSeconds()	Returns the number of seconds in the Date object (0 ~ 59).
getTime()	Returns the number of milliseconds since January 1, 1970.

Convert a string to a number

Global method Number() can convert a string to a number.

Strings containing numbers (such as "3.14") are converted to numbers (such as 3.14).

Empty strings are converted to 0.

Other strings will be converted to NaN (not a number).

Number("3.14") // Return 3.14
Number(" ") // Return 0
Number("") // Return 0
Number("99 88") // Return NaN

Method to convert string to number:

Method	Description
parseFloat()	Parse a string and return a floating point number.
parseInt()	Parse a string and return an integer.

Unary operator+

Operator + can be used to convert variables to numbers:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p> typeof 操作符返回变量或表达式的类型。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var y = "5";
        var x = + y;
        document.getElementById("demo").innerHTML =
                typeof y + "<br>" + typeof x;
    }
</script>
</body>
</html>

Run the program to try it

If the variable cannot be converted, it will still be a number, but the value will be NaN (not a number):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p> typeof 操作符返回变量或表达式的类型。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var y = "John";
    var x = + y;
    document.getElementById("demo").innerHTML =
typeof x + "<br>" + x;
}
</script>
</body>
</html>

Run the program to try it

Convert Boolean value to number

Global method Number() can convert a Boolean value into a number.

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

Convert date to number

Global method Number() can convert date to number.

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

The date method getTime() also has the same effect.

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

Automatic conversion of type

When JavaScript tries to operate on a "wrong" data type, it will automatically convert to " correct" data type.

The following output result is not what you expect:

5 + null // Return 5 null Convert to 0
"5" + null // Return "5null" null Convert to "null"
"5" + 1 // Return "51" 1 Convert to "1"
"5" - 1 // Return 4 "5" Convert to 5

Automatically converted to string

When you try to output an object or a variable JavaScript will Automatically call the toString() method of the variable:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"} / / toString is converted to "[object Object]"
// if myVar = [1,2,3,4] // toString is converted to "1,2,3,4"
// if myVar = new Date() // toString is converted to "Fri Jul 18 2014 09:08:55 GMT+0200"

Numbers and Boolean values are also often converted to each other:

// if myVar = 123 // toString is converted to "123"
// if myVar = true // toString is converted to "true"
// if myVar = false // toString is converted to "false"

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网(php.cn)</title> </head> <body> typeof 操作符返回变量、对象、函数、表达式的类型。 <script> document.getElementById("demo").innerHTML = typeof "john" + " " + typeof 3.14 + " " + typeof NaN + " " + typeof false + " " + typeof [1,2,3,4] + " " + typeof {name:'john', age:34} + " " + typeof new Date() + " " + typeof function () {} + " " + typeof myCar + " " + typeof null; </script> </body> </html>

submit Reset Code

Automatic operation

JavaScript type conversion

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]