重学JS：显式强制类型转换

xiangchaobin 发布于2019-08-23 18:23 / 1914人阅读

ToString

ToString负责处理非字符串到字符串的强制类型转换，常用的字符串化方法String()、toString()。

基本类型值的字符串化规则：

null转换为"null"

undefined转换为"undefined"

true转化为"true"

数字的字符串化遵循通用规则，极大值或者极小值采用科学计数法表示

普通对象在字符串化时，实际执行Object.prototype.toString()，返回该对象的类型[object type]，例如：

var test = {a : "test"}
console.log(test.toString()) // "[object Object]"
console.log(String(test)) // "[object Object]"

但是当对象有自己的toString方法时，字符串化时就会调用该方法并返回该方法的返回值，例如：

var obj = {
  a: "test",
  toString: function () {
    return 1
  }
}
console.log(obj.toString()) // 1
console.log(String(obj)) // 1

数组在做字符串化时，将数组所有元素字符串化再用"，"连接，例如：

var arr = [1, 2]
console.log(arr.toString()) // "1,2"
console.log(String(arr)) // "1,2"

JSON.stringify()

JSON.stringify()在将JSON对象序列化为字符串时，也涉及到了字符串化的相关规则。

对大多数简单值来说，JSON字符串化和toString()的效果基本相同，例如：

console.log(JSON.stringify("test")) // ""test""
console.log(JSON.stringify(1)) // "1"
console.log(JSON.stringify(null)) // "null"

但是JSON.stringify()在对象中遇到function() {}、undefined、Symbol时会自动将其忽略，在数组中则会返回null，例如：

var obj1 = {
  a: undefined,
  b: function () {},
  c: Symbol()
}
console.log(JSON.stringify(obj1)) // "{}"
console.log(JSON.stringify([undefined, function () {}, 1])) // "[null, mull, 1]"

当对象执行JSON.stringify()方法时，如果对象中存在toJSON方法，用它的返回值来进行序列化，例如：

var obj2 = { 
  a: undefined,
  b: function () {},
  c: Symbol(),
  toJSON: function () {
    return {a: "replace"}
  }
}
console.log(JSON.stringify(obj2)) // "{"a":"replace"}"

ToNumber

ToNumber负责将非数字转化为数字，Number()、parseInt()和parseFloat()都可以将非数字转化为数字

Number()

Number()函数的转换规则：

如果是Boolean类型，true和false分别转换为0和1

如果是数字值，只是简单的传入和返回

如果是null值，返回0

如果是undefined，返回NaN

如果是字符串，遵循下列规则：

如果字符串中只包含数字，则将其转变为十进制数

如果字符串中包含有效的浮点格式，则将其转换为对应的浮点数值

如果字符串中包含有效的十六进制格式，则将其转换为相同大小的十进制数

如果字符串是空，则将其转换为0

如果字符串中包含除上述格式之外的字符串，则将其转换为NaN

如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换值。如果转换的结果是NaN，则调用对象的toString()方法，然后再依次照前面的规则转换返回的字符串值

例如：

console.log(Number(true)) // 1
console.log(Number(1)) // 1
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN
console.log(Number("11")) // 11
console.log(Number("1.1")) // 1.1
console.log(Number("0xf")) // 15
console.log(Number("")) // 0
var a = {
  valueOf: function () {
    return "10"
  }
}
var b = {
  toString: function () {
    return "10"
  }
}
var c = [1, 0]
c.toString = function () {
  return c.join("")
}
console.log(Number(a)) // 10
console.log(Number(b)) // 10
console.log(Number(c)) // 10

parseInt()

parseInt()转换规则：

parseInt()函数在转换字符串时，会忽略字符串前面的空格，直到找到第一个非空格字符

如果第一个字符不是数字字符或者负号，parseInt()就会返回NaN

如果第一个字符是数字字符，parseInt()就会继续解析，直到解析完所有后续字符或者遇到一个非数字字符

如果字符串中的第一个字符是数字字符，parseInt()也能识别各种进制数

例子：

console.log(parseInt("a")) // NaN
console.log(parseInt("11")) // 11
console.log(parseInt("11aa")) // 11
console.log(parseInt("0xf")) // 15

parseFloat()

parseFloat()转换规则:

与parseInt()函数类似，parseFloat()也是从第一个字符开始解析每一个字符，而且也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止

解析时会忽略前导的0

只会解析十进制数

例子：

console.log(parseFloat("12.3a")) // 12.3
console.log(parseFloat("0xf")) // 0
console.log(parseFloat("01.1")) // 1.1

ToBoolean

布尔强制类型转换的假值列表：

undefined

null

false

+0、-0和NaN

除了上述列表以外的值在转换的时候都应该是真值，强制布尔类型转换常用Boolean()或者!!，第一个!将值强制转为布尔类型，但同时还将真假值反转，第二个!将结果返回原值，例子：

console.log(Boolean("0")) // true
console.log(Boolean([])) // true
console.log(Boolean(undefined)) // false
console.log(!!"0") // true
console.log(!![]) // true
console.log(!!undefined) // false

总结

这篇文章对JS中的常见显式强制类型转换做了一个小结，希望能对大家理解有所帮助。如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞

专线服务混合云显式类型转换强制转换类型类型强制转换强制类型转换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105149.html

重学JS: 隐式强制类型转换

摘要：隐式强制类型转换指的是那些隐藏的强制类型转换，副作用也不是很明显，事实上，只要自己觉得不够明显的强制类型转换都可以算作隐式强制类型转换，接下来，此文将会介绍几种常见的隐式类型转换。隐式强制类型转换指的是那些隐藏的强制类型转换，副作用也不是很明显，事实上，只要自己觉得不够明显的强制类型转换都可以算作隐式强制类型转换，接下来，此文将会介绍几种常见的隐式类型转换。加法操作符转换规则： ...

Fourierr 2019-08-23 18:31 评论0 收藏0
重学前端学习笔记（六）--JavaScript类型有哪些你不知道的细节？

摘要：的码点被称为基本字符区域。关于的介绍，我准备用文档阮一峰来做一些介绍，具体的可以参考文档引入的原因的对象属性名都是字符串，这容易造成属性名的冲突。其他的一些属性可以去看文档阮一峰注意函数前不能使用命令，否则会报错。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完...

Lsnsh 2019-08-02 16:15 评论0 收藏0
重学前端学习笔记（六）--JavaScript类型有哪些你不知道的细节？

摘要：的码点被称为基本字符区域。关于的介绍，我准备用文档阮一峰来做一些介绍，具体的可以参考文档引入的原因的对象属性名都是字符串，这容易造成属性名的冲突。其他的一些属性可以去看文档阮一峰注意函数前不能使用命令，否则会报错。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完...

joyvw 2019-08-23 17:13 评论0 收藏0
重学前端学习笔记（六）--JavaScript类型有哪些你不知道的细节？

摘要：的码点被称为基本字符区域。关于的介绍，我准备用文档阮一峰来做一些介绍，具体的可以参考文档引入的原因的对象属性名都是字符串，这容易造成属性名的冲突。其他的一些属性可以去看文档阮一峰注意函数前不能使用命令，否则会报错。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完...

zlyBear 2019-08-29 18:46 评论0 收藏0