1. 程式人生 > >js中關於兩個變數的比較

js中關於兩個變數的比較

  今天在匆忙的寫程式碼過程中,測試突然跑過來跟我說,有一個小的bug,但是不能完全的復現,但確實存在。需要我們這邊參與查詢。首先來說一下我們這個的業務邏輯,其實非常的簡單,就是一個開房間的後臺,裡面有一項是設定這個房間的消耗金幣數。這個消耗是存在“最低消費”這個概念的。根據這個房間的不同配置,最低消費是不同的。房主可以自行更改這個消耗數,但是不能低於最低消耗。

  業務很簡單,所以我們也很簡單的完成了,就是把最後提交的時候,我們驗證一下他這個輸入的金幣數大於最低消耗的金幣數就可以了。因為每次房間配置的不同,我們使用ajax獲取房間的最低消耗金幣數。然後驗證,結果有的時候就提示填寫的數值小於了最低消耗數。WTF,怎麼可能呢。而且這個不是穩定的復現的,有的時候行,有的時候不行。最後在我們的積極測試下,能復現這個bug了,就是房間的最低消耗是200金幣,房主填寫的是1200金幣,這個時候提示小於最低了。也就是判斷中200>1200 ???

這個時候我突然想到了什麼,就是大小比較的時候,資料型別是不是出錯了?肯定是,結果找到後臺,發現是他們更改了資料的型別,原來的時候是number的資料型別,這次改成string型別了,而且我們寫的input輸入框,這裡獲取到的資料型別是不是number?所以就有了一下的測試。先看程式碼:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <
meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <style type="text/css"> 8 input{ 9 width: 400px; 10 } 11 </style> 12 </head> 13 <body>
14 <h1>為了測試資料類中的資料轉換</h1> 15 <h4>填寫一個數值和1200比較</h4> 16 <input type="text" name="" id="" value="" placeholder="如果填的數字小1200,提示true,否則提示false"/> 17 <button>比較</button> 18 </body> 19 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 20 <script type="text/javascript"> 21 var num1 = "1200"; 22 $("button").on("click",function(){ 23 var input_val = $("input").val(); 24 console.log($.type(input_val)); 25 console.log($.type($("input").val())); 26 if(num1>input_val){ 27 alert(num1+">"+input_val); 28 }else{ 29 alert(num1+"<"+input_val); 30 31 } 32 }) 33 </script> 34 </html>

  這裡基本上就是在重現我們的bug,當你填入200的時候,出現了200>1200的奇觀。準確的說應該是"200">"1200"。這個問題我是知道的,因為js中存在資料的隱性轉換,如果你用一個字串跟一個數字比較的話,字串會被轉換成數字型別,但是因為後臺資料格式變了,所以就成了字串與字串比較了。字串與字串比較是按位比較,當第一位的時候,1小於2,所以就成了200>1200。關於這個的詳細情況,請點選這裡檢視。這裡還有一點是需要注意的,那就是我們的輸入框使用的是input 這裡獲取的資料是string型別,雖然我們對這個輸入框加了限制只能輸入數字,但是這個資料型別還是string的型別。所以一本萬利的辦法就是在驗證的時候,對這個兩個變數都進行強制轉換程數字。也就是在上面程式的26行改成下面的程式碼:

if(Number(num1)>Number(input_val)){

這樣就能正確的啦!