【精】从206个console.log()彻底弄懂数据类型转换的前世此生(上)

前言

你盼世界，我盼望你无bug。Hello 你们好！我是霖呆呆！javascript

这一期给你们带来的是一篇关于JS数据类型转换的文章，原由主要是前几天在刷类型转换的题时忽然感受本身对它们理解的还不够深入啊，对于什么[] == ![]、!{} == []这类题老是只知其一;不知其二，记了忘忘了记。前端

这让我很苦恼，决心给本身下点猛料，完全弄懂它们的转换机制而后出几道魔鬼题来考考本身。java

在写的时候也是蛮纠结的，开始写了一版全是题目的，可是后来发现若是全是题目不讲其原理的话，一些读者可能会一脸懵逼...因此后来我又加了关于toString、valueOf、toPrimitive的详细解析，再配合一些清晰的流程图，力求能将转换过程说的清楚明了 😁。git

不过预防针可打在前头，因为前面1-3节是一些基础类型之间的转换，并不难，因此我不会花太多的篇幅在这上面，可能从第4节开始慢慢的有点内味了吧，[阴笑～]，以为本身对基础类型之间转换有信心的小伙伴能够直接跳到第4节看哦。github

但愿整篇阅读下来你的脑子里并非 "淡黄的长裙...蓬松的头发..."面试

OK👌，来看看经过阅读你能够学习到：数组

其它数据类型转布尔值
原始值转字符串
原始值转数字
原始值转对象(基本类型的包装对象)
toString
Symbol.toStringTag
valueOf
ToPrimitive的执行机制
对象转字符串
对象转数字

（写的过程当中，看到冴羽大大也发表了一篇关于类型转换的文章《JavaScript深刻之头疼的类型转换(上)》，完了，难道...我已经到了和大佬们心有灵犀的境界了吗，膨胀膨胀了，能够借鉴一下，哈哈）浏览器

另外「数据类型转换」系列我是分为了两篇文章来写，这一篇主要是讲解String()、Number()这种的转换方式，对于运算符号+、==这种的转换以及toPrimitive的一些高级用法我会放在下一篇文章里面。嘻嘻，仍是那句话，按部就班嘛。markdown

系列介绍

「数据类型转换」系列共有两篇文章：编辑器

《【精】从206个console.log()彻底弄懂数据类型转换的前世此生(上)》(本篇)
《【精】从206个console.log()彻底弄懂数据类型转换的前世此生(下)》

建议按顺序阅读，两篇文章帮你彻底弄懂数据类型转换 😁。

1. 其它数据类型转布尔值

转化为布尔值的状况是很简单的。

当咱们在使用Boolean()来进行转换时，有以下转换规则：

参数类型	结果
false、undefined、null、+0、-0、NaN、""	false
除了上面的状况	true

（另外须要注意的是，若是在使用Boolean()时不传参数结果也是为false的）

1.1 数字转布尔值

数字转布尔值，只须要记住：

除了0, -0, NaN这三种转换为false，其余的一概为true。

1.1.1 题目一

console.log(Boolean(0))
console.log(Boolean(-0))
console.log(Boolean(NaN))

console.log(Boolean(1))
console.log(Boolean(Infinity))
console.log(Boolean(-Infinity))
console.log(Boolean(100n))
console.log(Boolean(BigInt(100)))
复制代码

记住上面👆的规律，这边我把bigInt类型的也拿过来试了一下，发现它也是为true。

所以答案为：

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

console.log(Boolean(1)) // true
console.log(Boolean(Infinity)) // true
console.log(Boolean(-Infinity)) // true
console.log(Boolean(100n)) // true
console.log(Boolean(BigInt(100))) // true
复制代码

1.2 字符串转布尔值

字符串转布尔也很简单，只须要记住：

除了空字符串""都为true。

1.2.1 题目一

console.log(Boolean(""))

console.log(Boolean("1"))
console.log(Boolean("NaN"))
console.log(Boolean("aaa"))
复制代码

这里特别要注意的是"NaN"，它并非NaN哦，而是一个字符串。

因此答案为：

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

console.log(Boolean("1")) // true
console.log(Boolean("NaN")) // true
console.log(Boolean("aaa")) // true
复制代码

1.3 其它类型转布尔值

其它类型，例如null, undefined, 引用转布尔值，这些相信你们其实也知道：

null、undefined为false
引用类型，如对象，数组，类数组，日期，正则都为true
document.all是一个例外，它在非IE下用typeof检测类型为undefined，因此会被转为false。(考的很少)

(感谢掘友小茗cha提出的document.all)

1.3.1 题目一

var divs = document.getElementsByTagName('div')
console.log(Boolean(null))
console.log(Boolean(undefined))

console.log(Boolean({}))
console.log(Boolean({ name: 'obj' }))
console.log(Boolean([]))
console.log(Boolean(divs))
console.log(Boolean(new Date()))
console.log(Boolean(/(\[|\])/g))

console.log(typeof document.all)
console.log(Boolean(document.all))
复制代码

结果为：

var divs = document.getElementsByTagName('div')
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false

console.log(Boolean({})) // true
console.log(Boolean({ name: 'obj' })) // true
console.log(Boolean([])) // true
console.log(Boolean(divs)) // true
console.log(Boolean(new Date())) // true
console.log(Boolean(/(\[|\])/g)) // true

console.log(typeof document.all) // undefined
console.log(Boolean(document.all)) // false
复制代码

(document.all是文档中全部标签组成的一个数组变量，包括了文档对象中全部元素，document.all[]这个数组能够访问文档中全部元素。它在非IE的浏览器中是为undefined的，因此能够用其来判断当前浏览器是不是IE，不过如今用的已经不多了，我就不展开了)

2. 原始值转字符串

对于原始值转字符串，也有如下总结：

参数类型	结果
Undefined	"undefined"
Null	"null"
Boolean	若是参数是 true，返回 "true"。参数为 false，返回 "false"
Number	能够看题目2.1
String	返回与之相等的值
Symbol	"Symbol()"

来作几道题强化一下吧。

2.1 数字转字符串

2.1.1 题目一

console.log(String(0))
console.log(String(1))
console.log(String(100))
console.log(String(NaN))
console.log(String(10n))
console.log(String(10n) === '10')
复制代码

bigInt类型会被当成数字来处理。

答案为：

console.log(String(0)) // '0'
console.log(String(1)) // '1'
console.log(String(100)) // '100'
console.log(String(NaN)) // 'NaN'
console.log(String(10n)) // '10'
console.log(String(10n) === '10') // true
复制代码

2.2 Boolean、Symbol转为字符串

2.2.1 题目一

这三种类型转换为字符串，比较简单：

console.log(String(true))
console.log(String(false))
console.log(String(Symbol(1)))
复制代码

答案：

console.log(String(true)) // 'true'
console.log(String(false)) // 'false'
console.log(String(Symbol(1))) // 'Symbol(1)'
复制代码

3. 原始值转数字

参数类型	结果
Undefined	NaN
Null	+0
Boolean	若是参数是 true，返回 1。参数为 false，返回 +0
Number	返回与之相等的值
String	纯数字的字符串(包括小数和负数、各进制的数)，会被转为相应的数字，不然为NaN
Symbol	使用Number()转会报错

3.1 题目一

先来看看你们都知道的string、null、undefined、Symbol转数字

console.log(Number("1"))
console.log(Number("1.1"))
console.log(Number("-1"))
console.log(Number("0x12"))
console.log(Number("0012"))

console.log(Number(null))
console.log(Number("1a"))
console.log(Number("NaN"))
console.log(Number(undefined))
console.log(Number(Symbol(1)))
复制代码

答案为：

console.log(Number("1")) // 1
console.log(Number("1.1")) // 1.1
console.log(Number("-1")) // -1
console.log(Number("0x12")) // 18
console.log(Number("0012")) // 12

console.log(Number(null)) // 0
console.log(Number("1a")) // NaN
console.log(Number("NaN")) // NaN
console.log(Number(undefined)) // NaN
console.log(Number(Symbol(1))) // TypeError: Cannot convert a Symbol value to a number
复制代码

其实很好记：

纯数字的字符串(包括小数和负数、各进制的数)，会被转为相应的数字
null转为0
Symbol会报错
其它的基本类型，包括非纯数字的字符串、NaN，undefined都会被转为NaN

3.2 题目二

（Boolean类型转数字）

布尔值转数字也是很是简单的，只有两种状况：

console.log(Number(true)) // 1
console.log(Number(false)) // 0
复制代码

3.3 题目三

还有一种你们可能会用到的转数字的方式，那就是使用：

parsetInt，将结果转换为整数
parseFloat，将结果转换为整数或者浮点数

它们在转换为数字的时候是有这么几个特色的：

若是字符串以0x或者0X开头的话，parseInt会以十六进制数转换规则将其转换为十进制，而parseFloat会解析为0
它们两在解析的时候都会跳过开头任意数量的空格，日后执行
执行过程当中会尽量多的解析数值字符，若是碰到不能解析的字符则会跳出解析忽略后面的内容
若是第一个不是非空格，或者开头不是0x、-的数字字面量，将最终返回NaN

来看几道题练习一下 😄：

console.log(parseInt('10')) // 10
console.log(parseFloat('1.23')) // 1.23

console.log(parseInt("0x11")) // 17
console.log(parseFloat("0x11")) // 0

console.log(parseInt(" 11")) // 11
console.log(parseFloat(" 11")) // 11

console.log(parseInt("1.23a12")) // 1
console.log(parseFloat("1.23a12")) // 1.23

console.log(parseInt(" 11")) // 11
console.log(parseFloat(" 11")) // 11

console.log(parseInt("1a12")) // 1
console.log(parseFloat("1.23a12")) // 1.23

console.log(parseInt("-1a12")) // -1
console.log(parseFloat(".23")) // 0.23
复制代码

一直作到如今感受都还挺简单的哈 😄。

4. 原始值转对象

原始值，也就是基础数据类型。

4.1 String对象

让咱们先来认识一个叫作String的对象，它的原型链是这样的：

能够看到，它本质上是一个构造函数，String.__proto__指向的是Function.prototype。

String其实有两种用法，一种是配合new来当构造函数用，一种是不用new：

当 String() 和运算符 new 一块儿做为构造函数使用时，它返回一个新建立的 String 对象，存放的是字符串 s 或 s 的字符串表示(不过自从推出了Symbol以后就不推荐使用new String这种作法了)。
当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值

什么意思呢 🤔️？通俗点来讲：

typeof String(1) // 'string'
typeof new String(1) // 'object'
复制代码

使用typeof会发现类型都是不一样的。

4.2 基本类型的包装对象

哈哈哈。

和它一块儿的其实还有另外两个"亲兄弟"：Number、Boolean；

以及它的"表哥表妹"：Symbol、BigInt。 😄

为何说Number、Boolean就是亲的，然后面两个就是表的呢 🤔️？

这个霖呆呆是以类似程度来区分的。

也就是说Number、Boolean和String同样都有两种用法，带new和不带new。

而Symbol、BigInt就只能不带new使用。(由于它们是ES6以后出来的，对它们调用new会报错)

因此你会看到这个现象：

console.log(Number(1)) // 1
console.log(new Number(1)) // Number{1}
console.log(Boolean(true)) // true
console.log(new Boolean(true)) // Boolean{true}

