摘要：首先，为了掌握好类型转换，我们要理解一个重要的抽象操作为什么说这是个抽象操作呢因为这是内部才会使用的操作，我们不会显示调用到。基本规则中的类型转换总是返回基本类型值，如字符串数字和布尔值，不会返回对象和函数。
Javascript 里的类型转换是一个你永远绕不开的话题，不管你是在面试中还是工作写代码，总会碰到这类问题和各种的坑，所以不学好这个那是不行滴。关于类型转换我也看过不少的书和各种博客、帖子，也查过规范和做过各种测试，这里就谈谈我的总结和理解吧。
首先，为了掌握好类型转换，我们要理解一个重要的抽象操作：ToPrimitive
ToPrimitive为什么说这是个抽象操作呢？因为这是 Javascript 内部才会使用的操作，我们不会显示调用到。当需要将对象转换为相应的基本类型值时，ToPrimitive 就会调用对象的内部方法 [[DefaultValue]] 来完成。
ToPrimitive 操作接收两个参数，一个是 input 需要转换的值，第二个是可选参数 hint 代表期望的转换类型。并且在调用 [[DefaultValue]] 的时候 hint 会传递过去。
这里我们首先只需要知道 [[DefaultValue]] 会调用 valueOf() 和 toString() 来完成基本类型值的转换。但是请注意：valueOf() 和 toString() 的调用逻辑顺序并不是固定的取决于 hint 参数，这个我们下面会讲到。
基本规则JavaScript 中的类型转换总是返回基本类型值，如字符串、数字和布尔值，不会返回对象和函数。那么这也对应了三种抽象操作：ToString、ToNumber 和 ToBoolean，下面就来逐一说明。
ToStringvar a = {};
console.log(String(a));
// 显式类型转换，输出为："[object Object]"
以上代码我们通常称为显示类型转换，这里面就包含 ToString 抽象操作，也就是把非字符串值转换为字符串的操作。
先来看看非对象的基本类型值的 ToString 转换规则：
| 输入类型 | 输出结果 |
|---|---|
| Undefined | "undefined" |
| Null | "null" |
| Boolean | 输入 true，输出 "true" 输入 false，输出 "false" |
| Number | 输入 NaN，输出 "NaN" 输入 +0 或 -0，输出 "0" 如果输入小于 0 的数字，如：-2，输出将包括负号："-2" 输入 Infinity，输出 "Infinity" |
接着我们重点来看一下输入是对象的转换规则。
这个时候 ToPrimitive 就出场了，并且 hint 参数是 String。还记得 ToPrimitive 内部是调用的[[DefaultValue]]吗，并且这个时候 hint 是 String 。下面来看下这种情况下 ToPrimitive 的调用逻辑：
toPrimitive 调用 [[DefaultValue]] 并传递 hint，然后返回调用结果
[[DefaultValue]] 根据 hint 是 String 执行以下调用顺序：
如果对象存在 toString() 并返回一个基本类型值，即返回这个值
如果 toString() 不存在或返回的不是一个基本类型值，就调用 valueOf()
如果 valueOf() 存在并返回一个基本类型值，即返回这个值
如果 valueOf() 不存在或返回的不是一个基本类型值，则抛出 TypeError 异常
那么这里就可以总结为：对象在类型转换为字符串时， toString() 的调用顺序在 valueOf() 之前，并且这两个方法如果都没有返回一个基本类型值，则抛出异常；如果返回了基本类型值 primValue，则返回 String(primValue)
基本类型值的 ToString 结果参看前面那个表格
我们来测试一下。先看下这节开头的例子：
var a = {};
console.log(String(a));
字面量对象的原型是 Object.prototype，Object.prototype.toString() 返回内部属性 [[Class]] 的值，那么结果就是 [object Object]。OK 没有问题
然后测试一下 ToPrimitive 的调用逻辑。来看下这段代码：
var a = Object.create(null);
上面的意思是创建一个没有原型的对象(没有原型就没有继承的 toString() 和 valueOf() 了)。接下来：
console.log(String(a)); // Uncaught TypeError: Cannot convert object to primitive value
这里因为没有 toString() 和 valueOf() 所以就抛出 TypeError 异常了。OK，跟前面的总结一致。
下面来测试一下 toString() 和 valueOf() 的调用顺序逻辑，上代码：
a.toString = function() {
return "hello";
};
a.valueOf = function() {
return true;
};
console.log(String(a)); // "hello"
我们加入了 toString() 和 valueOf() ，并且跟前面的总结一致，确实是 toString() 先返回结果。接着做一下变化：
a.toString = function() {
return {};
};
// 或是直接去掉这个方法，a.toString = undefined;
a.valueOf = function() {
return true;
};
console.log(String(a)); // "true"
当 toString() 返回的不是一个基本类型值或不存在 toString() 时，返回 valueOf() 的结果，并且遵循基本类型值的 ToString 转换结果。OK，验证没有问题 其他的情况也可以根据前面的总结逻辑自己验证下。
在《Javascript 高级程序设计（第 3 版）》和《你不知道的 Javascript（中卷）》上均未提到类型转换到字符串会与 valueOf() 有关系ToNumber
首先照例先来看下非对象的基本类型值的 ToNumber 转换规则：
| 输入类型 | 输出结果 |
|---|---|
| Undefined | NaN |
| Null | 0 |
| Boolean | 输入 true，输出 1 输入 false，输出 0 |
| Number | 输入 ""，输出 0 输入 "Infinity"，输出 Infinity 输入有效数字的字符串（包括二、八和十六进制），输出数字的十进制数值 如果输入包含非数字格式的字符串，输出 NaN |
字符串转数字上面只说了一些常用的情况，更多细节请看 这里
然后来看看对象 ToNumber 的情况。这里与对象转字符串的情况类似，也会调用 ToPrimitive 来转换（hint 是 Number）。但细节与 ToString 稍有不同，这里直接给出结论：
对象在类型转换为数字时， valueOf() 的调用顺序在 toString() 之前，并且这两个方法如果都没有返回一个基本类型值，则抛出异常；如果返回了基本类型值 primValue，则返回 Number(primValue)
这里验证了 ToPrimitive 里面说到的，[[DefaultValue]] 会根据 hint 参数决定 toString() 和 valueOf() 的调用顺序
接着来用代码说话：
var a = Object.create(null); console.log(Number(a)); // Uncaught TypeError: Cannot convert object to primitive value
这里因为没有 toString() 和 valueOf() 所以就抛出 TypeError 异常了。OK，跟前面的总结一致。
我们先加入 valueOf() 方法：
a.valueOf = function() {
return 123;
}
console.log(Number(a)); // 123
valueOf() 返回了数字 123，所以输出没问题。再修改一下：
a.valueOf = function() {
return true;
}
console.log(Number(a)); // 1
valueOf() 返回了 true，这也是一个基本类型，然后根据基本类型转换规则 true 转换为 1，也是对的。
再来：
a.valueOf = function() {
return NaN;
}
console.log(Number(a)); // NaN
NaN 是一个特殊的数值，所以也是基本类型。OK，也是对的。
这里的结果说明了《Javascript 高级程序设计(第 3 版)》关于对象转换为数字的解释是有错误的，书上是这么说的：如果转换的结果是 NaN，则调用对象的 toString() 方法
再来验证一下 toString() 的调用顺序：
a.valueOf = function() {
return {};
}
a.toString = function() {
return "123";
}
console.log(Number(a)); // 123
因为 valueOf() 返回了对象非基本类型值，转而执行 toString()，返回的 "123" 根据字符串转换数字的规则就是 123，对于 valueOf() 和 toString() 的执行顺序验证也是 OK 的。
ToBoolean最后我们来看看转换为布尔值。这个比较简单，一个列表可以全部归纳了：
| 输入类型 | 输出结果 |
|---|---|
| Undefined | false |
| Null | false |
| Number | 输入 +0，-0，NaN，输出 false 输入其他数字，输出 true |
| String | 输入 length 为 0 的字符串（如：""），输出 false 输入其他字符串，输出 true |
| Object | 输入任何对象类型，输出 true |
ToBoolean 转换规则比较简单，只有一个需要注意的地方，那就是封箱操作：
var a = new Boolean(false); console.log(Boolean(a)); // 输出是 true 不是 false 喔
new Boolean(false) 返回的是对象不是布尔值，所以最好避免进行类似的操作。
总结以上即是我总结的 JS 类型转换基本规则，当你明显感知类型转换即将发生时可以拿上面的规则去套（也就是我们通常说的显式类型转换，以上转换规则面试时特别有用喔）。
既然规则有了，下一篇准备聊一下隐式类型转换，有了这篇的基础掌握隐式转换会容易很多。
欢迎 star 和关注我的 JS 博客：小声比比 Javascript
参考资料ES5 规范注释
《Javascript 高级程序设计（第 3 版）》
《你不知道的 Javascript（中卷）》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104474.html
摘要：看下面的代码和会对操作数执行条件判断，如果操作数不是布尔值，会先执行类型转换后再执行条件判断。大家记住这个规则布尔值如果与其他类型进行抽象比较，会先用将布尔值转换为数字再比较。 在上一篇中我们聊过了 JS 类型转换的规则和我发现的一些常见书籍中关于类型转换的一些小错误，当碰到显示类型转换的时候大家可以按照这些规则去拆解出答案。但 JS 中存在一些很隐晦的隐式类型转换，这一篇就来谈下我对...
摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。 开篇 前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到： 到现在为止，前端工程师已经成为研...
摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇 前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到： 到现在为止，前端工程师已经成为研发体系...
摘要：学习目标掌握编程的基本思维掌握编程的基本语法我们先来学习基础，后续会讲解高级。语句基本语法当循环条件为时，执行循环体，当循环条件为时，结束循环。基础语法循环体循环条件代码示例初始化变量循环体自增循环条件语句和一般用来解决无法确认次数的循环。 学习目标: 掌握编程的基本思维 掌握编程的基本语法 我们先来学习JavaScript基础，后续会讲解JavaScript高级。 重点内容 变...
摘要：学习目标掌握编程的基本思维掌握编程的基本语法我们先来学习基础，后续会讲解高级。语句基本语法当循环条件为时，执行循环体，当循环条件为时，结束循环。基础语法循环体循环条件代码示例初始化变量循环体自增循环条件语句和一般用来解决无法确认次数的循环。 学习目标: 掌握编程的基本思维 掌握编程的基本语法 我们先来学习JavaScript基础，后续会讲解JavaScript高级。 重点内容 变...
阅读 3685·2021-10-09 09:44
阅读 3363·2021-09-22 15:29
阅读 3128·2019-08-30 15:54
阅读 3021·2019-08-29 16:19
阅读 2146·2019-08-29 12:50
阅读 596·2019-08-26 14:04
阅读 1700·2019-08-23 18:39
阅读 1349·2019-08-23 17:59
