js输出数据类型，Number()数字类型转换及字符串大小比较

今天同事找我求助，在写一个分页功能时遇到了问题，输入页数跳转页面时，输入内容大于总页数时也会跳转。

他将总页数与 input 输入的数字进行对比，比如总页数时 6 ，输入 7 是正常提示“超出最大页数”，输入 50 却会跳转成功。

HTML：

<div>
    第5页
    共<span id="page">6</span>页
     <input type="text" id="inp-page"> <span id="skip">跳转</span>
</div>

jQuery：

$("#skip").click(function () {
  var pages = $("#page").html();
  var inpPage = $("#inp-page").val();
  if(inpPage > pages){
    alert("超出最大页数");
  }else{
    alert("跳转成功");
  }
})

输入数字 7 ，会弹出“超出最大页数”，输入 50 却会提示“跳转成功”。

原因：

原来获取到的是字符串 string ，并不是数字 Number ，所以比较大小是按照字符串的方式进行的。

字符串大小比较的规则：

比较的时候，从字符串左边开始，依次比较每个字符，直接出现差异、或者其中一个串结束为止。

比如 ABC 与 ACDE 比较，第一个字符相同，继续比较第二个字符，由于第二个字符是后面一个串大，所以不再继续比较，结果就是后面个串大。

再如 ABC 与 ABC123 比较，比较三个字符后第一个串结束，所以就是后面一个串大。

所以，长度不能直接决定大小，字符串的大小是由左边开始最前面的字符决定的。

JS 输出数据类型：

语法：typeof object ，打印数据类型代码如下：

console.log(pages); // string

所以我们刚刚比较的是字符串，上面的问题就好理解了，应该把 字符串 转换为数字类型，在进行比较。

将数据类型转换为字符串：

语法：Number(object) ，代码如下：

Number(pages);

代码改为如下，就可以正常比较了：

if( Number(inpPage) > Number(pages)){
    alert("超出最大页数");
}else{
    alert("跳转成功");
}

JavaScript 类型转换：

String() 将数字转换为字符串。

Date() 将日期转换为字符串。

Number() 将字符串转换为数字。