JavaScript实验:object转换成number或string

在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()方法的调用次序。

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

  • 对于空数组,当将其转换成number时,得到的结果为0。这是因为首先会调用array的valueOf()方法,由于valueOf()返回的是数组对象本身,因此接下来JS会调用空数组的toString()方法;因为空数组toString()后返回结果为空字符串,因此最终会将空字符串转换成数字0后返回。
  • 对于只有一个数字成员的数组来说,应用同样的规则转换成number,最后得到的结果就是该数字。
  • 对于有多个数字成员的数组来说,由于无法将字符串转换成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  

本文实验代码: http://jsfiddle.net/cshao/ZX2UT/1/

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!