首页 > 代码库 > JavaScript系列文章：自动类型转换
JavaScript系列文章：自动类型转换
我们都知道，JavaScript是类型松散型语言，在声明一个变量时，我们是无法明确声明其类型的，变量的类型是根据其实际值来决定的，而且在运行期间，我们可以随时改变这个变量的值和类型，另外，变量在运行期间参与运算时，在不同的运算环境中，也会进行相应的自动类型转换。
自动类型转换一般是根运行环境和操作符联系在一起的，是一种隐式转换，看似难以捉摸，其实是有一定规律性的，大体可以划分为：转换为字符串类型、转换为布尔类型、转换为数字类型。今天我们就介绍一下这几种转换机制。
1. 转换为字符串类型(to string)
当加号“+”作为二元操作符(binary)并且其中一个操作数为字符串类型时，另一个操作数将会被无条件转为字符串类型：
// 基础类型var foo = 3 + ‘‘; // "3"var foo = true + ‘‘; // "true"var foo = undefined + ‘‘; // "undefined"var foo = null + ‘‘; // "null"
// 复合类型var foo = [1, 2, 3] + ‘‘; // "1,2,3"var foo = {} + ‘‘; // "[object Object]"// 重写valueOf()和toString()var o = { valueOf: function() { return 3; }, toString: function() { return 5; }};foo = o + ‘‘; // "3"o = { toString: function() { return 5; }};foo = o + ‘‘; // "5"
从上面代码中可以看到，对于基础类型，会直接转为与字面量相一致的字符串类型，而对于复合类型，会先试图调用对象的valueOf()方法，如果此方法返回值是引用类型，则再调用此返回值的toString()方法，上面我们定义了一个对象，包含valueOf()和toString()方法，然后和一个空字符串进行运算，可以看得出来，它是调用了valueOf()方法，然后我们重写此对象，将valueOf()移除，也就是不重写object的valueOf()方法，从最后的结果来看，它最终是调用了toString()方法，然后将返回的数字类型5与空字符串进行运算，最终得到一个字符串类型的值。
2. 转为布尔类型(to boolean)
a. 数字转为布尔类型(from number)
当数字在逻辑环境中执行时，会自动转为布尔类型。0和NaN会自动转为false，其余数字都被认为是true，代码如下：
// 0和NaN为false，其余均为trueif (0) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}if (-0) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}if (NaN) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}// 其余数字均为trueif (-3) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}if (3) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}
从上面的代码中可以看出，非0负值也会被认为是true，这一点需要注意。
b. 字符串转为布尔类型(from string)
和数字类似，当字符串在逻辑环境中执行时，也会被转为布尔类型。空字符串会被转为false，其它字符串都会转为true，代码如下：
// 空字符串为falseif (‘‘) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}// 其他字符串均为trueif (‘0‘) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}if (‘false‘) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}
c. undefined和null转为布尔类型(from undefined and null)
当undefined和null在逻辑环境中执行时，都被认为是false，看下面代码：
// undefined和null都为falseif (undefined) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}if (null) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}
d. 对象转为布尔类型(from object)
当对象在逻辑环境中执行时，只要当前引用的对象不为空，都会被认为是true。如果一个对象的引用为null，根据上面的介绍，会被转换为false。虽然使用typeof检测null为"object"，但它并不是严格意义上的对象类型，只是一个对象空引用的标识。
另外，我们这里的逻辑环境不包括比较操作符(==)，因为它会根据valueOf()和toString()将对象转为其他类型。
现在我们来看一下对象类型的示例：
// 字面量对象var o = { valueOf: function() { return false; }, toString: function() { return false; }};if (o) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}// 函数var fn = function() { return false;};if (fn) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}// 数组var ary = [];if (ary) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}// 正则表达式var regex = /./;if (regex) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}
可以看到，上面的对象都被认为是true，无论内部如何定义，都不会影响最终的结果。
正是由于对象总被认为是true，使用基础类型的包装类时，要特别小心：
// 以下包装对象都被认为是trueif (new Boolean(false)) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}if (new Number(0)) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}if (new Number(NaN)) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}if (new String(‘‘)) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}
根据们上面介绍的，它们对应的基础类型都会被转为false，但使用包装类实例的时候，引擎只会判断其引用是否存在，不会判断内部的值，这一点初学者需要多多注意。当然我们也可以不使用new关键字，而是显示的调用其包装类函数，将这些值转为布尔类型：
if (Boolean(false)) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}if (Number(0)) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}if (Number(NaN)) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}if (String(‘‘)) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}
对于Boolean类，有一个特别需要注意的是，当传入一个字符串时，它不会去解析字符串内部的值，而是做个简单地判断，只要不是空字符串，都会被认为是true：
if (Boolean(‘false‘)) { console.log(‘true‘); // output: true} else { console.log(‘false‘);}if (Boolean(‘‘)) { console.log(‘true‘);} else { console.log(‘false‘); // output: false}
上面介绍了这么多，还有几个例子需要提一下，那就是逻辑非、逻辑与和逻辑或操作符，连用两个逻辑非可以把一个值转为布尔类型，而使用逻辑与和逻辑或时，根据上面的规则，参与运算的值会被转换为相对应的布尔类型：
// 下面几个转为falsevar isFalse = !!0; // falsevar isFalse = !!NaN; // falsevar isFalse = !!‘‘; // falsevar isFalse = !!undefined; // falsevar isFalse = !!null; // false// 下面都转为truevar isTrue = !!3; // truevar isTrue = !!-3; // truevar isTrue = !!‘0‘; // truevar isTrue = !!{}; // true// 逻辑与var foo = 0 && 3; // 0var foo = -3 && 3; // 3// 逻辑或var foo = 0 || 3; // 3var foo = -3 || 3; // -3
3. 转为数字类型(to number)
操作数在数字环境中参与运算时，会被转为相对应的数字类型值，其中的转换规则如下：
i. 字符串类型转为数字(from string): 空字符串被转为0，非空字符串中，符合数字规则的会被转换为对应的数字，否则视为NaN
ii. 布尔类型转为数字(from boolean): true被转为1，false被转为0
iii. 对象类型转为数字(from object): valueOf()方法先试图被调用，如果调用返回的结果为基础类型，则再将其转为数字，如果返回结果不是基础类型，则会进一步调用返回值的toString()方法，最后再试图将返回结果转为数字
iv. null被转为0，undefined被转为NaN
一个其他类型的值被转换为数字，跟其参与运算的操作符有很密切的联系，下面我们就来详细介绍：
当加号“+”作为一元操作符(unary)时，引擎会试图将操作数转换为数字类型，如果转型失败，则会返回NaN，代码如下所示：
var foo = +‘‘; // 0var foo = +‘3‘; // 3var foo = +‘3px‘; // NaNvar foo = +false; // 0var foo = +true; // 1var foo = +null; // 0var foo = +undefined; // NaN
上面代码中，对于不符合数字规则的字符串，和直接调用Number()函数效果相同，但和parseInt()有些出入：
var foo = Number(‘3px‘); // NaNvar foo = parseInt(‘3px‘); // 3
可以看出，parseInt对字符串参数比较宽容，只要起始位置符合数字类型标准，就逐个解析，直到遇见非数字字符为止，最后返回已解析的数字部分，转为数字类型。
当加号“+”作为二元操作符时，我们上面也提到过，如果一个操作数为字符串，则加号“+”作为字符串连接符，但如果两个操作数都不是字符串类型，则会作为加法操作符，执行加法操作，这个时候，其他数据类型也会被转为数字类型：
var foo = true + 1; // 2var foo = true + false; // 1var foo = true + null; // 1var foo = null + 1; // 1var foo = null + undefined; // NaNvar foo = null + NaN; // NaN
上面加法运算过程中都出现了类型转换，true转为1，false转为0，null转为0，undefined转为NaN，最后一个例子中，null和NaN运算时，是先转为0，然后参与运算，NaN和任何其他数字类型运算时都会返回NaN，所以最终这个结果还是NaN。
对于undefined转为NaN似乎很好理解，但为什么null会转为0呢？这里也有些历史渊源的，熟悉C的朋友都知道，空指针其实是设计为0值的：
// 空指针的值为0int *p = NULL;if (p == 0) { printf("NULL is 0"); // output: NULL is 0}
编程语言的发展是有规律的，语言之间也存在着密切的关联，新的语言总是会沿用老的传统，继而添加一些新的特性。从上面的例子中，我们发现，null被转为0其实很好理解，一点也不奇怪。
另外，我们可别忘了减号“-”操作符，当减号“-”作为一元操作符(unary negation)时，也会将操作数转换为数字，只不过转换的结果与上面相反，合法的数字都被转为负值。
除加号“+”以外的其他二元操作符，都会将操作数转为数字，字符串也不例外(如果转型失败，则返回NaN继续参与运算)：
var foo = ‘5‘ - ‘2‘; // 3var foo = ‘5‘ * ‘2‘; // 10var foo = ‘5‘ / ‘2‘; // 2.5var foo = ‘5‘ % ‘2‘; // 1var foo = ‘5‘ << ‘1‘; // 10var foo = ‘5‘ >> ‘1‘; // 2var foo = ‘5‘ ** ‘2‘; // 25var foo = ‘5‘ * true; // 5var foo = ‘5‘ * null; // 0var foo = ‘5‘ * undefined; // NaNvar foo = ‘5‘ * NaN; // NaN
上面的操作符中，位移和求幂操作符平时用的不多，不过在某些场景下(比如算法中)还是挺实用的。我们都知道，JavaScript中的数字类型都以浮点型存储，这就意味着我们不能想C和Java那样直接求整除结果，而是通过相关的函数进一步处理实现的，如果通过位移可以简化不少，而求幂操作也可以直接通过求幂运算符算出结果，看下面代码：
// 浮点型运算var foo = 5 / 2; // 2.5// 整除操作var foo = Math.floor(5 / 2); // 2// 向右移一位实现整除var foo = 5 >> 1; // 2// 求幂函数var foo = Math.pow(5, 2); // 25// 求幂运算var foo = 5 ** 2; // 25
除了上面的操作符之外，递增和递减操作符也会将操作数转为数字，下面以前缀递增操作符为例：
var foo = ‘‘;++foo; // foo: 1var foo = ‘3‘;++foo; // foo: 4var foo = true;++foo; // foo: 2var foo = null;++foo; // foo: 1var foo = undefined;++foo; // foo: NaNvar foo = ‘3px‘;++foo; // foo: NaN
上面就是基本数据类型在数字环境下的转换规则。对于对象类型，同样有一套转换机制，我们上面也提到了，valueOf()方法和toString()方法会在不同的时机被调用，进而返回相应的数据，根据返回值再进行下一步的转换。由于篇幅限制，关于自动类型转换的后续内容，博主安排在下一篇中讲解，敬请期待。
参考资料：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
http://jibbering.com/faq/notes/type-conversion/
http://stackoverflow.com/questions/18808226/why-is-typeof-null-object
JavaScript系列文章：自动类型转换