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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
js 金额文本框实现代码
Feb 14 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
js实现常用排序算法
Aug 09 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
利用js实现简易红绿灯
Oct 15 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与MySQL交互使用详解
2006/10/09 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
Prototype使用指南之ajax
2007/01/10 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
详解vue axios二次封装
2018/07/22 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
python执行get提交的方法
2015/04/29 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Django配置跨域并开发测试接口
2020/11/04 Python
程序员跳槽必看面试题总结
2013/06/28 面试题
主管会计岗位责任制
2014/02/10 职场文书
服务承诺口号
2014/05/22 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
爱国教育主题班会
2015/08/14 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS