【JavaScript】数値同士の比較結果がおかしい時に確認すべきこと

Javascrip数値の比較がおかしい時は、変数の型が本当に数値型(Number)になっているか疑いましょう。

例えば、htmlのinput(number)要素から値を取得し、その値を比較してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="script.js"></script>
</head>
<body>
    <input id="input1" type="number" value="5">
    <input id="input2" type="number" value="20">
</body>
</html>

window.onload = function () {
    const input1 = document.getElementById('input1');
    const input2 = document.getElementById('input2');

    const input1Value = input1.value;
    const input2Value = input2.value;
    console.log("input1の値:" + input1Value);
    console.log("input2の値:" + input2Value);

    if(input1Value > input2Value){
        console.log("input1の方が大きい");
    }
};

Consoleで出力を確認すると・・あれ?

input1の方が大きい

20より5のほうが大きい判定になってしまいました。

比較の結果が逆になってしまっていますね。

数値同士の比較結果がおかしくなる原因

これは、inputタグのvalueを取得したときに変数の型がstringになってしまっているからです。

変数の型を調べるには、typeofを使います。

console.log(typeof(input1Value)); //string
console.log(typeof(input2Value));  //string

文字列型の”20″と”5″を比較すると、1文字目の”2″と”5″がUnicodeのコードに変換され、それぞれ「U+0032」と「U+0035」になります。
Unicode同士の比較はコードポイントの大小によって判断されるので、結果的に5の方が大きいと判定されてしまっている、ということですね。

そのような時は、parseIntなどを使ってnumber型に変換してあげます。

window.onload = function () {
    const input1 = document.getElementById('input1');
    const input2 = document.getElementById('input2');

    const input1Value = parseInt(input1.value); //整数に変換する
    const input2Value = parseInt(input2.value); //整数に変換する
    
    console.log("input1の値:" + input1Value);
    console.log("input2の値:" + input2Value);

    if(input1Value > input2Value){
        console.log("input1の方が大きい");
    }
};

すると、正しい比較ができるようになります。

コメント

タイトルとURLをコピーしました