关于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日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
JS数据类型分类及常用判断方法
Nov 19 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+oracle 分页类
2006/10/09 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
vue实现按钮切换图片
2021/01/20 Vue.js
Python 中 list 的各项操作技巧
2017/04/13 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Django框架视图介绍与使用详解
2019/07/18 Python
基于python实现文件加密功能
2020/01/06 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
python二维图制作的实例代码
2020/12/03 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
资料员的岗位职责
2013/11/20 职场文书
完整版商业计划书
2014/09/15 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
新生入学欢迎词
2015/01/26 职场文书
党员带头倡议书
2015/04/29 职场文书
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL