简介

为了巩固一下身为前端开发小菜鸟必备的脸面，从而让脸皮更加厚实一些，在这条道路活的更加滋润一些，故此开始整理一些JavaScript（脸面）使用的一些基础细节。
欢迎各位大牛莅临指导，从而让我在加厚脸皮的道路上走的更远，从而可以用脸皮挡子弹，挡导弹，挡核弹，然后无敌。哈哈哈！
今天从数据类型的转换规则开始。

类型转换

显式类型转换

显式类型转换方式包含常用的Number()、parseInt()、parseFloat()、String()、toString()、Boolean()等，这些方法都是通过自身的方法来进行数据类型的强制转换。

Number()
- 如果是布尔值，true 和 false 分别被转换为 1 和 0；
- 如果是数字，返回自身；
- 如果是 null，返回0；
- 如果是 undefined，返回 NaN；
- 如果是字符串，遵循以下规则：如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，0B / 0b 开头的二进制数字字符串，0O / 0o 开头的八进制数字字符串，允许包含正负号），则将其转换为十进制；如果字符串中包含有效的浮点格式，将其转换为浮点数值；当有多个小数点的时候只保留其整数部分；如果是空字符串，将其转换为 0；如果不是以上格式的字符串，均返回 NaN；
- 如果是 Symbol，抛出错误；
- 如果是对象，并且部署了 [Symbol.toPrimitive]，那么调用此方法，否则调用对象的 valueOf()方法，然后依据前面的规则转换返回的值；当valueOf()方法返回引用数据类型的时候，则调用对象的 toString()方法，再次依照前面的顺序转换返回对应的值。都不满足则返回NaN。
```
console.log(Number(true))  // 1
console.log(Number(false)) // 0
console.log(Number(undefined)) // NaN
console.log(Number()) // 0
console.log(Number(null)) // 0
console.log(Number(123)) // 123
console.log(Number('123')) // 123
console.log(Number('123.656.789')) // 123
console.log(Number('123.00')) // 123
console.log(Number('123.01')) // 123.01
console.log(Number('')) // 0
console.log(Number('0b0111')) // 7
console.log(Number('0B0111')) // 7
console.log(Number('0o1234')) // 668
console.log(Number('0O1234')) // 668
console.log(Number('0x1234')) // 4660
console.log(Number('0X1234')) // 4660
console.log(Number('0abc')) // NaN
let obj = {value: 0,valueOf() {return 1},toString() {return 2},[Symbol.toPrimitive] () {return 3}
}
console.log(Number(obj)) // 3
let obj1 = {value: 0,valueOf() {return 1},toString() {return 2}
}
console.log(Number(obj1)) // 1
let obj2 = {value: 0,toString() {return 2}
}
console.log(Number(obj2)) // 2
let obj3 = {valueOf() {return '1aaa'},toString() {return 2}
}
console.log(Number(obj3)) // NaN
console.log([].valueOf()) // []
console.log([].toString()) // ''
console.log(Number([])) // 0
console.log({}.valueOf()) // {}
console.log({}.toString()) // [object Object]
console.log(Number({})) // NaN
console.log(Number(Symbol())) // Uncaught TypeError: Cannot convert a Symbol value to a number
```
  对于对象来讲，根据优先级进行排序， [Symbol.toPrimitive] > valueOf() > toString()。
  经过测试发现，当Number(obj)时，当显示声明obj的valueOf和toString方法时，当调用obj的valueOf方法后返回不包含数字的字符串，调用obj的toString方法返回数值时，运行Number(obj)时并不会满足当调用valueOf方法为NaN时再重新调用对象的toString方法，而是直接返回NaN。

parseInt()

字符串最前面的空格会被忽略，从第一个非空格字符开始转换；
如果第一个字符不是数值字符、加号或减号，parseInt()立即返回 NaN；
空字符串也会返回NaN；
如果第一个字符是数值字符、加号或减号，则继续依次检测每个字符，直到字符串末尾，或碰到非数值字符；
当只传递一个参数的时候，且字符串中的第一个字符是0，它可以识别不同的整数格式（十进制、八进制、十六进制）；
不同的数值格式很容易混淆，因此 parseInt()也接收第二个参数，用于指定底数（进制数）；
被转换的字符串起于"0x"/“0X” --> 十六进制转为十进制；
被转换的字符串起于"0" --> 八进制或十进制（由解释器决定）转为十进制；
被转换字符串起于其他值 --> 十进制转为十进制；

对于入参不为字符串类型的参数，全部返回NaN。

console.log(parseInt('123'))  // 123
console.log(parseInt(' 123')) // 123
console.log(parseInt('+123')) // 123
console.log(parseInt('-123')) // -123
console.log(parseInt('abbb')) // NaN
console.log(parseInt('')) // NaN
console.log(parseInt('12sss')) // 12
console.log(parseInt('00111')) // 111
console.log(parseInt('00111')) // 111
console.log(parseInt('01234')) // 1234
console.log(parseInt('01234')) // 1234
console.log(parseInt('0x1234')) // 4660
console.log(parseInt('0X1234')) // 4660
console.log(parseInt('00111', 2)) // 7
console.log(parseInt('00111', 2)) // 7
console.log(parseInt('01234', 8)) // 668
console.log(parseInt('01234', 8)) // 668
console.log(parseInt('1234', 16)) // 4660, 指定为16进制以后，0x|0X可以省略
console.log(parseInt('1234', 16)) // 4660
console.log(parseInt()) // NaN
console.log(parseInt(undefined)) // NaN
console.log(parseInt(null)) // NaN
console.log(parseInt(true)) // NaN
console.log(parseInt(false)) // NaN
console.log(parseInt(NaN)) // NaN
console.log(parseInt([])) // NaN
console.log(parseInt({})) // NaN

parseFloat()

与parseInt方法类似，在parseInt基础上有下述不同的地方：

如果第一个字符是数值字符、加号或减号，则继续依次检测每个字符，直到字符串末尾，或碰到一个无效的浮点数值字符为止；
始终忽略字符串开头的零。十六进制数值始终会返回 0；

只解析十进制值，因此不能指定底数。最后，如果字符串表示整数（没有小数点或者小数点后面只有一个零），则 parseFloat()返回整数。

console.log(parseFloat('123'))  // 123
console.log(parseFloat(' 123')) // 123
console.log(parseFloat(' 123.456.789')) // 123.456
console.log(parseFloat('+123')) // 123
console.log(parseFloat('-123')) // -123
console.log(parseFloat('abbb')) // NaN
console.log(parseFloat('')) // NaN
console.log(parseFloat('12sss')) // 12
console.log(parseFloat('00111')) // 111
console.log(parseFloat('00111')) // 111
console.log(parseFloat('01234')) // 1234
console.log(parseFloat('01234')) // 1234
console.log(parseFloat('0x1234')) // 0
console.log(parseFloat('0X1234')) // 0
console.log(parseFloat()) // NaN
console.log(parseFloat(undefined)) // NaN
console.log(parseFloat(null)) // NaN
console.log(parseFloat(true)) // NaN
console.log(parseFloat(false)) // NaN
console.log(parseFloat(NaN)) // NaN
console.log(parseFloat([])) // NaN
console.log(parseFloat({})) // NaN

String()

如果值有toString()方法，则调用该方法（不传参数）并返回结果。
如果值是null，返回"null"。

如果值是 undefined，返回"undefined"。

console.log(String('123'))  // '123'
console.log(String(' 123')) // ' 123'
console.log(String(' 123.456.789')) // ' 123.456.789'
console.log(String('+123')) // '+123'
console.log(String('-123')) //' -123'
console.log(String('abbb')) //'abbb'
console.log(String('')) // ''
console.log(String('00111')) // '00111'
console.log(String()) // ''
console.log(String(undefined)) // 'undefined'
console.log(String(null)) // 'null'
console.log(String(true)) // 'true'
console.log(String(false)) // 'false'
console.log(String(NaN)) // 'NaN'
console.log(String([])) // ''
console.log(String({})) // '[object Object]'

