关于jQuery $.isNumeric vs. $.isNaN vs. isNaN


Posted in Javascript onApril 15, 2013

在jQuery中,有几种方式可以判断一个对象是否是数字,或者可否转换为数字。
首先,jQuery.isNaN()在最新版本中已经被移除了(1.7之后),取而代之的是  jQuery.isNumeric ()。这并不奇怪,因为jQuery.isNaN() 同Javascript内置的isNaN()名字相同,但是语义却不完全相同,在一定意义上会造成歧义。 jQuery.isNumeric ()有着与其相似的功能,同时也解决了歧义问题。

jQuery.isNumeric ()检查传进的参数是否是数字或者可否转换为数字;Javascript 内置的isNaN() 检查传进的参数是否是一个合法的数字,典型的例子是0/0。

具体区别可以看测试:

测试数据:

var values = [
"-10",
,
xFF,
"0xFF",
"8e5",
.1415,
+10,
,
"",
{},
NaN,
null,
true,
Infinity,
undefined,
false
];

使用jQuery verision1.6:

for( var index in values ) {
    var v = values[ index ];
    $( 'table' ).append( '<tr><td>'+v+'</td><td>'
                         +(!isNaN( v )?"true":"false")
                         +'</td><td>'
                         +(!$.isNaN( v )?"true":"false")
                         +'</td></tr>' );
}

输出:

  !isNaN() !$.isNaN()
-10 true true
16 true true
255 true true
0xFF true true
8e5 true true
3.1415 true true
10 true true
100 true true
  true false
[object Object] false false
NaN false false
null true false
true true false
Infinity true false
undefined false false

使用 jQuery version1.7

for( var index in values ) {
    var v = values[ index ];
    $( 'table' ).append( '<tr><td>'+v+'</td><td>'
                         +(!isNaN( v )?"true":"false")
                         +'</td><td>'
                         +($.isNumeric( v )?"true":"false")
                         +'</td></tr>' );
}

输出:

!isNaN() $.isNumeric()
-10 true true
16 true true
255 true true
0xFF true true
8e5 true true
3.1415 true true
10 true true
100 true true
  true false
[object Object] false false
NaN false false
null true false
true true false
Infinity true false
undefined false false

可以看出,$.isNumeric() 跟 !$.isNaN() 结果是一样的, 而 jQuery $.isNumeric() 同Javascript 自带的!isNaN()在对空字符串、null、true/false、Infinity的处理是不同的。因为isNaN()只是检查传入的值是否是NaN类型。

NaN (Not a Number)是一个数字数据类型,表明未定义(undefined )或无法表示(unrepresentable )的值,尤其是浮点数计算值。

因此,isNaN(null) == false 在语义上是正确的,因为null不是NaN(事实上null、ture/false等等会先转为数字0)。但是如果用!isNaN()来判断传入的值可否转换为数字,又不大恰当。而Javascript另一种方式 typeof num == 'number' 则无法检测字符串情况。因此如果不使用 jQuery $.isNumeric(),则最好还是重写一个方法判断,比如用正则来判断或者:

function isNumeric(obj) {
    return !isNaN(parseFloat(obj)) && isFinite(obj);
}
Javascript 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
vue ssr 指南详读
Jun 29 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
深入了解javascript中的prototype与继承
Apr 14 #Javascript
谈谈JavaScript中的函数与闭包
Apr 14 #Javascript
在新窗口打开超链接的方法小结
Apr 14 #Javascript
JS中setTimeout()的用法详解
Apr 14 #Javascript
js验证是否为数字的总结
Apr 14 #Javascript
JS 实现Json查询的方法实例
Apr 12 #Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 #Javascript
You might like
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
用js重建星际争霸
2006/12/22 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
layui使用label标签的方法
2019/09/14 Javascript
Python中异常重试的解决方案详解
2017/05/05 Python
windows下python安装pip图文教程
2018/05/25 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python实现udp传输图片功能
2020/03/20 Python
python中setuptools的作用是什么
2020/06/19 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
会计主管岗位职责
2014/01/03 职场文书
解除劳动合同证明书
2014/09/26 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
如何写新闻稿
2015/07/18 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android