當輸入爲布爾值時，來自REST API的0或1的任何值返回true

Question

我在Web應用程序中遇到了布爾操作的一個奇怪問題。我有一個1和0對true和false響應的服務。的REST API（內部一個），我打電話，只發送這樣的輸出：

GET /stuff/id/5 
0 

GET /stuff/id/7 
1 

基於從服務器輸出的上方，我使用撥動開關在前端檢查使它打開或關閉。這使得它的代碼是：

$(this).find(".toggle").toggles({ 
    "on": requestContent 
}); 

我明白，有時候，1和0可能不能被解釋爲布爾真或假，所以我打算用!!迫使他們成功轉化成true和false。

$(this).find(".toggle").toggles({ 
    "on": !!requestContent 
}); 

但儘管如此，我失望的是，它顯示了所有在ON位置的開關，比對的方式。不知何故，它的數值只有true，其值爲1和0。

我甚至試圖使服務器調用的模擬版本，我的前端在這裏，這正是複製了問題：

$(function() { 
 
    // Mimicking the HTTP Response. 
 
    var states = ["1", "0", "0", "1", "1"]; 
 
    // This loop loops through all the values and sets the state of the switch. 
 
    $('.toggle').each(function (i) { 
 
    $(this).toggles({ 
 
     "on": !!states[i] 
 
    }); 
 
    }); 
 
});

body {background-color: #f5f5f5;} 
 
ul, li {margin: 0; padding: 0; list-style: none;} 
 
ul {width: 150px; margin: auto; background-color: #fff; padding: 10px; border-radius: 3px; border: 1px solid #eee;} 
 
ul li {padding: 10px;} 
 
ul li span, 
 
ul li .toggle {width: 50px; display: inline-block; vertical-align: middle;} 
 
ul li span {width: 75px; line-height: 1;}

<link rel="stylesheet" href="https://cdn.rawgit.com/simontabor/jquery-toggles/master/css/toggles-full.css" /> 
 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<script src="https://cdn.rawgit.com/simontabor/jquery-toggles/master/toggles.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <span>Item 1</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
    <li> 
 
    <span>Item 2</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
    <li> 
 
    <span>Item 3</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
    <li> 
 
    <span>Item 4</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
    <li> 
 
    <span>Item 5</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
</ul>

正如你可以看到，所有的發生甚至!!0返回true。我該如何解決這個問題？這背後的奧祕是什麼？

Answer 1

主要的問題是，JavaScript類型轉換的方式完全不同。換句話說，經過一個小時的調試後，我發現問題出在JavaScript處理字符串的方式爲truthy值。

服務器響應時，響應始終爲string類型。需要將0（實際上是"0"）的字符串輸入到布爾型false中。相反，JavaScript將其視爲非空string，並將其視爲真值。

讓我們考慮一下我在控制檯上運行的這段代碼。

» if ("0") "Yes"; else "No"; 
« "Yes" 

在這裏，我們可以清楚地看到，"0"字符串值作爲true或正確，truthy值處理。所以當非空字符串不被認爲是false時，帶有"0"的字符串也不被認爲是false。

變通

其中之一來解決這個問題最好的辦法是使用帶有0比較。考慮下面的指令在控制檯上：

» "0" == 0 
« true 

» !!"0" 
« true 

要檢查正確的值，比較運算符可以幫助我們在整體0比較字符串"0"和它的作品。與此同時，令人驚訝的是，字符串"0"的類型轉換給你true。

第二種方法是使用parseInt()。只有當我們確信輸出是一個整數值而沒有別的值時，才應該使用它。我們還可以添加isNaN()作爲異常處理機制，但這樣做會過度。

» if (parseInt("0")) "Yes"; else "No"; 
« "No" 

解決方案

現在，最好的解決辦法是使用parseInt()，因爲我絕對肯定的服務將不返回其他任何其它值比1或0。

$(function() { 
 
    // Mimicking the HTTP Response. 
 
    var states = ["1", "0", "0", "1", "1"]; 
 
    // This loop loops through all the values and sets the state of the switch. 
 
    $('.toggle').each(function (i) { 
 
    $(this).toggles({ 
 
     // Now this works perfectly! ;) 
 
     "on": parseInt(states[i]) 
 
    }); 
 
    }); 
 
});

body {background-color: #f5f5f5;} 
 
ul, li {margin: 0; padding: 0; list-style: none;} 
 
ul {width: 150px; margin: auto; background-color: #fff; padding: 10px; border-radius: 3px; border: 1px solid #eee;} 
 
ul li {padding: 10px;} 
 
ul li span, 
 
ul li .toggle {width: 50px; display: inline-block; vertical-align: middle;} 
 
ul li span {width: 75px; line-height: 1;}

<link rel="stylesheet" href="https://cdn.rawgit.com/simontabor/jquery-toggles/master/css/toggles-full.css" /> 
 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<script src="https://cdn.rawgit.com/simontabor/jquery-toggles/master/toggles.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <span>Item 1</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
    <li> 
 
    <span>Item 2</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
    <li> 
 
    <span>Item 3</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
    <li> 
 
    <span>Item 4</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
    <li> 
 
    <span>Item 5</span> 
 
    <div class="toggle toggle-light"></div> 
 
    </li> 
 
</ul>

我已經提出和回答我自己的問題。如果任何人有更好的解釋（來源）或不同的解決方法，請張貼另一個答案。