今天在匆忙的写代码过程中，测试突然跑过来跟我说，有一个小的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中关于两个变量的比较的更多相关文章

  1. 深入探究js中的隐式变量声明

    前两天遇到的问题,经过很多网友的深刻讨论,终于有一个相对可以解释的通的逻辑了,然后我仔细研究了一下相关的点,顺带研究了一下js中的隐式变量. 以下文章中提到的隐式变量都是指没有用var,let,con ...

  2. js中计算两个日期之差

    js中计算两个日期之差            var aBgnDate, aEndDate;            var oBgnDate, oEndDate;            var nYl ...

  3. php中比较两个变量是否相等的最高效写法

    <?php //php中比较两个变量是否相等的最高效写法 function isEqual($a,$b){ return $a==$b; } var_dump(isEqual(3,3));//t ...

  4. [js]js的惰性声明, js中声明过的变量(预解释),后在不会重新声明了

    js的惰性声明, js中声明过的变量(预解释),后在不会重新声明了 fn(); // 声明+定义 js中声明过一次的变量,之后在不会重新声明了 function fn() { console.log( ...

  5. js中三种定义变量 const， var， let 的区别

    js中三种定义变量的方式const, var, let的区别 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始化 ...

  6. 浅谈JS中 var let const 变量声明

    浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...

  7. CMake中的两种变量(Variable types in CMake)

    在CMake中存在两种变量:normal variables and cache varialbes .正常变量就像是脚本内部变量,相当于程序设计中定义的局部变量那样.而CMakeLists.txt相 ...

  8. JS中的运算符 以及变量和输入输出

    1.算术运算(单目运算符) + 加 .- 减.* 乘. / 除. % 取余.++ 自增.-- 自减. >>> +:有两种作用,链接字符串/加法运算,当+两边全为数字时,进行加法运算, ...

  9. JS中的数据类型和变量内存

    1. JS中存在5种简单数据类型和1种复杂数据类型: 5种简单数据类型:Undefined, Null, Boolean, Number, String. 1种复杂数据类型:Object. 上面的5种 ...

随机推荐

  1. 深入解读Service Mesh的数据面Envoy

    在前面的一篇文章中,详细解读了Service Mesh中的技术细节,深入解读Service Mesh背后的技术细节. 但是对于数据面的关键组件Envoy没有详细解读,这篇文章补上. 一.Envoy的工 ...

  2. python接口自动化（十八）--重定向（Location）（详解）

    简介 在实际工作中,有些接口请求完以后会重定向到别的url,而你却需要重定向前的url.URL主要是针对虚拟空间而言,因为不是自己独立管理的服务器,所以无法正常进行常规的操作.但是自己又不希望通过主域 ...

  3. 网络协议 22 - RPC 协议（下）- 二进制类 RPC 协议

        前面我们认识了两个常用文本类的 RPC 协议,对于陌生人之间的沟通,用 NBA.CBA 这样的缩略语,会使得协议约定非常不方便.     在讲 CDN 和 DNS 的时候,我们讲过接入层的设计 ...

  4. maven私服上传jar包

    将一下脚本保存在.bat文件执行,红色部分按实际情况修改: @echo off set groupId=com.xxxset artifactId=xxxset version=0.0.1set ja ...

  5. 01 Java jdk环境配置

    1.1 书籍(B) [1] java核心技术 [2] 实战java 1.2 网址(B) oracle.com http://www.ibm.com/developerWorks/cn/ https:/ ...

  6. 设计模式 | 原型模式（prototype）

    定义: 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 结构:(书中图,侵删) 一个申明克隆自己的接口 若干具体的需要克隆自己的类   这个结构很简单,而且在Java中那个接口是不需 ...

  7. 小程序顶部navbar（非Slider）

    wxml(该导航栏的实现原理是当你要显示哪个view在最前端的时候隐藏其他的view): <!-- 顶部navbar导航栏 --> <view class="navbar& ...

  8. lombok的安装

    Lombok简介 Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具,通过使用对应的注解,可以在编译源码的时候生成对应的方法.官方地址:https:/ ...

  9. 第16次CCF CSP认证-第5题-317 号子任务(subtask317)-图论最短路径

    [题目背景]“你在平原上走着走着,突然迎面遇到一堵墙,这墙向上无限高,向下无限深,向左无限远,向右无限远,这墙是什么?”——<流浪地球>原著我们带着地球去流浪了,为了处理流浪过程中可能会发 ...

  10. 有趣的 box-decoration-break

    这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break.下面就一起去一探究竟. 因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译.直译一 ...