Javascript中加号运算符的二义性注意事项

用Javascript写了一些动态效果,在编写如下代码时遇到了问题:

var rightBorder = 0;
//charge if has reach the end of the div
var currentLeft = $(“#album_div_center_wrap_list”).css(“left”);
currentLeft = currentLeft.substr(0, strLength(currentLeft)-2);
if(currentLeft < rightBorder){
//move each div
$(“#album_div_center_wrap_list”).stop().animate({left:(currentLeft + width)}, “slow”);
}

最后一行的作用是让选择的元素向右移动,表面上看起来没什么特别的,但是运行的结果就是不按照预想的结果进行。于是在chrome的开发人员工具中查看属性。Oh,my god! 发现加过之后的left值为一万多,难怪不会再屏幕上显示。

分析到这里,也就找到了原因,还是Javascript的语言特性问题。Javascript中的加号操作符的二义性。

Javascript中加号操作的作用:

字符串拼接:var str = “left” + “right” 数值取正值:var m = -10; var n = - m; 数值求和:var a = 1; var b = 2; var c = a + b;

如果在表达式中包含字符串和数值则会进行字符串拼接。获取到的css属性,如left的值是10px,这里明显知道不是数值,即使截取字符串把px去掉之后(上面的:currentLeft = currentLeft.substr(0, strLength(currentLeft)-2);),没有显示的转换,仍然被当做字符串,所以相加当然是字符串的拼接了,解决方法就是在相加之前强制转换:

$(“#album_div_center_wrap_list”).stop().animate({left:(parseInt(currentLeft) + parseInt(width))}, “slow”);

微博上看到一句话:“不应以苦劳来论成就, BUG 百出的代码,看似忙碌,实则是一种破坏。”没错,我们应该更多是思考如何挺高自己的自身能力进行高效率的编程。总结一下,想要用的出神入化还是得基础扎实,属性基本的规则,才能做到高效率编码。

arthinking wechat
欢迎关注itzhai公众号