JavaScript 类型转换
Key Points
- JavaScript 类型转换包括显式转换（如使用
Number()、String()、Boolean()）和隐式转换（如算术操作或字符串连接）。 - 显式转换规则明确：
Number()将null转为0，undefined转为NaN；String()将对象转为"[object Object]"；Boolean()将空值（如null、undefined）转为false。 - 隐式转换常见于不同类型操作，需注意可能导致意外结果，如
"5" + 1结果为"51"。 - 类型转换规则复杂，建议使用严格比较
===以避免问题。
显式类型转换
显式类型转换通过函数手动完成，例如：
Number()：将值转为数字，Number("3.14")返回3.14，Number(null)返回0，Number(undefined)返回NaN。String()：将值转为字符串，String(123)返回"123"，String(null)返回"null"。Boolean()：将值转为布尔值，Boolean("")返回false，Boolean({})返回true。
隐式类型转换
JavaScript 在某些操作中自动转换类型，例如：
- 算术操作：
"5" - 2返回3（字符串转为数字）。 - 字符串连接：
"5" + 1返回"51"（数字1转为字符串）。 - 布尔上下文：
if (0)视为false，if ("")也为false。
类型转换表
以下是常见值的转换示例：
| 原值 | 转为数字 | 转为字符串 | 转为布尔值 |
|---|---|---|---|
false | 0 | “false” | false |
true | 1 | “true” | true |
| 0 | 0 | “0” | false |
| “0” | 0 | “0” | true |
| “” | 0 | “” | false |
null | 0 | “null” | false |
undefined | NaN | “undefined” | false |
详细调研笔记
JavaScript 类型转换是其动态类型语言特性的重要部分，涉及显式和隐式两种方式。以下是基于网络搜索和页面浏览的结果整理，旨在提供全面且深入的解释。
1. 背景与概述
JavaScript 是一种弱类型语言，变量没有预先确定的类型，值的类型由其当前值决定。类型转换分为显式（手动调用函数）和隐式（自动由引擎处理）两种形式。理解类型转换规则有助于避免代码中的意外行为，尤其是在处理不同类型的值时。
2. 显式类型转换
显式类型转换通过调用特定的函数完成，主要包括 Number()、String() 和 Boolean()。以下是详细规则：
2.1 Number() 转换
- 规则：
- 数字：保持不变，例如
Number(324)返回324。 - 字符串：如果为有效数字字符串，则转换为数字，例如
Number("324")返回324；否则返回NaN，例如Number("324abc")返回NaN。 - 空字符串：转换为
0，例如Number("")返回0。 - 布尔值：
true转换为1，false转换为0，例如Number(true)返回1。 undefined：转换为NaN，例如Number(undefined)返回NaN。null：转换为0，例如Number(null)返回0。- 对象：一般转换为
NaN，但单元素数组例外，例如Number([5])返回5，Number({a: 1})返回NaN。 - 转换过程：对于对象，先调用
valueOf()方法，如果返回非对象值则使用该值；否则调用toString()，如果仍为对象则报错。
2.2 String() 转换
- 规则：
- 数字：转换为字符串，例如
String(123)返回"123"。 - 字符串：保持不变，例如
String("abc")返回"abc"。 - 布尔值：
true转换为"true"，false转换为"false"，例如String(true)返回"true"。 undefined：转换为"undefined"，例如String(undefined)返回"undefined"。null：转换为"null"，例如String(null)返回"null"。- 对象：转换为
"[object Object]"，例如String({a: 1})返回"[object Object]"；数组转换为逗号分隔的字符串，例如String([1, 2, 3])返回"1,2,3"。 - 转换过程：先调用
toString()，如果返回非对象值则使用该值；否则调用valueOf()，如果仍为对象则报错。
2.3 Boolean() 转换
- 规则：
- 转换为
false的值包括：undefined、null、+0、-0、NaN、空字符串""。 - 其他所有值转换为
true，包括对象（即使为空）、非空数组、new Boolean(false)等。 - 示例：
Boolean({})返回true，Boolean([])返回true，Boolean(new Boolean(false))返回true。
3. 隐式类型转换
隐式类型转换由 JavaScript 引擎在特定上下文中自动触发，主要发生在以下场景：
- 不同类型的值进行操作，例如算术运算或字符串连接。
- 非布尔值用在布尔上下文中，例如
if语句。 - 使用一元运算符（如
+、-）。
3.1 到布尔值的转换
- 使用
Boolean()的规则，例如if (0)相当于if (Boolean(0))返回false，if ("")返回false。
3.2 到字符串的转换
- 主要发生在字符串连接操作中，例如
'5' + 1返回"51"，因为1被转换为字符串"1"。 - 非字符串值通过
String()转换，例如'5' + {}返回"5[object Object]"。
3.3 到数字的转换
- 发生在大多数算术操作中（除字符串连接外），例如
'5' - '2'返回3，'5' * '2'返回10。 - 使用
Number()的规则，例如null + 1返回1（null转为0），undefined + 1返回NaN。
4. 类型转换表
以下表格总结了常见值的转换结果，基于 W3School 和 Runoob 的内容：
| 原值 | 转为数字 | 转为字符串 | 转为布尔值 |
|---|---|---|---|
false | 0 | “false” | false |
true | 1 | “true” | true |
| 0 | 0 | “0” | false |
| 1 | 1 | “1” | true |
| “0” | 0 | “0” | true |
| “000” | 0 | “000” | true |
| “1” | 1 | “1” | true |
NaN | NaN | “NaN” | false |
Infinity | Infinity | “Infinity” | true |
-Infinity | -Infinity | “-Infinity” | true |
| “” | 0 | “” | false |
| “20” | 20 | “20” | true |
| “Runoob” | NaN | “Runoob” | true |
| [] | 0 | “” | true |
| [20] | 20 | “20” | true |
| [10,20] | NaN | “10,20” | true |
| [“Runoob”] | NaN | “Runoob” | true |
| {a:1} | NaN | “[object Object]” | true |
5. 最佳实践与常见陷阱
- 最佳实践：
- 使用
===和!==进行严格比较，避免==和!=带来的类型转换问题，例如null == undefined为true，但null === undefined为false。 - 在需要明确类型时，使用显式转换，例如
Number("5")而不是"5" - 0。 - 常见陷阱：
- 注意
null和undefined的不同行为：null在数值上下文中为0，在字符串上下文中为"null"；undefined在数值上下文中为NaN，在字符串上下文中为"undefined"。 - 对象转换时，JavaScript 会先调用
valueOf()，如果返回对象则调用toString()，可能导致意外结果，例如String({a: 1})返回"[object Object]"。
6. 历史与争议
类型转换规则的复杂性是 JavaScript 设计中的一个争议点，尤其是 typeof null === "object" 的历史遗留问题（详见之前的 typeof 相关讨论）。虽然社区曾提议修正，但因兼容性问题未实现。类型转换的灵活性带来便利，但也增加了调试难度。