javascript加号"+"的二义性说明_javascript技巧

单个的加号作为运算符在 JavaScript 中有三种作用。它可以表示字符串连接，例如：

var str = 'hello ' + 'world!';

或表示数字取正值的一元运算符，例如：

var n = 10;
var n2 = +n;

或表示数值表达式的求和运算，例如：

var n = 100;
var nn2 = n + 1;

三种表示法里，字符串连接与数字求和是容易出现二义性的。因为 JavaScript 中对这两种运算的处理将依赖于数据类型，而无法从运算符上进行判读。我们单独地看一个表达式：

aa = a + b;

是根本无法知道它真实的含义是在求和，亦或是在做字符串连接。这在 JavaScript 引擎做语法分析时，也是无法确知的。

加号"+"带来的主要问题与另一条规则有关。这条规则是"如果表达式中存在字符串，则优先按字符串连接进行运算"。例如：

var v1 = '123';
var v2 = 456;

//显示结果值为字符串'123456'
alert( v1 + v2 );

这会在一些宿主中出现问题。例如浏览器中，由于 DOM 模型的许多值看起来是数字，但实际上却是字符串。因此试图做"和"运算，却变成了"字符串连接"运算。下面的例子说明了这个问题：

我们看到这个 id 为 testPic 的 IMG 元素（element）有一个宽度为 1 的边框--省略了默认的单位 px（pixel，像素点）。但是如果你试图用下面的代码来加宽它的边框，就会导致错误（一些浏览器忽略该值，另一些则弹出异常，还有一些浏览器则可能崩溃）：

var el = document.getElementById('testPic');
el.style.borderWidth += 10;

因为事实上在 DOM 模型里，borderWidth 是有单位的字符串值，因此这里的值会是"1px"。JavaScript 本身并不会出错，它会完成类似下面的运算，并将值赋给 borderWidth：

el.style.borderWidth = '1px' + 10;
//值为 '1px10'

这时，浏览器的 DOM 模型无法解释"1px10"的含义，因此出错了。当你再次读borderWidth 值时，它将仍是值 1px。那么，怎么证明上述的运算过程呢？下面的代码将表明 JavaScript 运算的结果是 1px10，但赋值到 borderWidth 时，是由于 DOM 忽略掉这个错误的值，因此 borderWidth 没有发生实际的修改：

alert( el.style.borderWidth = '1px' + 10 );//值为 '1px10'

这个问题追其根源，一方面在于我们允许了省略单位的样式表写法，另一方面也在于脚本引擎不能根据运算符来确定这里的操作是数值运算还是字符串连接。

后来 W3C 推动 XHTML 规范，试图从第一个方面来避免这个问题，但对开发界的影响仍旧有限。因此，在浏览器的开发商提供的手册中，都会尽可能地写明每一个属性的数据类型，以避免开发人员写出上面这样的代码。在这种情况下，最正确的写法是：

var el = document.getElementById('testPic');
// 1.取原有的单位
var value = parseInt(el.style.borderWidth);
var unit = el.style.borderWidth.substr(value.toString().length);
// 2.运算结果并附加单位
el.style.borderWidth = value + 10 + unit;

//如果你确知属性采用了默认单位 px，并试图仍然省略单位值，
//那么你可以用下面这种方法(我并不推荐这样):
// el.style.borderWidth = parseInt(el.style.borderWidth) + 10;