让人头疼的隐式转换？必然也有迹可循。

月夕
549 阅读15分钟

JavaScript 中的类型转换情况复杂，容易出错，饱受争议但又应用广泛

请欣赏下面的图片

奇葩的 javascript

上图是否让你觉得心旷神怡？反正我是没有。

下面我们来看看 JavaScript 为什么会出现这些情况？他们之间又是遵守什么样的规律呢？

前言

将值从一种类型转换为另一种类型通常称为类型转换。如果我们没有手动指定转换过程而被转换，称为隐式转换

ES6 前，JavaScript 共有六种数据类型：Undefined、Null、Boolean、Number、String、Object。ES6 后相继提出了 Symbol 和 BigInt 类型。

显式转换的结果

显式转换表示我们明确的让 JavaScript 把某个值转化为某一个类型后的值，然后我们来看看将不同的值转化为不同类型的值会得到那些结果

转 Boolean

Boolean 类型只有两个值，分别是 true 和 false。所以它们的转换规则也很简单

我们使用 Boolean 函数将类型转换成布尔类型

在 JavaScript 中，只有 7 种值可以被转换成 false，分别是 false 、 undefined 、 unll 、 数值0 、 NaN 、 空字符串'' 、 BigInt0n

除以上的其他都会被转换成 true。

ECMAScript2020相关规范

附上官方给出的转换规则表

参数类型返回
Undefined返回 false。
Null返回 false。
Boolean返回参数（不会转换）。
Number如果参数是 +0, -0, 或者 NaN, 返回 false; 否则返回 true 。
String如果参数的空字符串 (长度为0), 返回 false; 否则返回 true 。
Symbol返回 true 。
BigInt如果参数是 0n, 返回 false; 否则返回 true 。
Object返回 true 。
console.log(Boolean()) // false

console.log(Boolean(false)) // false

console.log(Boolean(undefined)) // false
console.log(Boolean(null)) // false

console.log(Boolean(+0)) // false
console.log(Boolean(-0)) // false
console.log(Boolean(NaN)) // false

console.log(Boolean("")) // false

console.log(Boolean(0n)) // false

转 Number

参数类型结果
Undefined返回 NaN。
Null返回 +0。
Boolean如果 argument 是 true，返回 1。如果 argument 是 false，返回 +0。
Number返回 argument (不转换)。
String比较复杂，看例子。ECMAScript 是通过词法语法来制定的规则
Symbol抛出一个 TypeError 异常。
Object先通过 ToPrimitive 转换对象，然后再通过 ToNumber 转换其结果返回

让我们写几个例子验证一下：

console.log(Number()) // +0

console.log(Number(undefined)) // NaN
console.log(Number(null)) // +0

console.log(Number(false)) // +0
console.log(Number(true)) // 1

console.log(Number("123")) // 123
console.log(Number("-123")) // -123
console.log(Number("1.2")) // 1.2
console.log(Number("000123")) // 123
console.log(Number("-000123")) // -123

console.log(Number("0x11")) // 17

console.log(Number("")) // 0
console.log(Number(" ")) // 0

console.log(Number("123 123")) // NaN
console.log(Number("foo")) // NaN
console.log(Number("100a")) // NaN

如果通过 Number 转换函数传入一个字符串，它会试图将其转换成一个整数或浮点数，而且会忽略所有前导的 0，如果有一个字符不是数字，结果都会返回 NaN，鉴于这种严格的判断，我们一般还会使用更加灵活的 parseInt 和 parseFloat 进行转换。

parseInt 只解析整数，parseFloat 则可以解析整数和浮点数，如果字符串前缀是 "0x" 或者"0X"，parseInt 将其解释为十六进制数，parseInt 和 parseFloat 都会跳过任意数量的前导空格，尽可能解析更多数值字符，并忽略后面的内容。如果第一个非空格字符是非法的数字直接量，将最终返回 NaN：

console.log(parseInt("3 abc")) // 3
console.log(parseFloat("3.14 abc")) // 3
console.log(parseInt("-12.34")) // -12
console.log(parseInt("0xFF")) // 255
console.log(parseFloat(".1")) // 0.1
console.log(parseInt("0.1")) // 0

转 String

