JavaScript 中加号运算符的二义性与 DOM 样式处理陷阱

JavaScript 加号运算符的三种用法

在 JavaScript 中，单独的加号运算符具备三种不同的功能。它可用于字符串拼接，例如：

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

或者作为一元运算符表示数值取正，例如：

var n = 10;
var n2 = +n;

亦或是用于数值表达式的加法运算，例如：

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

加号运算符的二义性与 DOM 样式陷阱

在这三种用法中，字符串拼接与数值加法最容易产生歧义。由于 JavaScript 的处理逻辑依赖于操作数的数据类型，仅从运算符本身无法判断具体意图。单独观察一个表达式：

aa = a + b;

我们无法直接确定其真实含义是数值求和还是字符串拼接。即便在 JavaScript 引擎进行语法分析时，这一信息也是无法直接确定的。

加号带来的主要问题与另一条规则紧密相关，即“若表达式中包含字符串，则优先执行字符串拼接”。例如：

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

这种机制在特定的宿主环境中容易引发问题。以浏览器为例，DOM 模型中的许多属性值看似数字，实则被存储为字符串。因此，开发者意图进行加法运算时，实际执行的是字符串拼接。以下示例展示了该问题：

<img id="testPic" style="border: 1 solid red">
 

观察 id 为 testPic 的 IMG 元素，其边框宽度为 1，默认单位省略了 px（像素）。若尝试使用以下代码增加边框宽度，将导致错误：部分浏览器忽略该值，部分抛出异常，甚至可能导致浏览器崩溃。

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，但由于 DOM 忽略了该无效赋值，borderWidth 并未发生实际改变：

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

正确修改 DOM 样式的规范写法

追根溯源，该问题一方面源于允许省略单位的 CSS 写法，另一方面在于脚本引擎无法仅凭运算符区分是数值运算还是字符串连接。

随后 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;