jQuery $.isNumeric 与原生 isNaN 的区别及替代方案

jQuery $.isNumeric 的引入背景

在 jQuery 库中，判断对象是否为数字或能否转换为数字有多种方法。需要注意的是，jQuery.isNaN() 方法在 1.7 版本之后已被移除，取而代之的是 jQuery.isNumeric()。这一变更并非偶然，因为 jQuery.isNaN() 与 JavaScript 内置的 isNaN() 名称相同但语义存在差异，容易引发混淆。jQuery.isNumeric() 不仅功能相似，还有效解决了这一歧义问题。

$.isNumeric 与原生 isNaN 的功能区别

jQuery.isNumeric() 用于检查传入的参数是否为数字类型，或者是否可以被转换为数字；而 JavaScript 内置的 isNaN() 则是检查传入的参数是否不是一个合法的数字值，例如 0/0 的结果。

测试数据与版本对比分析

具体的行为差异可以通过以下测试用例进行观察：

测试所使用的数据集合如下：

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

使用 jQuery version1.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>' );
}

输出结果如下：

使用 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>' );
}

输出结果如下：

语义差异解析与替代方案

从测试结果可以看出，$.isNumeric() 的结果与 !$.isNaN() 一致，但 jQuery $.isNumeric() 与 JavaScript 自带的 !isNaN() 在处理空字符串、null、true/false 以及 Infinity 时存在显著差异。这是因为 isNaN() 仅检查传入的值是否为 NaN 类型。

NaN (Not a Number) 是一个数字数据类型，表示未定义（undefined）或无法表示（unrepresentable）的值，通常出现在浮点数计算中。

因此，isNaN(null) 返回 false 在语义上是正确的，因为 null 本身不是 NaN（null、true/false 等值在比较时会先转换为数字 0）。然而，如果使用 !isNaN() 来判断传入的值是否可以转换为数字，这种做法并不恰当。另一方面，JavaScript 中的 typeof num == 'number' 方式无法检测字符串形式的数字。因此，如果不使用 jQuery $.isNumeric()，最好重写一个判断方法，例如使用正则表达式判断，或者采用以下代码：

function isNumeric(obj) {
return !isNaN(parseFloat(obj)) && isFinite(obj);
}