重学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 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
Element Card 卡片的具体使用
Jul 26 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 静态页面中显示动态内容
2009/08/14 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Flask框架信号用法实例分析
2018/07/24 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
线程同步的方法
2016/11/23 面试题
毕业生的自我鉴定
2013/10/29 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
PyMongo 查询数据的实现
2021/06/28 Python