Javascript中加号运算符的二义性注意事项
本文由发表于7年前 | Javascript
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 百出的代码,看似忙碌,实则是一种破坏。”没错,我们应该更多是思考如何挺高自己的自身能力进行高效率的编程。总结一下,想要用的出神入化还是得基础扎实,属性基本的规则,才能做到高效率编码。

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/javascript-plus-operator-ambiguity-note.html
关键字: ,
arthinking 指弹吉他 && 技术 more
分享到:
 
2012 4/28
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 一个维护版本日志整洁的Git提交规范 2018/7/27
2 JVM笔记 – 虚拟机执行子系统(类加载及执行子系统的案例与实战) 2015/3/1
3 操作系统接口-用户接口 程序接口 系统调用 2011/6/30
4 总体设计-模块化 层次图 结构图 2011/7/1
5 关于学习底层编程和高级语言的区别与联系 2011/5/4
6 Java Web笔记 – EL表达式的介绍和使用 2011/11/12
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.