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 模型的许多值看起来是数字，但实际上却是字符串。因此试图做"和"运算，却变成了"字符串连接"运算。下面的例子说明了这个问题：
<img id="testPic" style="border: 1 solid red">
我们看到这个 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;
相关文章
window.open是javascript函数，该函数的作用是打开一个新窗口或这改变原来的窗口,如果你直接在js中调用window.open()函数去打开一个新窗口，浏览器会拦截你,那么如何避免呢，感兴趣的朋友可以了解下本文或许对你学习有所帮助2013-02-02
这篇文章主要介绍了javascript实现列表滚动的方法,较为详细的分析了javascript实现列表滚动的页面布局及javascript滚动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
如何利用JavaScript读取excel文件并绘制echarts图形
这篇文章主要介绍了如何利用JavaScript读取excel文件并绘制echarts图形，文章通过excel财务报表，并且需要根据这张excel表绘制成各种echarts图形，需要了解更多详情的小伙伴可以参考一下文章内内容2022-05-05
JS typeof fn === ''function'' && fn()详解
最近在学习js的时候发现很多人都喜欢在JS 中存在fn && fn() 执行语句或者typeof fn === 'function' && fn()，下面这篇文章就为大家分享一下2020-08-08
这篇文章主要介绍了JavaScript定时显示广告代码分享,本文直接给出实现代码,需要的朋友可以参考下2015-03-03
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
这篇文章主要介绍了JavaScript实现的前端AES加密解密功能,涉及javascript基于CryptoJS插件进行AES加密解密操作相关实现技巧,需要的朋友可以参考下2018-08-08
bcastr2.0 通用的图片浏览器...2006-11-11
这篇文章主要为大家详细介绍了原生js+ajax分页组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了webpack中如何使用雪碧图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
由于IE扩展了许多私有的DOM、CSS等导致许多网页的开发者都根据IE开发，才导致许多网页的不规范，从而导致现在的浏览器浏览相同网页效果不尽相同。2009-06-06
最新评论