input值的比较——string转化为number类型的方法

Dear 丶 2022-07-11 07:47 253阅读 0赞

之前工作中遇到两个数字输入框的值比较大小，出现了3>10的错误情况，例子如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input值的比较</title>
        <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
    </head>
    <body>
    <input type="number" name="numberOne" id="numberOne">
    <br /><br />
    <input type="number" name="numberTwo" id="numberTwo">
    <br /><br />
    <button id="btn">比较input值</button>
    <p>result：<span id="result"></span></p>
    <script> $("#btn").on("click",function(){ var numberOneValue = $("#numberOne").val(); var numberTwoValue = $("#numberTwo").val(); if(numberOneValue == numberTwoValue){ $("#result").html("两者相等"); } if(numberOneValue > numberTwoValue){ $("#result").html("前者大于后者"); } if(numberOneValue < numberTwoValue){ $("#result").html("后者大于前者"); } }); </script>
    </body>
    </html>

之后将获得input的值转换为number，就正确了，如下：  
方案1：

var numberOneValue = $("#numberOne").val() * 1;
    var numberTwoValue = $("#numberTwo").val() * 1;

方案2：

var numberOneValue = parseInt($("#numberOne").val());
    var numberTwoValue = parseInt($("#numberTwo").val());

方案3：

var numberOneValue = parseFloat($("#numberOne").val());
    var numberTwoValue = parseFloat($("#numberTwo").val());

方案4：

var numberOneValue = Number($("#numberOne").val());
    var numberTwoValue = Number($("#numberTwo").val());

既然将input值转换为number类型就对了，那就是类型的问题了，然后将input值得类型输出：

console.log(typeof numberOneValue);
    console.log(typeof numberTwoValue);

得到如下输出：  
![这里写图片描述][SouthEast]

可以得到input值的类型是string（即使上面已经设置`type="number"`），所以input值的比较是以string来进行比较的。

之后又将两个input未转为number类型的值的ASCII值输出，

console.log(numberOneValue.charCodeAt());
    console.log(numberTwoValue.charCodeAt());

结果如下：  
![这里写图片描述][SouthEast 1]

查阅ASCII表，  
![这里写图片描述][SouthEast 2]  
可知3的ASCII码值为51, 1的ASCII码值为49，明显51>49，由此得出input的type=”number”的值如果未转为number类型，则是以其首位数字的ASCII码值进行比较，所以如果仅仅是0~9直接的数字进行比较的时候，转不转换为number类型不影响结果，但若是多位数字进行比较的时候就必须将值转化为number类型进行比较。

并且上面的几种方案也是将string类型转化为number类型常用的几种方法。

[SouthEast]: /images/20220711/55f166ba61384718b9bb7bef29c29114.png
[SouthEast 1]: /images/20220711/450b59059c484cd086044f76b43f0322.png
[SouthEast 2]: /images/20220711/b42b51c83f264fa5b24c156ac1c53e58.png