类型转换
你已经分清了 null 和 undefined。下一步：有意改变值的类型——数字变文本做标签，文本变数字做运算。这就是类型转换。本课用三个清晰助手：String()、Number()、Boolean()——外加常见的 + 意外。
JavaScript 中的类型转换是什么？
类型转换就是把值从一种类型变成另一种。优先用显式写法：String(42) 得到 "42"，Number("7") 得到 7，Boolean(0) 得到 false。若 Number 读不懂文本，结果是 NaN。+ 一侧是字符串时，常常拼接文本而不是相加——记一次日志就记住了。
转换工具表
📊 初学者类型转换
| 助手 / 思路 | 示例 | 结果 / 说明 |
|---|---|---|
String(...) |
String(42) |
"42"（文本） |
Number(...) |
Number("7") |
7（数字） |
Boolean(...) |
Boolean(0) |
false（falsy 预览） |
| 非数字文本 | Number("hello") |
NaN——typeof 仍是 "number" |
| 空 → 布尔 | Boolean("") |
false |
与 + 混用 |
5 + "2" |
"52"（拼接，不是 7） |
String() — 做成文本
需要标签或消息时，用 String(...) 包住值。数字、布尔、null、undefined 都会变成可显示或拼接的字符串。
console.log(String(42));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));
console.log(typeof String(42));
Number() — 做成数字
文本要参与运算时，用 Number(...)。纯数字字符串转换干净。非数字文本会变成 NaN。
console.log(Number("7"));
console.log(Number("3.5"));
console.log(Number(true));
console.log(Number(false));
console.log(typeof Number("7"));
Number 失败时 — NaN
Number("hello") 是 NaN。记住数字课：typeof NaN 仍是 "number"。把 NaN 当作失败转换，而不是可用数量。
console.log(Number("hello"));
console.log(typeof Number("hello"));
console.log(Number(""));
console.log(Number(null));
Number("") 和 Number(null) 会变成 0——又一个初学者陷阱。要真实数量时，请给清晰的数字字符串。
Boolean() — 从值得到是/否
Boolean(...) 把值变成 true 或 false。0、""、null、undefined、NaN 等空值变成 false。非空字符串和多数数字变成 true。完整的 truthy / falsy 列表在下一课——这里先掌握助手即可。
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hi"));
console.log(Boolean(""));
console.log(Boolean(null));
+ 的意外 — 拼接还是相加
若 + 一侧是字符串，JavaScript 常常拼接文本。要做数学运算时，先用 Number() 转换。
console.log(5 + 2);
console.log(5 + "2");
console.log(Number("5") + Number("2"));
console.log("Score: " + 10);
在页面上显示转换
转换几个值，再用 textContent 写短标签。
<!DOCTYPE html>
<html>
<head>
<title>Type conversion — labels</title>
</head>
<body>
<p id="out">…</p>
<script>
let raw = "12";
let asNumber = Number(raw);
let asText = String(asNumber);
let flag = Boolean(asNumber);
document.getElementById("out").textContent =
"raw=" + raw +
" | number=" + asNumber +
" | text=" + asText +
" | flag=" + flag;
</script>
</body>
</html>
段落用三种形式展示同一想法。把 raw 改成 "0" 并刷新：flag 变为 false，数字仍是 0。
自己动手
- 打印
String(99)、String(false)和typeof String(99)。 - 打印
Number("8")和Number("8") + 2——应是运算，不是"82"。 - 打印
Number("oops")及其typeof（NaN，仍是"number"）。 - 打印
Boolean("")和Boolean("ok")。 - 打印
3 + "4"，再用Number("3") + Number("4")重写。 - 在 HTML 演示里把
raw设为"0"，刷新并读新的flag。
常见错误
- 以为
+总会相加——有字符串时可能拼接 - 忽略
Number("hello")后的NaN仍拿去运算 - 以为本课能代替 truthy / falsy——
Boolean()只是预览 - 以为
String(null)是""——实际是文本"null" - 结果奇怪时忘记查
typeof
小结
- 类型转换：有意改变值的类型
- 优先用
String()、Number()、Boolean()表达意图 - 非数字文本 →
NaN；typeof NaN仍是"number" - 带字符串的
+常拼接——相加前先转换 - 下一课：truthy 与 falsy——哪些值在条件里像 true 或 false
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部