JavaScript 类型转换
JavaScript基础 2022-05-13 16:24:06小码哥的IT人生shichen
JavaScript 类型转换
JavaScript 类型转换表
下表显示了将不同的 JavaScript 值转换为 Number、String 和 Boolean 的结果：
| 原始值 | 转换为数字 | 转换为字符串 | 转换为布尔值 | 试一试 |
|---|---|---|---|---|
| false | 0 | "false" | false | 试一试 |
| true | 1 | "true" | true | 试一试 |
| 0 | 0 | "0" | false | 试一试 |
| 1 | 1 | "1" | true | 试一试 |
| "0" | 0 | "0" | 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 | 试一试 |
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>把 false 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = false;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将 true 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = true;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将数字 0 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将数字 1 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将字符串 "0" 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = "0";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将字符串 "1" 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = "1";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将 NaN 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = NaN;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将 Infinity 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将 -Infinity 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = -Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将空字符串转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = "";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将数字字符串转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = "20";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将文本字符串转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = "twenty";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将空数组转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = [];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将拥有一个数字元素的数组转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = [20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将拥有两个数字元素的数组转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = [10,20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将拥有一个字符串元素的数组转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = ["twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将拥有两个字符串元素的数组转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = ["ten","twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将函数转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = function(){};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将对象转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = {};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将 null 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = null;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将 undefined 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = undefined;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注意：引号 ("") 中的值表示字符串值。红色值表示程序员可能不希望的值。
如需更多 JavaScript 类型转换的知识，请阅读我们的 JavaScript 类型转换教程。
