重学JS之显示强制类型转换详解

更新时间：2019年06月30日 14:14:24 作者：william

这篇文章主要给大家介绍了关于重学JS之显示强制类型转换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

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中的常见显示强制类型转换做了一个小结，希望能对大家理解有所帮助。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

JS实现横向拉伸动感伸缩菜单效果代码
这篇文章主要介绍了JS实现横向拉伸动感伸缩菜单效果,涉及javascript基于定时函数及鼠标事件操作页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
js设置控件的隐藏与显示的两种方法
js设置控件的隐藏与显示，设置控件style的display和visibility属性就可以了，下面有个示例，需要的朋友可以参考下
2014-08-08
js 实现锚点跳转示例解析
这篇文章主要为大家介绍了js实现锚点跳转示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
史上最为详细的javascript继承（推荐）
这篇文章主要介绍了javascript继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
JavaScript的setter与getter方法
这篇文章主要为大家详细介绍了JavaScript的setter与getter方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
js的with语句使用方法
js的with语句使用方法...
2007-09-09
js仿微信抢红包功能
这篇文章主要为大家详细介绍了js仿微信抢红包功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
Javascript小技巧之生成html元素
Javascript 生成 HTML元素的方法在本文中介绍2种，第一种是比较正规的创建元素方法，第二种是利用javascript中的write()方法直接写出html元素。
2014-05-05
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
这篇文章主要介绍了微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法,涉及事件绑定及this.setData动态设置属性数据的相关操作技巧,需要的朋友可以参考下
2017-12-12
javascript实现自动填写表单实例简析
这篇文章主要介绍了javascript实现自动填写表单的方法,以一个简单实例形式分析了JavaScript结合浏览器设置实现自动保存表单的相关技巧,需要的朋友可以参考下
2015-12-12