JavaScript中的object转换成number或string规则介绍


Posted in Javascript onDecember 31, 2014

在JavaScript程序编写过程中,根据不同的上下文,JS会自动将object转换成number或者string后再处理。这种自动转换的规则如下:

object自动转换成string的规则:

1.如果object所属类覆写了toString()方法,则调用该方法。如果toString()调用的返回结果为Primitive(string、number、boolean、undefined、null),则将该Primitive值转换成string后返回。

2.如果object所属类没有覆写toString()方法 ? toString()调用的返回结果为”[object Object]“;或者覆写了toString()方法但该方法返回结果为对象。那么JS将调用object的valueOf()方法,如果valueOf()调用的返回结果为Primitive(string、number、boolean、undefined、null),则将该Primitive值转换成string后返回。

3.如果上述两点均无法满足,无法通过调用object的toString()方法或者valueOf()方法来获取Primitive值,那么JS将抛出TypeError错误。

object自动转换成number的规则:

1.调用object的valueOf()方法,如果得到的是Primitive值,则将该Primitive值转换成number后返回。

2.如果无法从valueOf()方法中获取Primitive值,那么调用object的toString()方法;如果toString()返回的是Primitive值,则将该Primitive值转换成number后返回。

3.如果上述两点均无法满足,那么JS将抛出TypeError错误。

可以看到,object自动转换成string和object自动转换成number的规则其实是一致的,不同之处在于toString()方法和valueOf()方法的调用次序。

根据上述规则,可以很好的理解一些转换结果:

1.对于空数组,当将其转换成number时,得到的结果为0。这是因为首先会调用array的valueOf()方法,由于valueOf()返回的是数组对象本身,因此接下来JS会调用空数组的toString()方法;因为空数组toString()后返回结果为空字符串,因此最终会将空字符串转换成数字0后返回。

2.对于只有一个数字成员的数组来说,应用同样的规则转换成number,最后得到的结果就是该数字。

3.对于有多个数字成员的数组来说,由于无法将字符串转换成number,因此最后得到的结果为NaN。

何时转换成string?何时转换成number?

对object进行自动类型转换时,根据object类型的不同以及操作符的不同,JS会选择将其转换成string还是number。具体规则如下:

1.+操作符两边出现对象的,将对象转换成string。
2.所有对象(Date对象除外),优先转换成number。
3.对于Date对象,优先转换成string。

值得注意的是,对于+操作符,除了操作符两边出现对象或者字符串的情况,其余情况下均执行“转换成number”的操作,同时,这种操作还与值之间的顺序有关。

实验

console.log(3 * []);//0

console.log(3 * [2]);//6

console.log(3 * [1,2]);//NaN
console.log(3 + [2]);//32
var now = new Date();

console.log(now + 1);//Wed Mar 26 2014 10:51:39 GMT+0800 (CST)1

console.log(now - 1);//1395802299223

console.log(now * 2);//2791604598448
console.log(true + true);//2

console.log(2 + null);//2, null is converted to 0

console.log(2 + undefined);//NaN, undefined is converted to NaN

console.log(1 + 2 + " cats");//3 cats

console.log(1 + (2 + " cats"));//12 cats
Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
Vue组件创建和传值的方法
Aug 17 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
javascript 事件处理示例分享
Dec 31 #Javascript
JavaScript中的变量作用域介绍
Dec 31 #Javascript
JavaScript中的变量定义与储存介绍
Dec 31 #Javascript
JavaScript中的操作符==与===介绍
Dec 31 #Javascript
jQuery中[attribute]选择器用法实例
Dec 31 #Javascript
JavaScript中的比较操作符>、=、
Dec 31 #Javascript
javascript 操作符(~、&、|、^、)使用案例
Dec 31 #Javascript
You might like
php中memcache 基本操作实例
2015/05/17 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python的print用法示例
2014/02/11 Python
python实现目录树生成示例
2014/03/28 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
学python最电脑配置有要求么
2020/07/05 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
小区消防演习方案
2014/02/21 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
2015年化验员工作总结
2015/04/10 职场文书
导游词之潮音寺
2019/09/26 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
详解Redis基本命令与使用场景
2021/06/01 Redis
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
全网非常详细的pytest配置文件
2022/07/15 Python