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
- 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 itPlease 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 itYou 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
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"
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~ 