console.log(Symbol(1)) // Symbol(1)
console.log(BigInt(1)) // 1n
console.log(new Symbol(1)) // TypeError: Symbol is not a constructor
console.log(new BigInt(1)) // TypeError: BigInt is not a constructor
复制代码

而上面的Number{1}、Boolean{true}，它就是我要介绍的基本类型的包装对象，也被称为基本类型的包装类，也能够叫作原始值包装对象（有不少的叫法不过你们应该都知道它表示的就是这个意思）。

能够看到要想产生一个基础数据类型的包装对象只须要使用new来调用它们各自的构造函数便可：

console.log(new Number(1)) // Number{1}
console.log(new String('1')) // String{1}
console.log(new Boolean(true)) // Boolean{true}
复制代码

这个基本类型的包装对象有什么特色呢？

使用typeof检测它，结果是object，说明它是一个对象
使用toString()调用的时候返回的是原始值的字符串(题6.8.3中会提到)

But!!!

前面已经说到了，目前ES6规范是不建议用new来建立基本类型的包装类的，我想大概是为了和Symbol、BigInt它们统一吧。

那么如今更推荐用什么方式来建立基本类型的包装类呢？

唔...那就是Object这个构造函数。

4.3 Object()

Object()构造函数它能够接收一个任意类型的变量，而后进行不一样的转换。

也就是说七种基本数据类型，或者引用数据类型你均可以传入进去。

不过这里我主要是为了介绍基本数据类型转对象，因此就以几个基本数据类型来作分析：

console.log(new Object('1')) // String{'1'}
console.log(new Object(1)) // Number{1}
console.log(new Object(true)) // Boolean{true}
console.log(new Object(Symbol(1))) // Symbol{Symbol(1)}
console.log(new Object(10n)) // BigInt{10n}

console.log(new Object(null)) // {}
console.log(new Object(undefined)) // {}
复制代码

能够看到，你传入的基本数据类型是什么类型的，那么最终的结果就会转为对应的包装类，可是对于null、undefined它们会被忽略，生成的会是一个空对象。

总结-原始值转对象

原始值转对象主要有如下总结：

String、Number、Boolean有两种用法，配合new使用和不配合new使用，可是ES6规范不建议使用new来建立基本类型的包装类。
如今更加推荐用new Object()来建立或转换为一个基本类型的包装类。

基本类型的包装对象的特色：

使用typeof检测它，结果是object，说明它是一个对象
使用toString()调用的时候返回的是原始值的字符串(题6.8.3中会提到)

5. 对象转字符串/数字前期准备

对象转字符串和数字的过程比较复杂，会涉及到一个可能你们以前没有听到过的方法：toPrimitive()

它的做用其实就是输入一个值，而后返回一个必定是基本类型的值，不然会抛出一个类型错误异常。

先上一张执行流程图，让你们感觉一下绝望、孤独、寂寞、冷...

虽然它的功能会有些复杂，不过问题不大，待看完后面的内容以后你就能搞懂它了，在介绍toPrimitive()以前，我得先详细介绍一下toString()和valueOf()方法才行，由于弄懂了它们你才能完全吃透toPrimitive()。😄

6. toString()

6.1 toString()存在于哪里

在此以前，我翻了不少关于toString()的资料，大多都是介绍了它的用法，可是它真正存在于哪里呢？

可能比较常见的一种说法是它存在于Object的原型对象中，也就是Object.prototype上，那么对于基本数据类型，Number、String、Boolean、 Symbol、BigInt呢？它们自身有这个方法吗？或者它们的原型对象上有吗？

本着一探到底的精神，我打印出了Number和Number.prototype：

console.log(Number)
console.log(Number.prototype)
复制代码

而后我发现了几件事：

Number只是一个构造函数，打印出来显示的会是源代码
Number.prototype上确实也有toString()
Number.prototype.__proto__也就是Object.prototype上也有toString()

而后我又试了一下String、Boolean、Symbol发现结果也和上面同样。

其实不难理解，看过《💦【何不三连】作完这48道题完全弄懂JS继承(1.7w字含辛整理-返璞归真)》的小伙伴都知道，全部对象的原型链到最后都会指向Object.prototype，算是都"继承"了Object的对象实例，所以都能使用toString()方法，可是对于不一样的内置对象为了能实现更适合自身的功能需求，都会重写该方法，因此你能够看到Number.prototype上也会有该方法。

因此咱们能够先得出第一个结论：

除了null、undefined之外的其它数据类型(基本数据类型+引用数据类型)，它们构造函数的原型对象上都有toString()方法
基本数据类型构造函数原型对象上的toString()会覆盖Object原型对象上的toString()方法

（固然，等你看到6.9以后你就会发现这种说法其实并不太准确，可是大多数时候咱们都只是关心谁能够用它，而不是它存在于哪里）

6.2 谁能够调用toString()

这个问题，其实在上面👆已经给出答案了，全部对象除了null、undefined之外的任何值均可以调用toString()方法，一般状况下它的返回结果和String同样。

其实这里，咱们最容易搞混的就是String和toString。

以前老是为了将某个类型转为字符串胡乱的用这两个属性。

String是一个相似于Function这样的对象，它既能够当成对象来用，用它上面的静态方法，也能够当成一个构造函数来用，建立一个String对象
而toString它是除了null、undefined以外的数据类型都有的方法，一般状况下它的返回结果和String同样。

可是就会有小伙伴问了，那为何'1'.toString()也能够成功呢？那是由于代码在运行的时候实际上是作了转换为包装类的处理，相似于下面这段代码：

var str = new Object('1');
str.toString();
str = null;
复制代码

过程解析：

建立Object实例，将s变为了String{"1"}对象
调用实例方法toString()
用完以后当即销毁这个实例

但是咱们以前不是看到了一个String的东西吗？这里的第一步为何不能使用var str = new String('1')呢？

其实前面也已经说到了，因为Symbol和BigInt它们是不能使用new来调用的，会报错，而且目前ES6的规范也不推荐使用new来建立这种基本类型的包装类，因此这里使用的是new Object()。

可是当咱们在代码中试图使用1.toString()，发现编辑器已经报错不容许咱们这样作了。

难道数字就不能够吗 🤔️？最开始会有这么奇怪的疑问是由于咱们都忽视了一件事，那就是.它也是属于数字里的一部分啊 😂。

好比1.2、1.3。因此当你想要使用1.toString()的时候，JavaScript的解释器会把它做为数字的一部分，这样就至关于(1.)toString了，很显然这是一段错误的代码。

既然这样的话，若是我还(喝唔安黄)给代码一个.是否是就能够了，因而我尝试了一下：

console.log(1.1.toString())
复制代码

发现它居然能正常打印出来：

"1.1"
复制代码

这也就再次证实了1.toString()会将.归给1所属，而不是归给toString()。

固然若是你用的一个变量来承载这个数字的话也是能够的：

var num = 1;
console.log(num.toString()) // "1"

// 或者
console.log((1).toString()) // "1"
复制代码

因此在此咱们只须要先记住谁能够调用toString：

除了null、undefined的其它基本数据类型还有对象均可以调用它
在使用一个数字调用toString()的时候会报错，除非这个数字是一个小数或者是用了一个变量来盛放这个数字而后调用。(1.1.toString()或者var a = 1; a.toString();)

6.3 toString()的call调用

可能你们看的比较多的一种用法是这样的：

Object.prototype.toString.call({ name: 'obj' }) // '[object Object]'
复制代码

先来点硬知识，Object.prototype.toString这个方法会根据这个对象的[[class]]内部属性，返回由 "[object " 和 class 和 "]" 三个部分组成的字符串。

啥意思？[[class]]内部属性是个啥 🤔️？

这里你还真别想多，你就按字面意思来理解它就行了，想一想，class 英文单词的意思->类。

那好，我就认为它表明的是一类事物就好了。

就好比

数组是一类，它的[[class]]是Array
字符串是一类，它的[[class]]是String
arguments是一类，它的[[class]]是Arguments

另外，关于[[class]]的种类是很是多的，你也不须要记住所有，只须要知道一些经常使用的，基本的，好理解的就能够了。

因此回到Object.prototype.toString.call()这种调用方式来，如今你能够理解它的做用了吧，它可以帮助咱们准确的判断某个数据类型，也就是辨别出是数组仍是数字仍是函数，仍是NaN。😊

另外鉴于它的返回结果是"[object Object]"这样的字符串，并且前面的"[object ]"这八个字符串都是固定的(包括"t"后面的空格)，因此咱们是否是能够封装一个方法来只拿到"Object"这样的字符串呢？

很简单，上代码：

function getClass (obj) {
    let typeString = Object.prototype.toString.call(obj); // "[object Object]"
    return typeString.slice(8, -1);
}
复制代码

能够看到，我给这个函数命名为getClass，这也就呼应了它本来的做用，是为了拿到对象的[[class]]内部属性。

另外，在拿到了"[object Object]"字符串以后，是用了一个.slice(8, -1)的字符串截取功能，去除了前八个字符"[object ]"和最后一个"]"。

如今让咱们来看看一些常见的数据类型吧：

function getClass(obj) {
    let typeString = Object.prototype.toString.call(obj); // "[object Array]"
    return typeString.slice(8, -1);
}
console.log(getClass(new Date)) // Date
console.log(getClass(new Map)) // Map
console.log(getClass(new Set)) // Set
console.log(getClass(new String)) // String
console.log(getClass(new Number)) // Number
console.log(getClass(true)) // Boolean
console.log(getClass(NaN)) // Number
console.log(getClass(null)) // Null
console.log(getClass(undefined)) // Undefined
console.log(getClass(Symbol(42))) // Symbol
console.log(getClass({})) // Object
console.log(getClass([])) // Array
console.log(getClass(function() {})) // Function
console.log(getClass(document.getElementsByTagName('p'))) // HTMLCollection

console.log(getClass(arguments)) // Arguments
复制代码

"霖呆呆，这么多，这是人干的事吗？"

"性平气和，记住一些经常使用的就好了..."

"啪!"

6.4 toString.call()与typeof的区别

好滴👌，经过刚刚的学习，咱们了解到了，toString.call这种方式是为了获取某个变量更加具体的数据类型。

咦～说到数据类型，咱们原来不是有一个typeof吗？它和toString.call()又啥区别？

首先帮你们回顾一下typeof它的显示规则：

对于原始类型来讲(也就是number、string这种)，除了null均可以显示正确的类型
null由于历史版本的缘由被错误的判断为了"object"
对于引用类型来讲(也就是object、array这种)，除了函数都会显示为"object"
函数会被显示为function

因此呀，typeof的缺点很明显啊，我如今有一个对象和一个数组，或者一个日期对象，我想要仔细的区分它，用typeof确定是不能实现的，由于它们获得的都是"object"。

因此，采用咱们封装的getClass()显然是一个很好的选择。

（固然，了解instanceof的小伙伴可能也知道，用instanceof去判断也是能够的，不过这边不扯远，具体能够看一下三元大大的《(建议收藏)原生JS灵魂之问, 请问你能接得住几个？(上)》，里面的第二篇有提到这个问题。或者你能够期待一下呆呆后面的文章，那里也会详细讲到哦，这里先卖个关子，哈哈）

6.5 toString.call()调用和toString()的区别

刚刚咱们说到的toString()的用法是使用toString.call()的方式，那么更多的使用确定是某个变量后面之间接着toString()呀，就好比这样：

true.toString() // 'true'
复制代码

请你们必定要区分清楚true.toString()和Object.prototype.toString.call(true)这两种用法啊：

true.toString()是将true转为字符串
toString.call(true)是获取true 它的[[class]]内部属性：

true.toString() // 'true'
Object.prototype.toString.call(true) // "[object Boolean]"
复制代码

因为toString.call()这种用法以前说的已经比较详细了，因此下面的内容都是围绕着true.toString()这种调用方式来说。

6.6 不一样状况下的toString()

那么在不一样的数据类型调用toString()会有什么不一样呢？

这里我主要是分为两大块来讲：

基本数据类型调用
引用类型调用

6.7 基本数据类型调用toString

对于基本数据类型来调用它，超级简单的，你就想着就是把它的原始值换成了字符串而已：

console.log('1'.toString()) // '1'
console.log(1.1.toString()) // '1.1'
console.log(true.toString()) // 'true'
console.log(Symbol(1).toString()) // 'Symbol(1)'
console.log(10n.toString()) // '10'
复制代码

6.8 引用类型调用toString

比较难的部分是引用类型调用toString()，并且咱们知道引用类型根据[[class]]的不一样是分了不少类的，好比有Object、Array、Date等等。

那么不一样类之间的toString()是否也不一样呢 🤔️？

没错，不一样版本的toString主要是分为：

数组的toString方法是将每一项转换为字符串而后再用","链接
普通的对象(好比{name: 'obj'}这种)转为字符串都会变为"[object Object]"
函数(class)、正则会被转为源代码字符串
日期会被转为本地时区的日期字符串
原始值的包装对象调用toString会返回原始值的字符串

好的👌，扯了这么多知识点，终于能够先上几道题了 😁。

（没有题目作我好难受～）

6.8.1 题目一

（数组的toString()用法）

先来看点简单的：

console.log([].toString())
console.log([1].toString())
console.log([1, 2].toString())
console.log(['1', '2'].toString())

console.log(['', ''].toString())
console.log([' ', ' '].toString())
复制代码

答案：

console.log([].toString()) // ""
console.log([1].toString()) // "1"
console.log([1, 2].toString()) // "1,2"
console.log(['1', '2'].toString()) // "1,2"

console.log(['', ''].toString()) // ","
console.log([' ', ' '].toString()) // " , "
复制代码

没啥难度。

须要注意的可能就是[].toString()的时候，因为数组一项都没有，因此获得的确定是一个空字符串。

另外须要注意的是最后两个，一个是彻底的空字符串，一个是带了空格的。

6.8.2 题目二

（非数组类型的其它对象）

console.log({}.toString())
console.log({name: 'obj'}.toString())

console.log(class A {}.toString())
console.log(function () {}.toString())
console.log(/(\[|\])/g.toString())
console.log(new Date().toString())
复制代码

依照上面👆的第2,3,4条规则，答案会为：

'[object Object]'
'[object Object]'

'class A {}'
'function () {}'
'/(\[|\])/g'
'Fri Mar 27 2020 12:33:16 GMT+0800 (中国标准时间)'
复制代码

6.8.3 题目三

（原始值包装对象调用toString()）

原始值包装对象在上面👆的第四章已经讲到了，也就是：

Number{1}
String{'1'}
Boolean{true}
复制代码

这样的对象。

当它们在调用toString()方法的时候，会返回它们原始值的字符串，就像这样：

console.log(new Object(true).toString()) // "true"
console.log(new Object(1).toString()) // "1"
console.log(new Object('1').toString()) // "1"
console.log(new Object(Symbol(1)).toString()) // "Symbol(1)"
console.log(new Object(BigInt(10)).toString()) // "10"
复制代码

6.8.4 题目四

（Map、Set类型调用toString）

在作题的时候，我又想着测试一下Map、Set类型调用toString会是什么样的。

console.log(new Map().toString())
console.log(new Set().toString())
console.log(new Array(['1']).toString())
复制代码

发现结果居然是：

console.log(new Map().toString()) // "[object Map]"
console.log(new Set().toString()) // "[object Set]"
console.log(new Array(['1']).toString()) // "1"
复制代码

这看的我有点懵了，怎么前面两个的结果有点像是Object.prototype.toString.call()的调用结果呢？而若是是数组的话，却又遵循了数组转字符串的转换规则...

啊啊啊啊...好不容易弄懂了一些，这怎么又跑出来个Map、Set。

好奇心趋势着我将new Map()这个实例对象打印出来看看：

console.log(new Map())
复制代码

嘶～

我好像嗅到了一丝八卦的气息，我发现Map.prototype和并无和Number.prototype同样有它自身的toString()方法，而只是Object.prototype上才有。

而且好像有一个咱们历来没有见过的属性：Symbol(Symbol.toStringTag)，并且它的值正好是"Map"。

6.9 Symbol.toStringTag

不懂就查，搜了一波Symbol.toStringTag以后，我就恍然大悟了。

《Symbol.toStringTag》上是这样描述它的：

该Symbol.toStringTag公知的符号是在建立对象的默认字符串描述中使用的字符串值属性。它由该Object.prototype.toString()方法在内部访问。

看不懂不要紧，你这样理解就能够了，它其实就是决定了刚刚咱们提到全部数据类型中[[class]]这个内部属性是什么。

好比数字，咱们前面获得的[[class]]是Number，那我就能够理解为数字这个类它的Symbol.toStringTag返回的就是Number。

只不过在以前咱们用到的Number、String、Boolean中并无Symbol.toStringTag这个内置属性，它是在咱们使用toString.call()调用的时候才将其辨别返回。

而刚刚咱们打印出了new Map()，能够看到Symbol.toStringTag它是确确实实存在于Map.prototype上的，也就是说它是Map、Set内置的一个属性，所以当咱们直接调用toString()的时候，就会返回"[object Map]"了。

额，咱们是否是就能够这样理解呢？

没有Symbol.toStringTag内置属性的类型在调用toString()的时候至关因而String(obj)这样调用转换为相应的字符串
有Symbol.toStringTag内置属性的类型在调用toString()的时候会返回相应的标签(也就是"[object Map]"这样的字符串)

咱们经常使用的带有Symbol.toStringTag内置属性的对象有：

console.log(new Map().toString()) // "[object Map]"
console.log(new Set().toString()) // "[object Set]"
console.log(Promise.resolve().toString()) // "[object Promise]"
复制代码

并且我发现了它和Symbol.hasInstance同样，能够容许咱们自定义标签。

(Symbol.hasInsance的做用是自定义instanceof的返回值)

什么是自定义标签呢 🤔️？

也就是说，假如咱们如今建立了一个类，而且用toString.call()调用它的实例对象是会有以下结果：

class Super {}
console.log(Object.prototype.toString.call(new Super())) // "[object Object]"
复制代码

很好理解，由于产生的new Super()是一个对象嘛，因此打印出的会是"[object Object]"。

可是如今有了Symbol.toStringTag以后，咱们能够改后面的"Object"。

好比我重写一下：

class Super {
  get [Symbol.toStringTag] () {
    return 'Validator'
  }
}
console.log(Object.prototype.toString.call(new Super())) // "[object Validator]"
复制代码

这就是Symbol.toStringTag的厉害之处，它可以容许咱们自定义标签。

可是有一点要注意了，Symbol.toStringTag重写的是new Super()这个实例对象的标签，而不是重写Super这个类的标签，也就是说这里有区别的：

class Super {
  get [Symbol.toStringTag] () {
    return 'Validator'
  }
}
console.log(Object.prototype.toString.call(Super)) // "[object Function]"
console.log(Object.prototype.toString.call(new Super())) // "[object Validator]"
复制代码

由于Super它自己仍是一个函数，只有Super产生的实例对象才会用到咱们的自定义标签。

总结-toString()

内容好多啊，咱们总结着理顺来，这样才好记。

谁能够调用toString()？

除了null、undefined的其它基本数据类型还有对象均可以调用它，一般状况下它的返回结果和String同样。
在使用一个数字调用toString()的时候会报错，除非这个数字是一个小数或者是用了一个变量来盛放这个数字而后调用。(1.1.toString()或者var a = 1; a.toString();)

Object.prototype.toString.call()是作什么用的？

返回某个数据的内部属性[[class]]，可以帮助咱们准确的判断出某个数据类型
比typeof判断数据类型更加的准确

不一样数据类型调用toString()

原始数据类型调用时，把它的原始值换成了字符串
数组的toString方法是将每一项转换为字符串而后再用","链接
普通的对象(好比{name: 'obj'}这种)转为字符串都会变为"[object Object]"
函数(class)、正则会被转为源代码字符串
日期会被转为本地时区的日期字符串
原始值的包装对象调用toString会返回原始值的字符串
拥有Symbol.toStringTag内置属性的对象在调用时会变为对应的标签"[object Map]"

Symbol.toStringTag

它是某些特定类型的内置属性，好比Map、Set、Promise
主要做用是能够容许咱们自定义标签，修改Object.prototype.toString.call()的返回结果

7. valueOf()

接下来要介绍的是toString()的孪生兄弟valueOf，为何说是它的孪生兄弟呢 🤔️？

由于它们有不少相同的特性，好比前面咱们提到的toString()的存在位置，咱们能够回头看看6.1的那张图，发现有toString() 的地方也有valueOf()。

另外一个要介绍它的重要缘由是在对象转基础数据类型中，与toString()相辅相成的就是它了。

它的做用主要是：

把对象转换成一个基本数据的值。

因此咱们能够看出它两的区别：

toString主要是把对象转换为字符串
valueOf主要把对象转换成一个基本数据的值

让咱们先来看看valueOf的基本用法吧。

7.1 基本数据类型调用valueOf()

基本数据类型的调用也是很简单的，它只要返回调用者本来的值就能够了：

console.log('1'.valueOf()) // '1'
console.log(1.1.valueOf()) // 1.1
console.log(true.valueOf()) // true
console.log(Symbol(1).valueOf()) // Symbol(1)
console.log(10n.valueOf()) // 10n
复制代码

看着好像没变啊，没错，因此你能够用下面👇的方式来验证一下：

var str = '1'
console.log(str.valueOf() === str) // true
复制代码

7.2 引用类型调用valueOf()

引用类型调用valueOf()并不难，你只须要记住：

非日期对象的其它引用类型调用valueOf()默认是返回它自己
而日期对象会返回一个1970 年 1 月 1 日以来的毫秒数。

好比：

console.log([].valueOf()) // []
console.log({}.valueOf()) // {}
console.log(['1'].valueOf()) // ['1']
console.log(function () {}.valueOf()) // ƒ () {}
console.log(/(\[|\])/g.valueOf()) // /(\[|\])/g
console.log(new Date().valueOf()) // 1585370128307
复制代码

总结-valueOf()

valueOf()的基本用法

基本数据类型调用，返回调用者本来的值
非日期对象的其它引用类型调用valueOf()默认是返回它自己
而日期对象会返回一个1970 年 1 月 1 日以来的毫秒数(相似于1585370128307)。

8. toPrimitive

弄懂了难啃的toString()和valueOf()，终于到了咱们的主角toPrimitive...

泪牛满面 😢。

不过不可大意，它才是最难啃的那块知识点。

先让咱们来看看它的函数语法：

ToPrimitive(input, PreferredType?)
复制代码

参数：

参数一：input，表示要处理的输入值
参数二：PerferredType，指望转换的类型，能够看到语法后面有个问号，表示是非必填的。它只有两个可选值，Number和String。

而它对于传入参数的处理是比较复杂的，如今让咱们来看看开篇的那幅流程图：

根据流程图，咱们得出了这么几个信息：

当不传入 PreferredType 时，若是 input 是日期类型，至关于传入 String，不然，都至关于传入 Number。
若是是 ToPrimitive(obj, Number)，处理步骤以下：

若是 obj 为基本类型，直接返回
不然，调用 valueOf 方法，若是返回一个原始值，则 JavaScript 将其返回。
不然，调用 toString 方法，若是返回一个原始值，则 JavaScript 将其返回。
不然，JavaScript 抛出一个类型错误异常。

若是是 ToPrimitive(obj, String)，处理步骤以下：

若是 obj为基本类型，直接返回
不然，调用 toString 方法，若是返回一个原始值，则 JavaScript 将其返回。
不然，调用 valueOf 方法，若是返回一个原始值，则 JavaScript 将其返回。
不然，JavaScript 抛出一个类型错误异常。

(总结来源《冴羽-JavaScript深刻之头疼的类型转换(上)》)

上面👆的图其实只是看着很复杂，细心的小伙伴可能会发现，在图里红框裱起来的地方，只有toString()和valueOf()方法的执行顺序不一样而已。

若是 PreferredType 是 String 的话，就先执行 toString()方法

若是 PreferredType 是 Number 的话，就先执行 valueOf()方法

霖呆呆建议你先本身在草稿纸上将这幅流程图画一遍，以后再来作题有助于记忆 😁。

9. 对象转字符串

9.1 题目一

（最基本的转换）

好吧，呆呆，我看你扯了这么多toPrimitive的转换流程，可我也没看出有什么实际的用处啊。

这...没啊，其实咱们很早就用上了啊，只不过你以前可能不知道而已。

好比当咱们使用String()来转换一个对象为字符串的时候：

console.log(String({}))
复制代码

你们都知道结果是：

"[object Object]"
复制代码

但它为何是这样呢？看着结果和toString()调用的结果好像啊。

这里其实就用到了toPrimitive的转换规则呀。

你看看，咱们把上面👆的代码换成toPrimitive的伪代码看看：

toPrimitive({}, 'string')
复制代码

OK👌，来回顾一下刚刚的转换规则：

input是{}，是一个引用类型，PerferredType为string
因此调用toString()方法，也就是{}.toString()
{}.toString()的结果为"[object Object]"，是一个字符串，为基本数据类型，而后返回，到此结束。

哇～

是否是一切都说得通了，好像不难吧 😁。

没错，当使用String()方法的时候，JS引擎内部的执行顺序确实是这样的，不过有一点和刚刚提到的步骤不同，那就是最后返回结果的时候，其实会将最后的基本数据类型再转换为字符串返回。

也就是说上面👆的第三步咱们得拆成两步来：

{}.toString()的结果为"[object Object]"，是一个字符串，为基本数据类型
将这个"[object Object]"字符串再作一次字符串的转换而后返回。(由于"[object Object]"已是字符串了，因此原样返回，这里看不出有什么区别)

将最后的结果再转换为字符串返回这一步，其实很好理解啊。你想一想，我调用String方法那就是为了获得一个字符串啊，你要是给我返回一个number、null啊什么的，那不是隔壁老王干的事嘛～

（咳咳，霖呆呆的真名姓王哈 [害羞～]）

9.2 题目二

上面👆的转换好像并不能看出来最后会转为字符串那一步的效果啊，那么来看看这道题：

console.log(String(null))
console.log(String(new Object(true)))
复制代码

想一想这里的转换规则。

对于String(null)：

传入的input是个基础数据类型，这简单啊，直接返回它就能够了
返回的值是一个null，而后再把它转为字符串"null"，因此最后返回的是"null"。

对于String(new Object(true))：

传入的new Object(true)是一个基本类型的包装类Boolean{true}
它也是属于引用类型，所以会调用toString()
而基本类型的包装类咱们在题6.8.3中已经说到了，它调用toString()方法是会返回原始值的字符串，也就是"true"
返回值"true"是基本数据类型，最后再进行一层字符串转换(仍是它自己)，而后返回"true"。

答案：

console.log(String(null)) // "null"
console.log(String(new Object(true))) // true
复制代码

若是你能看到这的话，怎样？是否是有点那啥感受了。

9.3 题目三

（数组转字符串）

数组转字符串我总结了一下主要是这样：

空数组[]是被转换为空字符串""
如果数组不为空的话，则将每一项转换为字符串而后再用","链接

配合着引用类型转字符串我画了一张图。

先来看点简单的：

console.log(String([]))
console.log(String([1]))
console.log(String([1, 2]))
console.log(String(['1', '2']))
复制代码

答案：

console.log(String([])) // ""
console.log(String([1])) // "1"
console.log(String([1, 2])) // "1,2"
console.log(String(['1', '2'])) // "1,2"
复制代码

没啥难度。

让咱们用toPrimitive的转换规则来讲一下：

对于String([1, 2])：

input为数组[1, 2]，所以使用toString()方法调用
[1, 2]转为字符串为"1,2"，字符串"1,2"为原始数据类型，则返回(因为返回值都是字符串我就省略还有一个字符串的转换过程不说了)

9.4 题目四

让咱们加上Boolean、函数、NaN看看：

console.log(String([true, false]))
console.log(String([NaN, 1]))

console.log(String([function () {}, 1]))
console.log(String([{ name: 'obj' }, { name: 'obj2' }]))
复制代码

解析：

类型全都是数组，就是将数组的每一项转换为字符串而后用","链接
前两个都没啥问题
第三个，函数转为字符串是其源代码字符串，也就是"function () {}"
第四个，里面的每一项是一个对象，且转为字符串为"[object, Object]"，因此结果会有两个"[object Object]"用","链接

答案为：

console.log(String([true, false])) // "true,false"
console.log(String([NaN, 1])) // "NaN,1"

console.log(String([function () {}, 1])) // "function () {},1"
// "[object Object],[object Object]"
console.log(String([{ name: 'obj' }, { name: 'obj2' }]))
复制代码

因此作这类题时，你通常只要谨记这个准则：

如果数组不为空的话，则将每一项转换为字符串而后再用","链接

就能够了，而后再看里面具体的每一项会被转成什么。

9.5 题目五

(日期类型转字符串)

console.log(String(new Date()))
console.log(String(new Date('2020/12/09')))
复制代码

日期类型的对象转字符串在题6.8.2中也已经说到过了，它会被转为本地时区的日期字符串，因此结果为：

console.log(String(new Date())) // Sat Mar 28 2020 23:49:45 GMT+0800 (中国标准时间)
console.log(String(new Date('2020/12/09'))) // Wed Dec 09 2020 00:00:00 GMT+0800 (中国标准时间)
复制代码

总结-对象转字符串

对于对象转字符串，也就是调用String()函数，总结以下：

若是对象具备 toString 方法，则调用这个方法。若是他返回一个原始值，JavaScript 将这个值转换为字符串，并返回这个字符串结果。
若是对象没有 toString 方法，或者这个方法并不返回一个原始值，那么 JavaScript 会调用 valueOf 方法。若是存在这个方法，则 JavaScript 调用它。若是返回值是原始值，JavaScript 将这个值转换为字符串，并返回这个字符串的结果。()
不然，JavaScript 没法从 toString 或者 valueOf 得到一个原始值，这时它将抛出一个类型错误异常。

其实也就是走的toPrimitive(object, 'string')这种状况。

10. 对象转数字

若是你们弄懂了对象转字符串的话，那么弄懂对象转数字也不难了。

刚刚咱们说了对象转字符串也就是toPrimitive(object, 'string')的状况，

那么对象转数字就是toPrimitive(object, 'number')。

区别就是转数字会先调用valueOf()后调用toString()。

10.1 题目一

（最基本的转换）

console.log(Number({}))
console.log(Number([]))
console.log(Number([0]))
console.log(Number([1, 2]))
复制代码

对于Number({})：

传入的是一个对象{}，所以调用valueOf()方法，该方法在题7.1中已经提到过了，它除了日期对象的其它引用类型调用都是返回它自己，因此这里仍是返回了对象{}
valueOf()返回的值仍是对象，因此继续调用toString()方法，而{}调用toString()的结果为字符串"[object Object]"，是一个基本数据类型
获得基础数据类型了，该要返回了，不过在这以前还得将它在转换为数字才返回，那么"[object Object]"转为数字为NaN，因此结果为NaN

对于Number([])：

传入的是一个数组[]，所以调用valueOf()方法，返回它自身[]
[]继续调用toString()方法，而空数组转为字符串是为""
最后再将空字符串""转为数字0返回

对于Number([0])：

由于[0]转为字符串是为"0"，最后在转为数字0 返回

对于Number([1, 2])：

传入的是一个数组[1, 2]，因此调用valueOf()方法返回的是数组自己[1,2]
因此继续调用toString()方法，此时被转换为了"1,2"字符串
"1,2"字符串最后被转为数字为NaN，因此结果为NaN

结果：

console.log(Number({})) // NaN
console.log(Number([])) // 0
console.log(Number([0])) // 0
console.log(Number([1, 2])) // NaN
复制代码

10.2 题目二

（日期类型转数字）

来看个比较特殊的日期类型转数字

console.log(Number(new Date()))
复制代码

过程解析：

传入的是一个日期类型的对象new Date()，所以调用valueOf()，在题目7.2中已经说了，日期类型调用valueOf()是会返回一个毫秒数
毫秒数为数字类型，也就是基本数据类型，那么直接返回(其实还有一步转为数字类型的过程)，因此结果为1585413652137

答案：

console.log(Number(new Date())) // 1585413652137
复制代码

总结-对象转数字

因此对于对象转数字，总结来讲和对象转字符串差很少：

若是对象具备 valueOf 方法，且返回一个原始值，则 JavaScript 将这个原始值转换为数字并返回这个数字
不然，若是对象具备 toString 方法，且返回一个原始值，则 JavaScript 将其转换并返回。
不然，JavaScript 抛出一个类型错误异常。

可算是给👴整完了这206个console.log()，吸口气休息一会...

后语

知识无价，支持原创。

参考文章：

你盼世界，我盼望你无bug。这篇文章就介绍到这里。

其实我在学习数据类型转换的的历程是这样的：

满心欢喜 -> 决心弄懂 -> 眉头紧锁 -> 表情凝重 -> 生无可恋 -> 小彻小悟

确实有一个生无可恋的时候，哈哈哈，不过在坚持下去以后也算是"小彻小悟"吧，为啥不是大彻大悟，这个...人仍是要谦虚点的哈。

用心创做，好好生活。若是你以为文章对你有帮助的话来个赞👍哦，谢谢啦～ 😁。

喜欢霖呆呆的小伙还但愿能够关注霖呆呆的公众号 LinDaiDai 或者扫一扫下面的二维码👇👇👇.

我会不定时的更新一些前端方面的知识内容以及本身的原创文章🎉

你的鼓励就是我持续创做的主要动力 😊.