js中关于两个变量的比较
今天在匆忙的写代码过程中,测试突然跑过来跟我说,有一个小的bug,但是不能完全的复现,但确实存在。需要我们这边参与查找。首先来说一下我们这个的业务逻辑,其实非常的简单,就是一个开房间的后台,里面有一项是设置这个房间的消耗金币数。这个消耗是存在“最低消费”这个概念的。根据这个房间的不同配置,最低消费是不同的。房主可以自行更改这个消耗数,但是不能低于最低消耗。
业务很简单,所以我们也很简单的完成了,就是把最后提交的时候,我们验证一下他这个输入的金币数大于最低消耗的金币数就可以了。因为每次房间配置的不同,我们使用ajax获取房间的最低消耗金币数。然后验证,结果有的时候就提示填写的数值小于了最低消耗数。WTF,怎么可能呢。而且这个不是稳定的复现的,有的时候行,有的时候不行。最后在我们的积极测试下,能复现这个bug了,就是房间的最低消耗是200金币,房主填写的是1200金币,这个时候提示小于最低了。也就是判断中200>1200 ???
这个时候我突然想到了什么,就是大小比较的时候,数据类型是不是出错了?肯定是,结果找到后台,发现是他们更改了数据的类型,原来的时候是number的数据类型,这次改成string类型了,而且我们写的input输入框,这里获取到的数据类型是不是number?所以就有了一下的测试。先看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
input{
width: 400px;
}
</style>
</head>
<body>
<h1>为了测试数据类中的数据转换</h1>
<h4>填写一个数值和1200比较</h4>
<input type="text" name="" id="" value="" placeholder="如果填的数字小1200,提示true,否则提示false"/>
<button>比较</button>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var num1 = "1200";
$("button").on("click",function(){
var input_val = $("input").val();
console.log($.type(input_val));
console.log($.type($("input").val()));
if(num1>input_val){
alert(num1+">"+input_val);
}else{
alert(num1+"<"+input_val); }
})
</script>
</html>
这里基本上就是在重现我们的bug,当你填入200的时候,出现了200>1200的奇观。准确的说应该是"200">"1200"。这个问题我是知道的,因为js中存在数据的隐性转换,如果你用一个字符串跟一个数字比较的话,字符串会被转换成数字类型,但是因为后台数据格式变了,所以就成了字符串与字符串比较了。字符串与字符串比较是按位比较,当第一位的时候,1小于2,所以就成了200>1200。关于这个的详细情况,请点击这里查看。这里还有一点是需要注意的,那就是我们的输入框使用的是input 这里获取的数据是string类型,虽然我们对这个输入框加了限制只能输入数字,但是这个数据类型还是string的类型。所以一本万利的办法就是在验证的时候,对这个两个变量都进行强制转换程数字。也就是在上面程序的26行改成下面的代码:
if(Number(num1)>Number(input_val)){
这样就能正确的啦!
js中关于两个变量的比较的更多相关文章
- 深入探究js中的隐式变量声明
前两天遇到的问题,经过很多网友的深刻讨论,终于有一个相对可以解释的通的逻辑了,然后我仔细研究了一下相关的点,顺带研究了一下js中的隐式变量. 以下文章中提到的隐式变量都是指没有用var,let,con ...
- js中计算两个日期之差
js中计算两个日期之差 var aBgnDate, aEndDate; var oBgnDate, oEndDate; var nYl ...
- php中比较两个变量是否相等的最高效写法
<?php //php中比较两个变量是否相等的最高效写法 function isEqual($a,$b){ return $a==$b; } var_dump(isEqual(3,3));//t ...
- [js]js的惰性声明, js中声明过的变量(预解释),后在不会重新声明了
js的惰性声明, js中声明过的变量(预解释),后在不会重新声明了 fn(); // 声明+定义 js中声明过一次的变量,之后在不会重新声明了 function fn() { console.log( ...
- js中三种定义变量 const, var, let 的区别
js中三种定义变量的方式const, var, let的区别 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始化 ...
- 浅谈JS中 var let const 变量声明
浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...
- CMake中的两种变量(Variable types in CMake)
在CMake中存在两种变量:normal variables and cache varialbes .正常变量就像是脚本内部变量,相当于程序设计中定义的局部变量那样.而CMakeLists.txt相 ...
- JS中的运算符 以及变量和输入输出
1.算术运算(单目运算符) + 加 .- 减.* 乘. / 除. % 取余.++ 自增.-- 自减. >>> +:有两种作用,链接字符串/加法运算,当+两边全为数字时,进行加法运算, ...
- JS中的数据类型和变量内存
1. JS中存在5种简单数据类型和1种复杂数据类型: 5种简单数据类型:Undefined, Null, Boolean, Number, String. 1种复杂数据类型:Object. 上面的5种 ...
随机推荐
- 带你由浅入深探索webpack4(二)
在前一篇文章已经介绍了webpack4从入门到一些核心常用的用法,大家可以从上一篇文章看起.带你由浅入深探索webpack4(一) 接着上一章,接下来我们会继续探讨webpack4中的各种实用用法,让 ...
- Spire高效稳定的.NET组件
年末将至,又到了一年一度的收集发票时间,平时零零碎碎的花钱都是不在意开发票,现在好了,到处找发票来报销,简直头大, 东拼西凑,终于搞定了全部发票,大伙多余的发票,麻烦艾特我一下啊,不限日期,能开发票的 ...
- numpy C语言源代码调试(三)
鉴于ddd过于简陋,希望找一个新一些的调试工具,看到有很多人推荐gdbgui,这是一个非常新的调试工具,前端使用浏览器,现在采用这一架构的软件越来越多,可以完全不必依赖庞大的gui类库,安装使用比较方 ...
- 死磕 java集合之PriorityBlockingQueue源码分析
问题 (1)PriorityBlockingQueue的实现方式? (2)PriorityBlockingQueue是否需要扩容? (3)PriorityBlockingQueue是怎么控制并发安全的 ...
- 浅谈unity中gamma空间和线性空间
转载请标明出处:http://www.cnblogs.com/zblade/ 一.概述 很久没有写文章了,今天写一篇对gamma空间和线性空间的个人理解总结,在查阅和学习了各个资料后,算是一个个人笔记 ...
- Android中一个经典理解误区的剖析
今天,在Q群中有网友(@广州-包晴天)发出了网上的一个相对经典的问题,问题具体见下图. 本来是无意写此文的,但群里多个网友热情不好推却,于是,撰此文予以分析. 从这个问题的陈述中,我们发现,提问者明显 ...
- My97DatePicker日期控件,开始时间不能大于结束时间,结束时间不能小于开始时间
在只做项目的时候,需要用到一个日期控件,之前用到过my97,感觉挺好的,兼容性很强,配置也比较容易 当开始时间不能大于结束时间和结束时间不能小于开始时间,这个需要一个判定的,要不然不就乱套了 在my9 ...
- 小程序顶部navbar(非Slider)
wxml(该导航栏的实现原理是当你要显示哪个view在最前端的时候隐藏其他的view): <!-- 顶部navbar导航栏 --> <view class="navbar& ...
- openlayers一:显示地图与鼠标地理坐标
openlayers两个好用的开源JS互动地图库之一,另一个是leaflet. openlayers的特点是是大而全,自身包含绝大多数功能,文档好看. leaflet是小而美,自身小,但支持扩展,好用 ...
- android---动画入门(一)
android 动画分为两类,View Animation(视图动画)和property Animation(属性动画),View Animation(视图动画)包含了Tween Animation和 ...