javascript加号"+"的二义性说明


Posted in Javascript onMarch 04, 2013

单个的加号作为运算符在 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;
Javascript 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
js给dropdownlist添加选项的小例子
Mar 04 #Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 #Javascript
利用js实现选项卡的特别效果的实例
Mar 03 #Javascript
DWZ刷新dialog解决方法
Mar 03 #Javascript
js 控制下拉菜单刷新的方法
Mar 03 #Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 #Javascript
javascript重复绑定事件造成的后果说明
Mar 02 #Javascript
You might like
PHP的面向对象编程
2006/10/09 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
基于javascript实现九九乘法表
2016/03/27 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Python实现代码统计工具
2019/09/19 Python
Python虚拟环境venv用法详解
2020/05/25 Python
PyQt5实现画布小程序
2020/05/30 Python
python SOCKET编程基础入门
2021/02/27 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
AC Lens:购买隐形眼镜
2017/02/26 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
公司中秋节活动方案
2014/02/12 职场文书
趣味运动会策划方案
2014/06/02 职场文书
学校三节实施方案
2014/06/09 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
《静夜思》教学反思
2016/02/17 职场文书
mysql sock 文件解析及作用讲解
2022/07/15 MySQL
Python中的socket网络模块介绍
2022/07/23 Python