JavaScript type...LOGIN

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:

    null
  • undefined

##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:

MethodDescription
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:

MethodDescription
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:

MethodDescription
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"


Next Section
<!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>
submitReset Code
ChapterCourseware