toString()
- toString()方法可见于数值、布尔值、对象和字符串值；
- null和undefined值没有toString()方法；
- 多数情况下，toString()不接收任何参数。不过，在对数值调用这个方法时，toString()可以接收一个底数参数，即以什么底数来输出数值的字符串表示。默认情况下，toString()返回数值的十进制字符串表示。而通过传入参数，可以得到数值的二进制、八进制、十六进制，或者其他任何有效基数的字符串表示。
```
let a = 123
console.log(a.toString()) // '123'
console.log(a.toString(2)) // '1111011'
console.log(a.toString(8)) // '173'
console.log(a.toString(16)) // '7b'
let b = '123'
console.log(b.toString()) // '123'
let c  = []
console.log(c.toString()) // ''
let d = {}
console.log(d.toString()) // '[object Object]'
let e = true
console.log(e.toString()) // 'true'
```

Boolean()

除了 undefined、 null、 false、‘’、 0（包括 +0，-0）、 NaN 转换出来是 false，其他都是 true。

console.log(Boolean(' 123')) // true
console.log(Boolean(' 123.456.789')) // 'true
console.log(Boolean('+123')) // true
console.log(Boolean('-123')) // true
console.log(Boolean('abbb')) // true
console.log(Boolean('')) // false
console.log(Boolean('00111')) // true
console.log(Boolean(undefined)) // false
console.log(Boolean(null)) // false
console.log(Boolean(true)) // true
console.log(Boolean(false)) // false
console.log(Boolean(NaN)) // false
console.log(Boolean([])) // true
console.log(Boolean({})) // true

隐式类型转换

凡是通过逻辑运算符 (&&、 ||、!)、运算符 (+、-、*、/)、关系操作符 (>、 <、 <= 、>=)、相等运算符 (==) 或者 if/while 条件的操作，如果遇到两个数据类型不一样的情况，都会出现隐式类型转换。

==运算符
- 如果类型相同，无须进行类型转换；
- 如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；
- 如果其中一个是 Symbol 类型，那么返回 false；
- 两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；
- 如果一个操作值是 boolean，那么转换成 number；
- 如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为基本数据类型再进行判断（调用 object 的 valueOf/toString 方法进行转换）。
```
console.log(123 == 123) // true
console.log(undefined == null) // true
console.log(undefined == 0) // false
console.log(null == 0) // false
console.log(undefined == '') // false
console.log(null == '') // false
console.log(Symbol() == Symbol()) // false
console.log('' == 0) // true
console.log(true == 1) // true
console.log(false == 0) // true
var a = {value: 0,valueOf: function() {this.value++;return this.value;
}
};
console.log(a == 1 && a == 2 && a ==3) // true
```
+运算符
- ‘+’ 号操作符，不仅可以用作数字相加，还可以用作字符串拼接。仅当 ‘+’ 号两边都是数字时，进行的是加法运算；如果两边都是字符串，则直接拼接，无须进行隐式类型转换。
- 如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用 toString() 方法进行字符串拼接；如果是纯对象、数组、正则等，则默认调用对象的转换方法进行转换，然后再进行拼接。
- 如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算，对象的情况还是参考上一条规则。
- 如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接。
```
 console.log(1 + 2 ) // 3console.log('1' + '2') // 12console.log('1' + undefined) // 1undefinedconsole.log('1' + null) // 1nullconsole.log('1' + true) // 1trueconsole.log('1' + 1n) // 11console.log(1 + undefined) // NaNconsole.log(1 + null) // 1console.log(1 + true) // 2console.log('1' + 2) // 12console.log('1' + []) // 1console.log('1' + {}) // 1[object Object]console.log('1' + new Date()) // 1Tue Nov 01 2022 10:47:49 GMT+0800 (中国标准时间)console.log(1 + 1n) // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions 不能把BigInt和Number类型直接混合相加
```