参数类型结果
Undefined返回 "undefined".
Null返回 "null".
Boolean如果 argument 是 true, 返回 "true".如果 argument 是 false, 返回 "false".
Number返回 NumberToString(argument).
String返回 argument.
Symbol抛出一个 TypeError 异常.
Object返回 ToString(ToPrimitive(argument, hint String)v).v

贴一下 ECMAScript 对 NumberToString 方法的定义ecma262.docschina.org/#sec-tostri…

  1. If m is NaN, return the String "NaN".
  2. If m is +0 or -0, return the String "0".
  3. If m is less than zero, return the string-concatenation of "-" and ! NumberToString(-m).
  4. If m is +∞, return the String "Infinity".
  5. Otherwise, let n, k, and s be integers such that k ≥ 1, 10k-1 ≤ s < 10k, the Number value for s × 10n-k is m, and k is as small as possible. Note that k is the number of digits in the decimal representation of s, that s is not divisible by 10, and that the least significant digit of s is not necessarily uniquely determined by these criteria.
  6. If k≤n≤ 21, return the string-concatenationof:
    • the code units of the k digits of the decimal representation of s (in order, with no leading zeroes)
    • n-k occurrences of the code unit 0x0030 (DIGIT ZERO)
  7. If 0 < n ≤ 21, return the string-concatenationof:
    • the code units of the most significant n digits of the decimal representation of s
    • the code unit 0x002E (FULL STOP)
    • the code units of the remaining k-n digits of the decimal representation of s
  8. If -6 < n ≤ 0, return the string-concatenation of:
    • the code unit 0x0030 (DIGIT ZERO)
    • the code unit 0x002E (FULL STOP)
    • -n occurrences of the code unit 0x0030 (DIGIT ZERO)
    • the code units of the k digits of the decimal representation of s
  9. Otherwise, if k = 1, return the string-concatenation of:
    • the code unit of the single digit of s
    • the code unit 0x0065 (LATIN SMALL LETTER E)
    • the code unit 0x002B (PLUS SIGN) or the code unit 0x002D (HYPHEN-MINUS) according to whether n-1 is positive or negative
    • the code units of the decimal representation of the integer abs(n-1) (with no leading zeroes)
  10. Return the string-concatenation of:
    • the code units of the most significant digit of the decimal representation of s
    • the code unit 0x002E (FULL STOP)
    • the code units of the remaining k-1 digits of the decimal representation of s
    • the code unit 0x0065 (LATIN SMALL LETTER E)
    • the code unit 0x002B (PLUS SIGN) or the code unit 0x002D (HYPHEN-MINUS) according to whether n-1 is positive or negative
    • the code units of the decimal representation of the integer abs(n-1) (with no leading zeroes)

转对象

原始值到对象的转换非常简单，原始值通过调用 String()、Number() 或者 Boolean() 构造函数，转换为它们各自的包装对象。

null 和 undefined 属于例外，当将它们用在期望是一个对象的地方都会造成一个类型错误 (TypeError) 异常，而不会执行正常的转换。

var a = 1;
console.log(typeof a); // number
var b = new Number(a);
console.log(typeof b); // object

对象转字符串和数字

v对象到字符串和对象到数字的转换都是通过调用待转换对象的一个方法来完成的。而 JavaScript 对象有两个不同的方法来执行转换，一个是 toString，一个是 valueOf。注意这个跟上面所说的 ToString 和 ToNumber 是不同的，这两个方法是真实暴露出来的方法。

所有的对象除了 null 和 undefined 之外的任何值都具有 toString 方法，通常情况下，它和使用 String 方法返回的结果一致。toString 方法的作用在于返回一个反映这个对象的字符串，然而这才是情况复杂的开始。

当调用对象的 toString 方法时，其实调用的是 Object.prototype 上的 toString 方法。

然而 JavaScript 下的很多类根据各自的特点，定义了更多版本的 toString 方法。例如:

  1. 数组的 toString 方法将每个数组元素转换成一个字符串，并在元素之间添加逗号后合并成结果字符串。
  2. 函数的 toString 方法返回源代码字符串。
  3. 日期的 toString 方法返回一个可读的日期和时间字符串。
  4. RegExp 的 toString 方法返回一个表示正则表达式直接量的字符串。

