JavaScript: JavaScript 类型转换
最后更新：2026-10-13
类型转换是 JavaScript 里最容易踩坑的部分。用户在表单里输入的数字，拿过来一看——居然是字符串！"5" + 3 的结果不是 8 而是 "53"，这种"惊喜"每个新手都遇到过。
1. 类型转换的方式与陷阱
HTML 表单的 input 值永远是字符串，即使 type="number" 也不例外。算术运算前必须转换类型，否则结果不可预料。
HTML
<div id="demo"></div>
<script>
const input = "42";
const result = input + 8;
document.getElementById("demo").textContent = 'input + 8 = ' + result + '（类型：' + typeof result + '）';
</script>
(2) 显式转换：String()、Number()、Boolean()
明确调用转换函数，意图清晰，推荐使用：
| 转换 | 写法 | 示例 |
|---|---|---|
| 转字符串 | String(value) |
String(123) → "123" |
| 转数字 | Number(value) |
Number("42") → 42 |
| 转布尔 | Boolean(value) |
Boolean(0) → false |
(3) 隐式转换：+ 拼接和 == 比较
JavaScript 引擎自动进行的类型转换，经常出人意料：
+运算符：只要有一边是字符串，另一边就被转成字符串拼接==比较：会先转换类型再比较，规则复杂难记
HTML
<script>
console.log("5" + 3); // "53"（数字3被转成字符串）
console.log("5" - 3); // 2（字符串"5"被转成数字）
console.log("" == 0); // true（空字符串被转成0）
console.log(null == undefined); // true
</script>
(4) 常见陷阱
这些是面试和实际开发中的高频坑：
HTML
<script>
console.log("5" + 3); // "53" + 遇到字符串就拼接
console.log("5" - 3); // 2 - 只做减法，字符串转数字
console.log("5" * 3); // 15 * 也转数字
console.log(true + 1); // 2 true 转 1
console.log(false + 1); // 1 false 转 0
console.log("" + 0); // "0" 数字转字符串
console.log("" == 0); // true 两侧都转数字
console.log(null == 0); // false null 只和 undefined 松等
console.log("0" == false); // true 都转成 0
</script>
记住一条：+ 遇字符串就拼，其余算术运算遇字符串就转数字。
(5) Number() 转换规则
| 输入 | 结果 |
|---|---|
Number("42") |
42 |
Number("3.14") |
3.14 |
Number("") |
0（空字符串 → 0，经典坑） |
Number(" ") |
0（纯空格也 → 0） |
Number("42px") |
NaN（含非数字字符 → NaN） |
Number(true) |
1 |
Number(false) |
0 |
Number(null) |
0 |
Number(undefined) |
NaN |
空字符串转成 0 而不是 NaN，这个设计坑了无数人。
(6) Boolean() 转换规则（falsy 值）
以下 6 个值转布尔为 false，称为 falsy 值，其余全部为 true：
HTML
<script>
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
</script>
注意：Boolean("0") 是 true，Boolean([]) 也是 true——非空字符串和非空数组都是 truthy。
(7) === 严格相等 vs == 宽松相等
| 运算符 | 行为 | 建议 |
|---|---|---|
=== |
类型不同直接 false | 始终使用 |
== |
先转换类型再比较 | 避免使用 |
HTML
<script>
console.log(5 === "5"); // false（类型不同）
console.log(5 == "5"); // true（字符串转数字后再比）
console.log(null === undefined); // false
console.log(null == undefined); // true
</script>
铁律：永远用 ===，不用 ==。 除非你明确知道自己在做什么（比如 value == null 可以同时匹配 null 和 undefined）。
▶ 示例：类型转换对比
▶ 试一试▶ 示例：Boolean() falsy 值速查
▶ 试一试▶ 示例：表单输入计算
▶ 试一试▶ 示例：=== vs == 对比
▶ 试一试❓ 常见问题
Q
"5" - 3 为什么等于 2 而不是报错？A 因为
- 运算符只做数学运算，JavaScript 会自动把字符串转成数字。只有 + 运算符有歧义（既可以是加法也可以是拼接），所以它遇到字符串就拼。其他运算符（-、*、/、%）一律转数字。Q
Number("") 为什么是 0 而不是 NaN？A 这是历史遗留设计。空字符串被认为"没有数字"，等价于 0。这导致表单留空时
Number(input.value) 得到 0 而不是 NaN，很容易误导后续逻辑。建议用 input.value.trim() === "" 先检查空值。Q
null == 0 为什么是 false？A
null 在 == 比较中只与 undefined 互相转换，不与数字转换。所以 null == 0 是 false，但 null == undefined 是 true。这是规范规定的特例。📖 小节
- 字符串转数字：
Number()、parseInt()、parseFloat()，注意parseInt会忽略非数字后缀 - 数字转字符串：
String(n)、n.toString()、n.toFixed(2)控制小数位数 - 隐式转换由 JS 自动触发，
==会类型转换（推荐用===），+遇字符串变拼接 - 常见陷阱：
"5" - 3得 2、"5" + 3得 "53"、null == undefined为 true - 转 Boolean：
!!value或Boolean(value)，六个假值：false/0/""/null/undefined/NaN
📝 作业
- 不运行代码，预测以下表达式的结果：
"10" + 5、"10" - 5、"10" * "2"、true + true、Boolean("false")、"1" == 1、"1" === 1。然后写代码验证。 - 写一个
calculateBMI(weight, height)函数，参数来自表单输入（字符串），函数内部先转换类型再计算 BMI，处理空输入和无效输入（返回提示信息）。 - 写一个
strictCompare(a, b)函数，只用===比较，如果类型不同直接返回"类型不同，无法比较"，类型相同则返回比较结果。
