关于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 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
javascript object array方法使用详解
Dec 03 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
浅谈Node 异步IO和事件循环
May 05 Javascript
js实现淘宝首页的banner栏效果
Nov 26 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
htm调用JS代码
2007/03/15 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
canvas雪花效果核心代码分享
2017/02/19 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
JS实现简易留言板增删功能
2020/02/08 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
python如何实现int函数的方法示例
2018/02/19 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
什么是Web Service?
2012/07/25 面试题
高中自我评价分享
2013/12/05 职场文书
迟到检讨书500字
2014/02/05 职场文书
《学棋》教后反思
2014/04/14 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis