首页 前端知识 js-判断输入值是不是数字、字符串

js-判断输入值是不是数字、字符串

2024-06-03 12:06:01 前端知识 前端哥 269 819 我要收藏

1、NaN

只要是类型转换失败,都会出现NaN。例如:

var i = Number('abc');
alert(i);//NaN
alert(typeof i);//number 查看a的数据类型

NaN:Not a number 不是个数字 的 数字类型

一旦写程序出现NaN,那么肯定进行了非法的运算操作。例如:

alert('200px' - 100);//NaN 忘记先把200px这个字符串转换为数字再进行计算,所以会出现NaN

NaN是提示进行了非法运算操作。

NaN是假,在布尔值中是false。

NaN被划分到Number数据类型中。

2、isNaN(不是数字)

isNaN()方法:判断某些值是不是数字

不是数字:true

是数字:false

isNaN讨厌数字,不讨厌数字类型,只要是数字就为false

相当于isNaN是文科生,文科男生不讨厌数学系的女生,只讨厌数学。

isNaN( )判断原理:

首先给内部Number( )进行转换,只要Number( )转换出来是数字直接为false,否则为true.

例如:

alert(isNaN('250'));//false 
首先用isNaN的兄弟Number()进行转换为'250' =>数字250,然后给isNaN,isNaN一看,原来是数字,直接就是false.

alert(isNaN(true));//false 
首先用Number()进行转换 true => 1 ,isNaN一看是数字1,直接为false.
具体Number()方法转换参考数据类型转化文章
alert(isNaN(2));//false 是数字为false
alert(isNaN(200));//false 是数字为false

alert(isNaN('你好'));//true 字符串为true,只要不是数字都为true
alert(isNaN(function(){alert(1)}));//true 函数也是true,只要不是数字都为true

3、判断输入的内容是不是数字

html:

<input type="text" name="" id="txt">
<input type="button" value="判断输入值是不是数字" id="btn">

js:

window.onload = function(){
    var txt = document.getElementById('txt');
    var btn = document.getElementById('btn');
    var str = '';//设置一个变量用来存储输入的内容
    btn.onclick = function(){
        str = txt.value;//存储输入框汇中输入的值
        // 直接从HTML中拿到的值,类型都是字符串
        // 所以如果判断输入内容的类型不能直接用typeof来进行判断
        // 用isNaN()来进行判断
        if(isNaN(str)){//isNaN讨厌数字,只要是数字就为false
            alert(str+'不是数字');
        }else{
            alert(str+'是数字');
        }
    }
}

4、判断输入的值是不是字符串

判断是否是字符串:typeof arr[i] === 'string'

var arr = [1,-2,'123','12px','12.5元','你好','hellow',[],'function(){alert(1);}',null,'abc'-2,Number('abc')];
for(var i=0;i<arr.length;i++){
    if(typeof arr[i] === 'string'){//判断是否是字符串用typeof
        // 是字符串弹出来
        alert(arr[i]);//'123'、'12px'、'12.5元' 、'你好'、'hellow'、'function(){alert(1);}'
    }
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10659.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!