原文地址:JavaScript 判断是否为数字的几种方式_js 判断是否是数字-CSDN博客
- 前言
- 1. typeof、instanceof、Number.isInteger
- 2. parseInt、parseFloat
- 3. isNaN、isFinite
- 4. Number.isNaN、Number.isFinite
- 5. 正则表达式
- 6. 终极方案（推荐）
- 7. 结语
前言
js判断是否为数字的方式很多：
- typeof、instanceof、Number.isNumber
- parseInt、parseFloat
- isNaN、isFinite
- Number.isNaN、Number.isFinite
- 正则表达式
- 终极方案
我们逐一介绍，希望能帮到大家。
1. typeof、instanceof、Number.isInteger
typeof判断值是不是基本类型number，比如：
| 1 2 |
let num = 1;
typeof num === 'number'; // true
|
instanceof判断值是不是包装类Number，比如：
| 1 2 |
let num = new Number(1);
num instanceof Number; // true
|
Number.isInteger判断值是否是整数：
| 1 2 3 |
Number.isInteger(1); // true
Number.isInteger('1'); // false
Number.isInteger(1.1); // false
|
这几种方式的缺点，都是只能基于类型判断，无法判断字符串是否是数值。
2. parseInt、parseFloat
这个方法的特点，一句话，返回字符串开头最长的有效数字。
我们可以用!isNaN(parseFloat(value))来判断字符串是否是数值。
| 1 2 3 4 |
let str1 = '123';
let str2 = 'abc';
!isNaN(parseFloat(str1)); // true，是数字
!isNaN(parseFloat(str2)); // false，不是数字
|
parseInt和parseFloat解析的时候遇到非法字符结束，返回解析到的数值。也就是说只要字符串头部是合法数值，那么就能解析出数值，哪怕整体不是数值。比如123abc，会被解析程123。
因此，上面的判断方式还不够严谨，下面的终极方案是比较严谨的方式。
3. isNaN、isFinite
在介绍这两个方法之前，先讲下NaN，它表示Not-a-Number。两个NaN无法直接比较相等，因为我们只知道它不是数值，是啥不确定，也就无法比较相等。
| 1 2 3 |
NaN === NaN; // false
NaN == NaN; // false
Object.is(NaN, NaN); // false
|
- isNaN(value)，如果ToNumber(value)的结果为NaN返回true，否则返回false。
- isFinite(value)，如果ToNumber(value)的结果为数值，且不等于Infinity或-Infinity返回true，否则返回false。
isNaN和isFinite都会先将传入的值转成数值，再进行判断。ToNumber的规则跟直接使用Number函数一样。一些非数值在类型转换的时候都能转成数值，比如：
| 1 2 3 4 |
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(''); // 0
|
对null、true、false、''使用isNaN结果都是false，但是它们本身不是数值，因此不能单独使用isNaN。
4. Number.isNaN、Number.isFinite
这两个方法跟对应的全局方法是不一样的。
- Number.isNaN(value)，如果value为NaN返回true，否则返回false。
- Number.isFinite(value)，如果value为数值，且不等于Infinity或-Infinity返回true，否则返回false。
区别是全局方法会有强制类型转换，而这两个方法没有强制类型转换：
| 1 2 3 4 |
Number.isNaN(null); // true
Number.isNaN(true); // true
Number.isNaN(false); // true
Number.isNaN(''); // true
|
可以看，由于没有类型转换，所以Number.isNaN判断null、true、false、''的结果都是true。
但是“副作用”是数字字符串也会得到true：
| 1 |
Number.isNaN('123'); // true
|
Number.isNaN等价与：
| 1 2 3 |
Number.isNaN = Number.isNaN || function(value) {
return typeof value === "number" && isNaN(value);
}
|
而Number.isFinite等价于：
| 1 2 3 |
if (Number.isFinite === undefined) Number.isFinite = function(value) {
return typeof value === 'number' && isFinite(value);
}
|
因此，这两个方法本质上也是基于类型的，没法判断一个字符串是否为数值。
5. 正则表达式
| 1 2 3 |
let exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/;
exp.test('+1.9'); // true
exp.test('-.1e11'); // true
|
这个正则可以判断整数、浮点数、正负数和科学计数法。
不过我觉得判断是否是数值用正则，有点小题大做了。
6. 终极方案（推荐）
我们先看方案：
| 1 |
!isNaN(parseFloat(value)) && isFinite(value);
|
这其实是jquery中$.isNumeric的源码，多么简洁且优雅。
接下来我们看看它的原理，我们以字符串123abc为例，我们应该得到false。
- parseFloat('123abc')得到123；
- !isNaN(123)得到true；
- isFinite('123abc')得到false；
- 最终结果为false。
单独使用!isNaN(parseFloat(value))会将123abc当成数值，所以用isFinite额外判断一次，isFinite的另一个作用是排除无穷数。
| 1 2 |
!isNaN(parseFloat(Infinity)); // true
!isNaN(parseFloat(Infinity)) && isFinite(Infinity); // false
|
而且，因为parseFloat的解析是纯字符串解析，没有类型转换，所以不会将null、true、false、''当成数值。
| 1 2 3 4 |
!isNaN(parseFloat(null)) && isFinite(null); // false
!isNaN(parseFloat(true)) && isFinite(true); // false
!isNaN(parseFloat(false)) && isFinite(false); // false
!isNaN(parseFloat('')) && isFinite(''); // false
|
妙，妙不可言。
7. 结语
对这几个方法的介绍并不全面，因为我们探讨的主题是“判断值是否为数值”。这几个方法任何一个单独拎出来，都能讲一篇，有时间再跟大家分享。
标签：isNaN,false,数字,JavaScript,Number,value,几种,true,isFinite From： https://www.cnblogs.com/dirgo/p/17996575