Javascript中加号运算符的二义性注意事项
本文由发表于5年前 | Javascript | 暂无评论 |  被围观 5,917 views+
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 Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2012 4/28
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Java Web笔记 – 客户端Javascript与服务器端Servlet的验证 2011/11/10
2 Java基础笔记 – 枚举类型的使用介绍和静态导入 2011/10/31
3 Struts2单选按钮标签s:radio的使用及其设置默认值 2011/9/10
4 MyBatis一级缓存引发的问题 2016/6/16
5 JDBC数据库连接和事务的管理 一个JDBC基本操作封装类的编写 2011/10/13
6 Hibernate的xerces-2.6.2.jar文件冲突引发的Unable to load configuration错误及其解决方法 2011/5/23
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

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

联系我们:admin@itzhai.com

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