Object的转换规则

如果部署了 Symbol.toPrimitive 方法，优先调用再返回；
调用 valueOf()，如果转换为基础类型，则返回；
调用 toString()，如果转换为基础类型，则返回；

如果都没有返回基础类型，会报错。

var obj = {value: 1,valueOf() {return 2;},toString() {return '3'},[Symbol.toPrimitive]() {return 4}
}
console.log(obj + 1); // 输出5
// 因为有Symbol.toPrimitive，就优先执行这个；如果Symbol.toPrimitive这段代码删掉，则执行valueOf打印结果为3；如果valueOf也去掉，则调用toString返回'31'(字符串拼接)
// 再看两个特殊的case：
10 + {}
// "10[object Object]"，注意：{}会默认调用valueOf是{}，不是基础类型继续转换，调用toString，返回结果"[object Object]"，于是和10进行'+'运算，按照字符串拼接规则来。
[1,2,undefined,4,5] + 10
// "1,2,,4,510"，注意[1,2,undefined,4,5]会默认先调用valueOf结果还是这个数组，不是基础数据类型继续转换，也还是调用toString，返回"1,2,,4,5"，然后再和10进行运算，还是按照字符串拼接规则。

JavaScript 数据类型的转换相关推荐

JavaScript数据类型及转换
1.数据类型以及数据名 1. Array 数组 a : 前缀 aItems : 实例 2. Boolean 布尔值 b : 前缀 bIsComplete : 实例 3. Float 浮点数 f : 前 ...
Javascript数据类型强制转换
一.转换为数值类型 1.Number(参数) 把任何的类型转换为数值类型 A.如果是布尔值,false为0,true为1 B.如果是数字,转换成为本身.将无意义的后导0去掉. C.如果Null转换为0 ...
JavaScript学习（八十五）—数据类型的转换
JavaScript学习(八十五)-数据类型的转换一.什么是数据类型的转换? 简单来说,就是把一种数据类型的变量转化为另外一种数据类型二.转化为字符串类型 //把数字转化为字符串变量.toStr ...
javaScript数据类型转换方式
大家好,我是瓶盖袁 !今天给大家介绍一下javaScript数据类型以及的转换方式,废话不多说我们步入正题. 数据类型 ECMAScript中有五种数据Number 数值,String 字符串,Boo ...
18100出多少取整_关于JavaScript数据类型，你知道多少？
JavaScript的数据类型是每一个前端开发者必须要掌握的内容,也是最基础最重要的角色之一,关于JavaScript数据类型你知道多少? JavaScript一共有7种数据类型:String.Num ...
类型转为数字_JavaScript自动数据类型的转换
JavaScript自动数据类型的转换运算符算术运算符 +,-,*,l,%(取余数) 关系运算符 .<=.>=.==.===.!=!== 逻辑运算符 &&与(且).|或 ...
JavaScript筑基篇(二)-JavaScript数据类型
说明介绍JavaScript数据类型目录前言参考来源前置技术要求 JavaScript的6种数据类型哪6种数据类型 undefined 类型 null 类型 boolean 类型 numb ...
javascript 数据类型与类型转换
JavaScript 数据类型值类型(基本类型): 字符串(String) 数字(Number) 布尔(Boolean) 空(Null) 未定义(Undefined) Symbol 注:Symbol ...
JavaScript 数据类型之 Symbol、BigInt
JavaScript数据类型在JavaScript中,我们已知有5种基本数据类型:Undefined.Null.String.Number.Boolean. 当ES6问世,直至今日,又新增了两种基本 ...

JavaScript 数据类型的转换

简介

类型转换

显式类型转换

Number()

parseInt()

parseFloat()

String()

toString()

Boolean()

隐式类型转换

==运算符

+运算符

Object的转换规则

JavaScript 数据类型的转换相关推荐

最新文章

热门文章