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


Posted in Javascript onJune 30, 2019

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

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

Javascript 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 #Javascript
微信小程序如何自定义table组件
Jun 29 #Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 #Javascript
微信小程序如何调用json数据接口并解析
Jun 29 #Javascript
pm2启动ssr失败的解决方法
Jun 29 #Javascript
localstorage实现带过期时间的缓存功能
Jun 28 #Javascript
vue分页器组件编写方法详解
Jun 28 #Javascript
You might like
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php继承的一个应用
2011/09/06 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
vue-router命名视图的使用讲解
2019/01/19 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Django返回HTML文件的实现方法
2020/09/17 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
电子商务应届生自我鉴定
2014/01/13 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
关于保护环境的建议书
2014/05/13 职场文书
初婚初育证明范本
2014/11/24 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
学校运动会简讯
2015/07/20 职场文书
七年级作文之下雨天
2019/12/23 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技