读文字太抽象？我们直接写例子：

console.log(({}).toString()) // [object Object]

console.log([].toString()) // ""
console.log([0].toString()) // 0
console.log([1, 2, 3].toString()) // 1,2,3
console.log((function(){var a = 1;}).toString()) // function (){var a = 1;}
console.log((/\d+/g).toString()) // /\d+/g
console.log((new Date(2010, 0, 1)).toString()) // Fri Jan 01 2010 00:00:00 GMT+0800 (CST)

而另一个转换对象的函数是 valueOf，表示对象的原始值。默认的 valueOf 方法返回这个对象本身，数组、函数、正则简单的继承了这个默认方法，也会返回对象本身。日期是一个例外，它会返回它的一个内容表示: 1970 年 1 月 1 日以来的毫秒数。

var date = new Date(2017, 4, 21);
console.log(date.valueOf()) // 1495296000000

ToPrimitive

那接下来就要看看 ToPrimitive 了，在了解了 toString 和 valueOf 方法后，这个也很简单。

让我们看规范 9.1，函数语法表示如下：

ToPrimitive(input[, PreferredType])

第一个参数是 input，表示要处理的输入值。

第二个参数是 PreferredType，非必填，表示希望转换成的类型，有两个值可以选，Number 或者 String。

当不传入 PreferredType 时，如果 input 是日期类型，相当于传入 String，否则，都相当于传入 Number。

如果传入的 input 是 Undefined、Null、Boolean、Number、String 类型，直接返回该值。

如果是 ToPrimitive(obj, Number)，处理步骤如下：

  1. 如果 obj 为 基本类型，直接返回
  2. 否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。
  3. 否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。
  4. 否则，JavaScript 抛出一个类型错误异常。

如果是 ToPrimitive(obj, String)，处理步骤如下：

  1. 如果 obj为 基本类型，直接返回
  2. 否则，调用 toString 方法，如果返回一个原始值，则 JavaScript 将其返回。
  3. 否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。
  4. 否则，JavaScript 抛出一个类型错误异常。

进入正题

前面介绍了许多前置知识，现在我们来进入正题

举个例子：

console.log(1 + '1')

在 JavaScript 中，这是完全可以运行的，不过你有没有好奇，为什么 1 和 '1' 分属不同的数据类型，为什么就可以进行运算呢？

这其实是因为 JavaScript 自动的将数据类型进行了转换，我们通常称为隐式类型转换。但是我们都知道，+运算符既可以用于数字加法，也能用于字符串拼接，那在这个例子中，是将数字 1 转成字符串 '1'，进行拼接运算？还是将字符串 '1' 转成数字 1，进行加法运算呢？

先卖个关子，虽然估计你也知道答案。今天，我们就常见的隐式类型转化的场景进行介绍。

一元操作符 +

console.log(+'1');

当 + 运算符作为一元操作符的时候，查看 ES5规范1.4.6，会调用 ToNumber 处理该值，相当于 Number('1')，最终结果返回数字 1。

那么下面的这些结果呢？

console.log(+[]);
console.log(+['1']);
console.log(+['1', '2', '3']);
console.log(+{});

既然是调用 ToNumber 方法，当输入的值是对象的时候，先调用 ToPrimitive(input, Number) 方法，执行的步骤是：

  1. 如果 obj 为基本类型，直接返回
  2. 否则，调用 valueOf 方法，如果返回一个原始值，则 JavaScript 将其返回。
  3. 否则，调用 toString 方法，如果返回一个原始值，则JavaScript 将其返回。
  4. 否则，JavaScript 抛出一个类型错误异常。

以 +[] 为例，[] 调用 valueOf 方法，返回一个空数组，因为不是原始值，调用 toString 方法，返回 ""。

得到返回值后，然后再调用 ToNumber 方法，"" 对应的返回值是 0，所以最终返回 0。

剩下的例子以此类推。结果是：

console.log(+['1']); // 1
console.log(+['1', '2', '3']); // NaN
console.log(+{}); // NaN

二元操作符 +

规范

现在 + 运算符又变成了二元操作符，毕竟它也是加减乘除中的加号

1 + '1' 我们知道答案是 '11'，那 null + 1、[] + []、[] + {}、{} + {} 呢？

