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

最新推荐文章于 2024-07-16 10:55:55 发布

樊小书生

最新推荐文章于 2024-07-16 10:55:55 发布

阅读量1.4w

点赞数 2

分类专栏： JavaScript 文章标签： javascript string number

本文链接：https://blog.csdn.net/fxss5201/article/details/54620052

版权

JavaScript 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

之前工作中遇到两个数字输入框的值比较大小，出现了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);

得到如下输出：
这里写图片描述

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

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

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

结果如下：
这里写图片描述

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