杰的博客

Appearance

JS 中的隐式转换 ​

JavaScript中的隐式类型转换遵循一些规律和规则，这些规则在不同的运算和上下文中有所不同。了解这些规律有助于预测和控制代码的行为。以下是一些主要的隐式类型转换规律：

1. 字符串转换（String Conversion） ​

  • 任何对象（包括数组和函数）通过String方法或在字符串上下文中被转换为字符串时，都会调用该对象的toString()方法。
  • null和undefined在字符串上下文中被转换为空字符串""。
  • Boolean对象在字符串上下文中被转换为"true"或"false"。
  • Number对象被转换为其对应的字符串表示。

  1. 数字转字符串：

    javascript
    5 + "test" // "5test"，数字 5 被转换成字符串 "5"

  2. 布尔值转字符串：

    javascript
    false + "true" // "falsetrue"，布尔值 false 被转换成字符串 "false"

  3. null转字符串：

    javascript
    null + "null" // "nullnull"，null 被转换成字符串 "null"

  4. undefined转字符串：

    javascript
    undefined + "undefined" // "undefinedundefined"，undefined 被转换成字符串 "undefined"

  5. 对象转字符串：

    javascript
    ({}) + "object" // "[object Object]object"，对象被转换成字符串 "[object Object]"

2. 数字转换（Number Conversion） ​

  • 字符串在数字上下文中被转换为数字时，会移除空白字符，然后解析剩余部分。如果字符串以合法的数字开始，则转换为该数字；否则，转换为NaN。
  • null在数字上下文中被转换为0。
  • undefined在数字上下文中被转换为NaN。
  • Boolean对象在数字上下文中被转换为1（true）或0（false）。
  • Number对象保持不变。
  • Symbol对象在数字上下文中被转换为NaN。

  1. 字符串转数字：

    javascript
    "42" + 5 // "425"，字符串 "42" 被转换成数字 42
"3.14" - 1 // 2.14，字符串 "3.14" 被转换成数字 3.14
"0" === false // true，字符串 "0" 被转换成数字 0，然后与 false（转换为 0）比较

  2. 布尔值转数字：

    javascript
    true + 5 // 6，布尔值 true 被转换成数字 1
false - 7 // -7，布尔值 false 被转换成数字 0

  3. null转数字：

    javascript
    null + 10 // 10，null 被转换成数字 0

  4. undefined转数字：

    javascript
    undefined + 20 // NaN，undefined 被转换成 NaN

  5. 对象转数字：

    javascript
    ({ value: 10 }) + 5 // 15，对象被转换成字符串，然后 "[value: 10]" 被转换成数字 NaN，但在这个例子中，我们通常使用 Object 的 valueOf 或 toString 方法来获取值

3. 布尔转换（Boolean Conversion） ​

  • 字符串在布尔上下文中被转换为false，除非字符串是非空的，此时转换为true。
  • null和undefined在布尔上下文中被转换为false。
  • Number对象被转换为false，除非该数字是0、NaN或-0，这些被转换为false，其他数字被转换为true。
  • Boolean对象保持不变。
  • Symbol对象在布尔上下文中被转换为true。

  1. 字符串转布尔值：

    javascript
    "" ? false : true // false，空字符串转换成布尔值 false
"non-empty" ? false : true // true，非空字符串转换成布尔值 true

  2. 数字转布尔值：

    javascript
    0 ? false : true // false，数字 0 转换成布尔值 false
1 ? false : true // true，数字 1 转换成布尔值 true

  3. null转布尔值：

    javascript
    null ? false : true // false，null 转换成布尔值 false

  4. undefined转布尔值：

    javascript
    undefined ? false : true // false，undefined 转换成布尔值 false

  5. 对象转布尔值：

    javascript
    ({}) ? false : true // true，对象转换成布尔值 true

4. 相等性比较（Equality Comparison） ​

  • 在相等性比较中，如果两个操作数类型不同，JavaScript会尝试将它们转换为相同的类型，然后进行比较。
  • null和undefined相等，都转换为对方。
  • String和Number比较时，字符串会被转换为数字。
  • Boolean对象比较时，会被转换为数字（true转换为1，false转换为0）。
  • 对象（包括数组和函数）和非对象比较时，对象会被转换为字符串，然后进行比较。

  1. 字符串与数字的比较：

    javascript
    "5" == 5 // true，字符串 "5" 被转换成数字 5 后与 5 比较

  2. 布尔值与数字的比较：

    javascript
    true == 1 // true，布尔值 true 被转换成数字 1 后与 1 比较
false == 0 // true，布尔值 false 被转换成数字 0 后与 0 比较

  3. null与数字的比较：

    javascript
    null == 0 // true，null 被转换成数字 0 后与 0 比较

  4. undefined与数字的比较：

    javascript
    undefined == 0 // false，undefined 被转换成 NaN，NaN 与任何值（包括 0）比较都返回 false

5. 严格相等性比较（===） ​

  • 在严格相等性比较中，不会发生类型转换。如果两个操作数类型不同，比较结果为false。