JavaScript中验证十进制数字 - IsNumeric()

技术背景

在JavaScript开发中，常常需要判断一个变量是否包含数值，无论其类型如何，可能是包含数值的字符串（需考虑指数表示法等）、数字对象等。因此实现一个 IsNumeric 函数来验证变量是否为数值就很有必要。

实现步骤

1. 使用 isNaN 和 isFinite

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

此函数通过 parseFloat 将输入转换为浮点数，然后使用 isNaN 检查是否为非数字，再用 isFinite 检查是否为有限数。不过要注意，isNaN 和 isFinite 由于强制转换为数字会有令人困惑的行为，在ES6中，Number.isNaN 和 Number.isFinite 可以修复这些问题。

2. jQuery的实现方式

isNumeric: function(obj) {
    var realStringObj = obj && obj.toString();
    return !jQuery.isArray(obj) && (realStringObj - parseFloat(realStringObj) + 1) >= 0;
}

3. Angular 4.3的实现

export function isNumeric(value: any): boolean {
    return !isNaN(value - parseFloat(value));
}

4. 使用减法和长度检查

function IsNumeric(input) {
    var temp = '' + input;
    return (input - 0) == input && temp.length > 0;
}

该函数通过 input - 0 强制进行类型转换，如果转换失败结果为 NaN，再与原输入比较，同时检查长度避免空字符串问题。

5. 使用正则表达式

const IsNumeric = (num) => /^-{0,1}\d*\.{0,1}\d+$/.test(num);

正则表达式 /^-{0,1}\d*\.{0,1}\d+$/ 匹配以可选负号开头，后跟可选数字、可选小数点和至少一个数字的字符串。

6. 考虑多种情况的正则表达式

function IsNumeric(input){
    var RE = /^-?(0|INF|(0[1-7][0-7]*)|(0x[0-9a-fA-F]+)|((0|[1-9][0-9]*|(?=[\.,]))([\.,][0-9]+)?([eE]-?\d+)?))$/;
    return (RE.test(input));
}

此正则表达式考虑了正负十六进制、八进制、科学计数法、INF 等情况。

7. 使用 Number.isFinite

Number.isFinite(Infinity)   // false
Number.isFinite(NaN)        // false
Number.isFinite(-Infinity)  // false
Number.isFinite(0)          // true
Number.isFinite(2e64)       // true
Number.isFinite('0')        // false
Number.isFinite(null)       // false

Number.isFinite 可以检查一个变量是否为有限数，是ES2015引入的方法。

核心代码

以下是几个常用的 IsNumeric 函数实现：

// 使用 isNaN 和 isFinite
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

// 使用正则表达式
const IsNumeric = (num) => /^-{0,1}\d*\.{0,1}\d+$/.test(num);

// 考虑多种情况的正则表达式
function IsNumericFull(input){
    var RE = /^-?(0|INF|(0[1-7][0-7]*)|(0x[0-9a-fA-F]+)|((0|[1-9][0-9]*|(?=[\.,]))([\.,][0-9]+)?([eE]-?\d+)?))$/;
    return (RE.test(input));
}

最佳实践

• 如果只是简单判断一个值是否可以转换为数字，优先使用 isNaN 和 isFinite 的组合。
• 如果需要考虑更多的数值表示形式，如十六进制、八进制等，可以使用正则表达式。
• 在ES6及以上环境中，尽量使用 Number.isNaN 和 Number.isFinite 避免类型转换带来的问题。

常见问题

• 空字符串问题：部分实现中，空字符串可能会被错误判断为数值，可通过检查字符串长度来避免。
• 数组问题：有些实现会将长度为1且元素为数值的数组判断为数值，可添加对数组类型的检查。
• 十六进制和八进制问题：不同的实现对十六进制和八进制的处理可能不同，需要根据具体需求进行调整。