JavaScript 隐式类型转换，一篇就够了

如花菇凉

已于 2022-04-27 12:11:50 修改

阅读量312

点赞数 1

分类专栏： javascript 文章标签： javascript

于 2022-04-27 12:10:04 首次发布

原文链接：https://chinese.freecodecamp.org/news/javascript-implicit-type-conversion/

版权

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨了JavaScript中的隐式类型转换，包括在加减乘除操作中如何转换非Number类型，以及在字符串拼接和逻辑语句中的转换规则。通过实例解析了NaN、null、undefined、布尔值等在运算中的转换行为，并提供了相关的练习题帮助读者巩固理解。了解这些规则对于提升JavaScript编程能力至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不论你是老兵新兵，自测

  console.log('5'-2,'5'+2)
  console.log('homey' + + 'homey')
  console.log('10' + + '1')
  console.log('10' + + 1)
  let x = 3
  console.log('5'+x-x)
  console.log('5'-x+x)

如果你全对了，可以去看别的知识博客了，这块不需要再熟悉了.

众所周知，javascript是弱类的，就是会出现隐性转换的，它可以包容万物而不报错，这是javascript的缺点，但同时也是它的优点。如果不想要这种，可以用use strict严格模式。或者用typeScript.

1. 减、乘、除

我们在对各种非Number类型运用数学运算符(- * /)时，会先将非Number类型转换为Number类型。

1 - true // 0， 首先把 true 转换为数字 1， 然后执行 1 - 1
1 - null // 1,  首先把 null 转换为数字 0， 然后执行 1 - 0
1 * undefined //  NaN, undefined 转换为数字是 NaN
2 * ['5'] //  10， ['5']首先会变成 '5', 然后再变成数字 5

2. 加

记住如下

当一侧为String类型，被识别为字符串拼接，并会优先将另一侧转换为字符串类型。
当一侧为Number类型，另一侧为原始类型，则将原始类型转换为Number类型。
当一侧为Number类型，另一侧为引用类型，将引用类型和Number类型转换成字符串后拼接。

以上 3 点，优先级从高到低，即 3+‘abc’ 会应用规则 1，而 3+true会应用规则2。

123 + '123' // 123123   （规则1）
123 + null  // 123    （规则2）
123 + true // 124    （规则2）
123 + {}  // 123[object Object]    （规则3）

逻辑语句中的类型转换

当我们使用 if while for 语句时，我们期望表达式是一个Boolean，所以一定伴随着隐式类型转换。而这里面又分为两种情况：

1.单个变量

⭐️如果只有单个变量，会先将变量转换为Boolean值。

只有 null undefined '' NaN 0 false 这几个是 false，其他的情况都是 true，比如 {} , []。

2.使用 == 比较中的5条规则

⭐️根据 == 两侧的数据类型，我们总结出 5 条规则：

规则 1：NaN和其他任何类型比较永远返回false（包括和他自己）。

NaN == NaN // false

规则 2：Boolean 和其他任何类型比较，Boolean 首先被转换为 Number 类型

true == 1  // true 
true == '2'  // false, 先把 true 变成 1，而不是把 '2' 变成 true
true == ['1']  // true, 先把 true 变成 1， ['1']拆箱成 '1', 再参考规则3
true == ['2']  // false, 同上
undefined == false // false ，首先 false 变成 0，然后参考规则4
null == false // false，同上

规则 3：String和Number比较，先将String转换为Number类型。

123 == '123' // true, '123' 会先变成 123
'' == 0 // true, '' 会首先变成 0

规则 4：null == undefined比较结果是true，除此之外，null、undefined和其他任何结果的比较值都为false。

null == undefined // true
null == '' // false
null == 0 // false
null == false // false
undefined == '' // false
undefined == 0 // false
undefined == false // false

规则 5：原始类型和引用类型做比较时，引用类型会依照ToPrimitive规则转换为原始类型。

⭐️ToPrimitive规则，是引用类型向原始类型转变的规则，它遵循先valueOf后toString的模式期望得到一个原始类型。

如果还是没法得到一个原始类型，就会抛出 TypeError。

'[object Object]' == {} 
// true, 对象和字符串比较，对象通过 toString 得到一个基本类型值
'1,2,3' == [1, 2, 3] 
// true, 同上  [1, 2, 3]通过 toString 得到一个基本类型值

通过几个特别的题目来练习一下吧！

[] == ![]
    - 第一步，![] 会变成 false
	- 第二步，应用 规则2 ，题目变成： [] == 0
	- 第三步，应用 规则5 ，[]的valueOf是0，题目变成： 0 == 0
	- 所以， 答案是 true ！//

[undefined] == false
    - 第一步，应用 规则5 ，[undefined]通过toString变成 '',
	  题目变成  '' == false
	- 第二步，应用 规则2 ，题目变成  '' == 0
	- 第三步，应用 规则3 ，题目变成  0 == 0
	- 所以， 答案是 true ！
	// 但是 if([undefined]) 又是个true！

JavaScript 隐式类型转换，一篇就够了！