关于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 相关文章推荐
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
JS将unicode码转中文方法
May 08 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
让你30分钟快速掌握vue3教程
Oct 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
php实现的简单日志写入函数
2015/03/31 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python快速排序代码实例
2013/11/21 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python3.5绘制随机漫步图
2018/08/27 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
丑小鸭教学反思
2014/02/03 职场文书
婚姻出轨保证书
2015/05/08 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle