从206个console.log完全弄懂数据类型转换的前世今生 上|博客系列
# 1. 其它数据类型转布尔值
转化为布尔值的情况是很简单的。
当我们在使用Boolean()来进行转换时，有如下转换规则：
| 参数类型 | 结果 |
|---|---|
| false、undefined、null、+0、-0、NaN、“” | false |
| 除了上面的情况 | true |
（另外需要注意的是，如果在使用Boolean()时不传参数结果也是为false的）
# 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.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。
# 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))
@前端进阶之旅: 代码已经复制到剪贴板
结果为：
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
@前端进阶之旅: 代码已经复制到剪贴板
# 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转为0Symbol会报错- 其它的基本类型，包括非纯数字的字符串、
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. 原始值转对象
原始值，也就是基础数据类型。
