JavaScript 判断是否为数字的几种方式

JavaScript 判断是否为数字的几种方式js判断是否为数字方式很多:typeof、instanceof、Number.isNumberparseInt、parseFloatisNaN、isFinite正则表达式本片文章就介绍一下这些方式的区别和用法。1.typeof、instanceof、Number.isInteger使用typeof判断对象是不是基本类型number,比如:letnum=1;typeofnum===’number’;//true使用instanceof判断对象是不是包装类Number

大家好,又见面了,我是你们的朋友全栈君。

喜欢博主的文章,欢迎关注、点赞?、收藏⭐️、留言?支持,谢谢大家

js判断是否为数字的方式很多:

  1. typeofinstanceofNumber.isNumber
  2. parseIntparseFloat
  3. isNaNisFinite
  4. Number.isNaNNumber.isFinite
  5. 正则表达式
  6. 终极方案

我们逐一介绍,希望能帮到大家。

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,不是数字

parseIntparseFloat解析的时候遇到非法字符结束,返回解析到的数值。也就是说只要字符串头部是合法数值,那么就能解析出数值,哪怕整体不是数值。比如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

isNaNisFinite都会先将传入的值转成数值,再进行判断。ToNumber的规则跟直接使用Number函数一样。一些非数值在类型转换的时候都能转成数值,比如:

Number(true);         // 1
Number(false);        // 0
Number(null);         // 0
Number('');           // 0

nulltruefalse''使用isNaN结果都是false,但是它们本身不是数值,因此不能单独使用isNaN

4. Number.isNaN、Number.isFinite

这两个方法跟对应的全局方法是不一样的。

  • Number.isNaN(value),如果valueNaN返回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判断nulltruefalse''的结果都是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

  1. parseFloat('123abc')得到123
  2. !isNaN(123)得到true
  3. isFinite('123abc')得到false
  4. 最终结果为false

单独使用!isNaN(parseFloat(value))会将123abc当成数值,所以用isFinite额外判断一次,isFinite的另一个作用是排除无穷数。

!isNaN(parseFloat(Infinity));  // true
!isNaN(parseFloat(Infinity)) && isFinite(Infinity); // false

而且,因为parseFloat的解析是纯字符串解析,没有类型转换,所以不会将nulltruefalse''当成数值。

!isNaN(parseFloat(null)) && isFinite(null);   // false
!isNaN(parseFloat(true)) && isFinite(true);   // false
!isNaN(parseFloat(false)) && isFinite(false); // false
!isNaN(parseFloat('')) && isFinite('');       // false

妙,妙不可言。

7. 结语

对这几个方法的介绍并不全面,因为我们探讨的主题是“判断值是否为数值”。这几个方法任何一个单独拎出来,都能讲一篇,有时间再跟大家分享。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149773.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 一个多边形内部有3枚钉子_多边形的内部和外部

    一个多边形内部有3枚钉子_多边形的内部和外部Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other)Total Submission(s) : 24 Accepted Submission(s) : 7Problem DescriptionStatement of the Problem Several drawing applications allow us to draw polygons and almost all of the

    2022年8月10日
    3
  • Spring Security CAS认证

    Spring Security CAS认证13.7CAS认证13.7.1概述JA-SIG生产一种称为CAS的企业级单点登录系统。与其他计划不同,JA-SIG的中央身份验证服务是开源的,广泛使用的,易于理解,独立于平台,并支持代理功能。SpringSecurity完全支持CAS,并提供从SpringSecurity的单应用程序部署到企业级CAS服务器保护的多应用程序部署的轻松迁移路径。您可以在https://www.ape…

    2022年6月25日
    68
  • 微信小程序从零开始开发步骤(一)_微信小程序开发零基础入门

    微信小程序从零开始开发步骤(一)_微信小程序开发零基础入门随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)、博主微信(guyun297890152)、QQ技术交流群(183198395)。from:https://www.jianshu.com/p/aaef5ceb3936从零开始小程序今天一不小心拿到了小程序的内测资格,为了不辜负微信团队的信任,我决定十一奋斗一把!不过话说我可是一个And…

    2022年9月1日
    6
  • webstorm激活码2019(注册激活)

    (webstorm激活码2019)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月29日
    583
  • windows环境下,如何在Pycharm下安装TensorFlow环境「建议收藏」

    windows环境下,如何在Pycharm下安装TensorFlow环境「建议收藏」原文转自:https://blog.csdn.net/u012052268/article/details/74202439最近由于工作需要要使用TensorFlow,所以只能狂补相关的知识。本来博主打算在Ubantu上玩,但是由于一些原因还是放弃了这个想法,就转移到Pycharm上来玩。以下是自己在收集资料的过程中看到一篇很好的安装教程,分享一下。1.安装Anaconda选择相应的A…

    2022年8月25日
    5
  • java静态代理实现_静态注册和动态注册的优缺点

    java静态代理实现_静态注册和动态注册的优缺点思考:以常见的增删改查为例,在执行增删改的时候我们需要开启事务,执行完成后需要提交事务假如说你Service里有100个增删改的方法,那这100个方法里除了你自己真正需要处理的业务逻辑外,每个方法都还需要去关注开启事务,提交事务这些动作。那有没有稍微好点的办法解决呢?于是就出现了代理模式的概念,那什么是代理模式呢?1、什么是代理模式简单来说:代理就是对目标方法进行增强。什么意思呢?…

    2022年10月17日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号