重学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,实现插入排序实现代码
Jul 31 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 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+js iframe实现上传头像界面无跳转
2014/04/29 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
用js编写留言板
2020/03/17 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python中django学习心得
2017/12/06 Python
python 定时修改数据库的示例代码
2018/04/08 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
python中entry用法讲解
2020/12/04 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
优秀学生获奖感言
2014/02/15 职场文书
年会主持词结束语
2014/03/27 职场文书
高三教师工作总结2015
2015/07/21 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书