关于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 相关文章推荐
JS中处理与当前时间间隔的函数代码
May 23 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 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
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python操作csv文件实例详解
2017/07/31 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Python JSON编解码方式原理详解
2020/01/20 Python
python 等差数列末项计算方式
2020/05/03 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
python的setattr函数实例用法
2020/12/16 Python
python解包用法详解
2021/02/17 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
精伦电子Java笔试题
2013/01/16 面试题
11月红领巾广播稿
2014/01/17 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
软件测试专业推荐信
2014/09/18 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Golang 正则匹配效率详解
2021/04/25 Golang
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis