JavaScript判断是否为数字的几种方式汇总(推荐!)
前言
js判断是否为数字的方式很多:
- typeof、instanceof、Number.isNumber
- parseInt、parseFloat
- isNaN、isFinite
- Number.isNaN、Number.isFinite
- 正则表达式
- 终极方案
我们逐一介绍,希望能帮到大家。
1. typeof、instanceof、Number.isInteger
typeof判断值是不是基本类型number,比如:
let num = 1; typeof num === 'number'; // true
instanceof判断值是不是包装类Number,比如:
let num = new Number(1); num instanceof Number; // true
Number.isInteger判断值是否是整数:
Number.isInteger(1); // true Number.isInteger('1'); // false Number.isInteger(1.1); // false
这几种方式的缺点,都是只能基于类型判断,无法判断字符串是否是数值。
2. parseInt、parseFloat
这个方法的特点,一句话,返回字符串开头最长的有效数字。
我们可以用!isNaN(parseFloat(value))来判断字符串是否是数值。
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无法直接比较相等,因为我们只知道它不是数值,是啥不确定,也就无法比较相等。
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函数一样。一些非数值在类型转换的时候都能转成数值,比如:
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。
区别是全局方法会有强制类型转换,而这两个方法没有强制类型转换:
Number.isNaN(null); // true Number.isNaN(true); // true Number.isNaN(false); // true Number.isNaN(''); // true
可以看,由于没有类型转换,所以Number.isNaN判断null、true、false、''的结果都是true。
但是“副作用”是数字字符串也会得到true:
Number.isNaN('123'); // true
Number.isNaN等价与:
Number.isNaN = Number.isNaN || function(value) { return typeof value === "number" && isNaN(value); }
而Number.isFinite等价于:
if (Number.isFinite === undefined) Number.isFinite = function(value) { return typeof value === 'number' && isFinite(value); }
因此,这两个方法本质上也是基于类型的,没法判断一个字符串是否为数值。
5. 正则表达式
let exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/; exp.test('+1.9'); // true exp.test('-.1e11'); // true
这个正则可以判断整数、浮点数、正负数和科学计数法。
不过我觉得判断是否是数值用正则,有点小题大做了。
6. 终极方案(推荐)
我们先看方案:
!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的另一个作用是排除无穷数。
!isNaN(parseFloat(Infinity)); // true !isNaN(parseFloat(Infinity)) && isFinite(Infinity); // false
而且,因为parseFloat的解析是纯字符串解析,没有类型转换,所以不会将null、true、false、''当成数值。
!isNaN(parseFloat(null)) && isFinite(null); // false !isNaN(parseFloat(true)) && isFinite(true); // false !isNaN(parseFloat(false)) && isFinite(false); // false !isNaN(parseFloat('')) && isFinite(''); // false
妙,妙不可言。
7. 结语
对这几个方法的介绍并不全面,因为我们探讨的主题是“判断值是否为数值”。这几个方法任何一个单独拎出来,都能讲一篇,有时间再跟大家分享。
到此这篇关于JavaScript判断是否为数字的几种方式的文章就介绍到这了,更多相关js判断是否为数字内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/qq_23365135/article/details/123833406
相关文章
- Create Procedure AtoC @ChangeMoney Money as Set Nocount ON Declare @String1 char(20) Declare @String2 char(30) ...2016-11-25
- 这篇文章介绍了C#判断字符串是否数字或字母的实例,有需要的朋友可以参考一下...2020-06-25
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- CREATE FUNCTION ChangeBigSmall (@ChangeMoney money) RETURNS VarChar(100) AS BEGIN Declare @String1 char(20) Declare @String2 char...2016-11-25
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 使用 conditional comment 来判断 IE 的版本。嗯,是早早有人提出,但没有认真看代码。昨天刚好在看 CSS3 PIE 的时候看到,觉得是不是不靠谱。今天看到 Paul Irish 也提起,那么,推荐一下吧。这是作者博客上写的:复制代码 代码...2014-05-31
- 下面小编就为大家分享一篇c# 判断是否为空然后赋值的4种实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要为大家详细介绍了C#实现猜数字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11