如果要了解这些运算的结果，不可避免的我们要从规范下手。

规范地址：es5.github.io/#x11.6.1

不过这次就不直接大段大段的引用规范了，直接给大家讲简化后的内容。

到底当执行 + 运算的时候，会执行怎样的步骤呢？让我们根据规范11.6.1 来捋一捋：

当计算 value1 + value2时：

  1. lprim = ToPrimitive(value1)
  2. rprim = ToPrimitive(value2)
  3. 如果 lprim 是字符串或者 rprim 是字符串，那么返回 ToString(lprim) 和 ToString(rprim)的拼接结果
  4. 返回 ToNumber(lprim) 和 ToNumber(rprim)的运算结果

让我们来举几个例子：

1.Null 与数字

console.log(null + 1);

按照规范的步骤进行分析：

  1. lprim = ToPrimitive(null) 因为null是基本类型，直接返回，所以 lprim = null
  2. rprim = ToPrimitive(1) 因为 1 是基本类型，直接返回，所以 rprim = null
  3. lprim 和 rprim 都不是字符串
  4. 返回 ToNumber(null) 和 ToNumber(1) 的运算结果

接下来：

ToNumber(null) 的结果为0，(回想上篇 Number(null))，ToNumber(1) 的结果为 1

所以，null + 1 相当于 0 + 1，最终的结果为数字 1。

这个还算简单，看些稍微复杂的：

2.数组与数组

console.log([] + []);

依然按照规范：

  1. lprim = ToPrimitive([])，[]是数组，相当于ToPrimitive([], Number)，先调用valueOf方法，返回对象本身，因为不是原始值，调用toString方法，返回空字符串""
  2. rprim类似。
  3. lprim和rprim都是字符串，执行拼接操作

所以，[] + []相当于 "" + ""，最终的结果是空字符串""。

看个更复杂的：

3.数组与对象

// 两者结果一致
console.log([] + {});
console.log({} + []);

按照规范：

  1. lprim = ToPrimitive([])，lprim = ""
  2. rprim = ToPrimitive({})，相当于调用 ToPrimitive({}, Number)，先调用 valueOf 方法，返回对象本身，因为不是原始值，调用 toString 方法，返回 "[object Object]"
  3. lprim 和 rprim 都是字符串，执行拼接操作

所以，[] + {} 相当于 "" + "[object Object]"，最终的结果是 "[object Object]"。

下面的例子，可以按照示例类推出结果：

console.log(1 + true);
console.log({} + {});
console.log(new Date(2017, 04, 21) + 1) // 这个知道是数字还是字符串类型就行

结果是：

console.log(1 + true); // 2
console.log({} + {}); // "[object Object][object Object]"
console.log(new Date(2017, 04, 21) + 1) // "Sun May 21 2017 00:00:00 GMT+0800 (CST)1"

注意

以上的运算都是在 console.log 中进行，如果你直接在 Chrome 或者 Firebug 开发工具中的命令行直接输入，你也许会惊讶的看到一些结果的不同，比如：

type1

我们刚才才说过 {} + [] 的结果是 "[object Object]" 呐，这怎么变成了 0 了？

不急，我们尝试着加一个括号：

type2

结果又变成了正确的值，这是为什么呢？

其实，在不加括号的时候，{} 被当成了一个独立的空代码块，所以 {} + [] 变成了 +[]，结果就变成了 0

同样的问题还出现在 {} + {} 上，而且火狐和谷歌的结果还不一样：

> {} + {}
// 火狐： NaN
// 谷歌： "[object Object][object Object]"

如果 {} 被当成一个独立的代码块，那么这句话相当于 +{}，相当于 Number({})，结果自然是 NaN，可是 Chrome 却在这里返回了正确的值。

那为什么这里就返回了正确的值呢？我也不知道，欢迎解答~

== 相等

规范

"==" 用于比较两个值是否相等，当要比较的两个值类型不一样的时候，就会发生类型的转换。

关于使用"=="进行比较的时候，具体步骤可以查看规范11.9.5：

