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 ,所以比较大小是按照字符串的方式进行的。

字符串大小比较的规则:

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

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

再如 ABCABC123 比较,比较三个字符后第一个串结束,所以就是后面一个串大。

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

JS 输出数据类型:

语法:typeof object ,打印数据类型代码如下:

console.log(pages); // string

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

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

语法:Number(object) ,代码如下:

Number(pages);

代码改为如下,就可以正常比较了:

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

JavaScript 类型转换:

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

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

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

推荐阅读:

Animate.css动画库的安装与使用

Vue.js学习笔记——条件、循环、双向绑定

JavaScript的引入方式和基本属性

阿里巴巴矢量图标库 iconfont 的使用方法

使用float后清除浮动的几种方法

赞 (3)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)