REST APIの値が0または1の場合、型キャストから真偽値が返されます。

Question

Webアプリケーションでブール演算で異常な問題が発生しました。私は、とtrueとfalseについては0と応答するサービスを持っています。私が呼ぶのREST API（内部1）、これだけ出力送信：サーバーから上記の出力に基づいて

GET /stuff/id/5 
0 

GET /stuff/id/7 
1 

を、私はそれを作る確認するために、フロントエンドにトグルスイッチを使用しますスイッチをオンまたはオフにします。それは作るコード：

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

は、私は時々、1と0ブールtrueまたはfalseとして解釈されない可能性があることを理解しないので、私は彼らがtrueとfalseに変換取得する強制的に!!を使用することを計画しました。

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

しかし、それでもまだ、私の狼狽に、それは正しい方法よりも、 ONの位置にあるすべてのスイッチを示します。どうにかして1と0の両方の値に対しては、どちらもtrueに変換されています。あなたが見ることができるように

$(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の型キャストが全く異なることです。言い換えれば、1時間のデバッグ後に、JavaScriptが文字列を真理値と扱う方法に問題があることがわかりました。

サーバが応答すると、応答は常に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を与えることに驚いています。

第2の方法は、parseInt()を使用します。これは、出力が整数値であることを3倍にした場合にのみ使用する必要があります。例外処理メカニズムとしてisNaN()を追加することもできますが、それは過剰です。

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

ソリューション今

、最善の解決策は、私は間違いなく、サービスが1または0以外の他の値を返しません確信しているとして、parseInt()を使用することです。

$(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>

私は尋ねたと自分の質問に答えています。誰かがより良い説明（ソースあり）または別の回避策を持っている場合は、別の回答を投稿してください。