当执行x == y 时：

  1. 如果x与y是同一类型：

    1. x是Undefined，返回true

    2. x是Null，返回true

    3. x是数字：

      1. x是NaN，返回false
      2. y是NaN，返回false
      3. x与y相等，返回true
      4. x是+0，y是-0，返回true
      5. x是-0，y是+0，返回true
      6. 返回false

    4. x是字符串，完全相等返回true,否则返回false

    5. x是布尔值，x和y都是true或者false，返回true，否则返回false

    6. x和y指向同一个对象，返回true，否则返回false

  2. x是null并且y是undefined，返回true

  3. x是undefined并且y是null，返回true

  4. x是数字，y是字符串，判断x == ToNumber(y)

  5. x是字符串，y是数字，判断ToNumber(x) == y

  6. x是布尔值，判断ToNumber(x) == y

  7. y是布尔值，判断x ==ToNumber(y)

  8. x是字符串或者数字，y是对象，判断x == ToPrimitive(y)

  9. x是对象，y是字符串或者数字，判断ToPrimitive(x) == y

  10. 返回false

觉得看规范判断太复杂？我们来分几种情况来看：

1. null和undefined

console.log(null == undefined);

看规范第2、3步：

  1. x是null并且y是undefined，返回true
  1. x是undefined并且y是null，返回true

所以例子的结果自然为 true。

2. 字符串与数字

console.log('1' == 1);

结果肯定是true，问题在于是字符串转化成了数字和数字比较还是数字转换成了字符串和字符串比较呢？

看规范第4、5步：

4.x是数字，y是字符串，判断x == ToNumber(y)

5.x是字符串，y是数字，判断ToNumber(x) == y

结果很明显，都是转换成数字后再进行比较

3. 布尔值和其他类型

console.log(true == '2')

当要判断的一方出现 false 的时候，往往最容易出错，比如上面这个例子，凭直觉应该是 true，毕竟 Boolean('2') 的结果可是true，但这道题的结果却是false。

归根到底，还是要看规范，规范第6、7步：

6.x是布尔值，判断ToNumber(x) == y

7.y是布尔值，判断x ==ToNumber(y)

当一方出现布尔值的时候，就会对这一方的值进行ToNumber处理，也就是说true会被转化成1，

true == '2' 就相当于 1 == '2' 就相当于 1 == 2，结果自然是 false。

所以当一方是布尔值的时候，会对布尔值进行转换，因为这种特性，所以尽量少使用 xx == true 和 xx == false 的写法。

比如:

// 不建议
if (a == true) {}

// 建议
if (a) {}
// 更好
if (!!a) {}

4. 对象与非对象

console.log( 42 == ['42'])

看规范第8、9步：

  1. x不是字符串或者数字，y是对象，判断x == ToPrimitive(y)
  1. x是对象，y不是字符串或者数字，判断ToPrimitive(x) == y

以这个例子为例，会使用 ToPrimitive 处理 ['42']，调用valueOf，返回对象本身，再调用 toString，返回 '42'，所以

42 == ['42'] 相当于 42 == '42' 相当于42 == 42，结果为 true。

到此为止，我们已经看完了第2、3、4、5、6、7、8、9步，其他的一概返回 false。

其他

再多举几个例子进行分析：

console.log(false == undefined)
复制代码

false == undefined 相当于 0 == undefined 不符合上面的情形，执行最后一步 返回 false

console.log(false == [])

false == [] 相当于 0 == [] 相当于 0 == '' 相当于 0 == 0，结果返回 true

console.log([] == ![])

首先会执行 ![] 操作，转换成 false，相当于 [] == false 相当于 [] == 0 相当于 '' == 0 相当于 0 == 0，结果返回 true

最后再举一些会让人踩坑的例子：

console.log(false == "0")
console.log(false == 0)
console.log(false == "")

console.log("" == 0)
console.log("" == [])

console.log([] == 0)

console.log("" == [null])
console.log(0 == "\n")
console.log([] == 0)

以上均返回 true

其他

除了这两种情形之外，其实还有很多情形会发生隐式类型转换，比如if、? :、&&等情况，但相对来说，比较简单，就不再讲解。

参考

JavaScript深入之头疼的类型转换(上)

JavaScript深入之头疼的类型转换(下)

ECMAScript® 2018 Language Specification

avatar
文章
阅读
粉丝