JS常见的隐式类型转换

小小小小宇
127 阅读2分钟

JavaScript 的隐式类型转换（也称为类型强制转换）是在特定情况下自动发生的。理解这些规则对于避免意外行为和调试代码非常重要。

隐式类型转换的规则

  1. 字符串转换：通过 + 运算符将非字符串类型转换为字符串。
  2. 数字转换：通过算术运算符（如 -、*、/、%）将非数字类型转换为数字。
  3. 布尔转换：通过逻辑运算符（如 &&、||、!）将非布尔类型转换为布尔值。

详细代码讲解和30项隐式类型转换的例子

以下是一些常见的隐式类型转换的例子：

  1. 字符串转换
console.log('5' + 3); // "53"
console.log('hello' + true); // "hellotrue"
console.log('' + null); // "null"
console.log('' + undefined); // "undefined"
console.log('' + {}); // "[object Object]"
  1. 数字转换
console.log('5' - 3); // 2
console.log('5' * 3); // 15
console.log('5' / 2); // 2.5
console.log('5' % 2); // 1
console.log('5' - true); // 4
console.log('5' * false); // 0
console.log('5' / null); // Infinity
console.log('5' % undefined); // NaN
  1. 布尔转换
console.log(!0); // true
console.log(!''); // true
console.log(!null); // true
console.log(!undefined); // true
console.log(!NaN); // true
console.log(!{}); // false
console.log(![]); // false
console.log(!'false'); // false
console.log(!!'false'); // true
console.log(!!''); // false
console.log(!!0); // false
console.log(!!1); // true
console.log(!!-1); // true
console.log(!!NaN); // false
console.log(!!null); // false
console.log(!!undefined); // false
  1. 比较运算符
console.log('5' == 5); // true
console.log('' == false); // true
console.log(null == undefined); // true
console.log([] == false); // true
console.log([] == ''); // true
console.log([1] == 1); // true
console.log([1, 2] == '1,2'); // true
console.log({} == '[object Object]'); // false
console.log({} == {}); // false
console.log([] == []); // false
  1. 其他运算符
console.log(null + 1); // 1
console.log(undefined + 1); // NaN
console.log([] + 1); // "1"
console.log([1, 2] + 1); // "1,21"
console.log({} + 1); // "1"
console.log(true + false); // 1
console.log(true + true); // 2
console.log(false + false); // 0
console.log(false + true); // 1

  1. 字符串转换

    • 当使用 + 运算符时，JavaScript 会将操作数转换为字符串并进行连接。
    • 例如，'5' + 3 结果为 '53'，因为 3 被转换为字符串 '3'。

  2. 数字转换

    • 当使用算术运算符（如 -、*、/、%）时，JavaScript 会将操作数转换为数字并进行运算。
    • 例如，'5' - 3 结果为 2，因为 '5' 被转换为数字 5。

  3. 布尔转换

    • 当使用逻辑运算符（如 &&、||、!）时，JavaScript 会将操作数转换为布尔值。
    • 例如，!0 结果为 true，因为 0 被转换为 false，然后取反为 true。

  4. 比较运算符

    • 当使用 == 比较时，JavaScript 会进行类型转换以便进行比较。
    • 例如，'5' == 5 结果为 true，因为 '5' 被转换为数字 5。

  5. 其他运算符

    • 例如，null + 1 结果为 1，因为 null 被转换为 0，然后 0 + 1 结果为 1。

通过理解这些隐式类型转换的规则和例子，可以帮助你编写更健壮的 JavaScript 代码，并避免一些常见的陷阱和错误。

参考文献: 那些你不知道的隐式类型转换 (qq.com)

avatar
文章
阅读
粉丝