excel判断字符串包含另一个字符串-尊龙游戏旗舰厅官网
在网页中，我们从用户输入的内容中获取的值通常是字符串，但是有时候我们希望用户输入的内容一定要能转成数值：
userinput.addeventlistener('change', (e) => {
const value = e.target.value;
console.log(typeof value); // string
console.assert(isnumeric(value), `not a numeric value: ${value}`);
});
即我们要实现一个isnumeric方法，判断用户输入的值是能转为数值的字符串。
我们讨论isnumeric实现前，先说一下限制用户输入的方式。
?? 如果我们设置input的type为number，并不能保证输入的内容一定是数值，因为如果input的type是number，它依然可以输入多个“ “、”-”、“.”、“e”。
input[type=number]并不阻止输入多个e
这是因为“ /-”(正负符号)，“.”(小数点)和“e”(科学记数法)都是number允许输入的字符。
不过如果在form提交的时候，浏览器会对input[type=number]内容再做一次检查：
form>
但是，不管怎样，用户还是可以通过修改页面上的元素，绕过这些检查，所以我们还是要用到isnumeric来判断用户输入的合法性。
我们先看一下isnumeric应该返回什么。
如果参考input[type=number]的规则，那么它应该支持所有合法的有穷数值写法：
function isnumeric(str) {
...
}
console.assert(isnumeric('1000'));
console.assert(isnumeric('-100.'));
console.assert(isnumeric('.1'));
console.assert(isnumeric('-3.2'));
console.assert(isnumeric('001'));
console.assert(isnumeric(' 4.5'));
console.assert(isnumeric('1e3'));
console.assert(isnumeric('1e-3'));
console.assert(isnumeric('-100e-3'));
console.assert(!isnumeric(' 3'));
console.assert(!isnumeric('-100..'));
console.assert(!isnumeric('3abc'));
console.assert(!isnumeric('abc'));
console.assert(!isnumeric('-3e3.2'));
console.assert(!isnumeric('infinity'));
console.assert(!isnumeric('-infinity'));
console.assert(!isnumeric(''));
那么具体要怎么实现呢？
parsefloat?
有同学想到用parsefloat，这个行不行呢？
function isnumeric(str) {
return !number.isnan(parsefloat(str));
}
这个显然是不行的，因为parsefloat('123abc')结果是123，因为parsefloat会尝试转部分数值，而忽略掉不能转数值的部分。
所以：
console.assert(!isnumeric('-100..'));
console.assert(!isnumeric('3abc'));
console.assert(!isnumeric('-3e3.2'));
这三个case是过不去的，另外这里用了number.isnan处理parsefloat之后的结果，由于±infinity是数值，number.isnan会返回false，所以：
console.assert(!isnumeric('infinity'));
console.assert(!isnumeric('-infinity'));
也pass不了。
isnan
有同学说，那我们直接使用isnan如何？
function isnumeric(str) {
return !isnan(str);
}
这次结果好得多，但是最后三条规则过不了：
console.assert(!isnumeric('infinity'));
console.assert(!isnumeric('-infinity'));
console.assert(!isnumeric(''));
±infinity和上面的原因一样，但是为什么''也pass不了呢？这是因为isnan会先尝试将参数转为number，而空字符串被转为了数值0。
console.log(number('')); // 0
这里面就不得不提一下ecma-262规范里面[[tonumber]]的转换规则了：
根据规则，null、boolean都会转成number，undefined被转成nan，undefined会被转成nan，而symbol直接抛typeerror...
加上空字符串''被转成0，isnan就会有些怪异的行为了：
console.log(isnan(undefined)); // true
console.log(isnan(null)); // false
console.log(isnan(true)); // false
console.log(isnan(false)); // false
console.log(isnan('')); // false
其实字符串除了''还有一些：
console.log(isnan(' ')); // false
console.log(isnan(' ')); // false
console.log(isnan('\t')); // false
console.log(isnan('\r')); // false
console.log(isnan('\n')); // false
这就是为什么es2015之后，又增加了number.isnan方法。
?? 冷知识：isnan方法对参数做[[tonumber]]转换，会导致一些比较怪异的结果，所以es2015增加了number.isnan，该方法不会对参数做类型转换，只要参数不是nan，不管是什么类型，number.isnan一律返回false。
console.log(isnan('abc')); // true
console.log(number.isnan('abc')); // false
console.log(isnan('')); // false
console.log(number.isnan('')); // false
isfinite
我们把isnan换成isfinite看看：
function isnumeric(str) {
return isfinite(str);
}
这下'±infinity'的问题解决了，因为number中的±infinite和nan的isfinite结果都返回false。
不过与isnan一样，isfinite也一样会对参数进行类型转换，所以，这几个case问题还是存在：
console.assert(!isnumeric(''));
console.assert(!isnumeric(' '));
console.assert(!isnumeric(' '));
console.assert(!isnumeric('\t'));
console.assert(!isnumeric('\r'));
console.assert(!isnumeric('\n'));
?? 冷知识：isfinite与isnan一样，会对参数做[[tonumber]]转换，因此对应的，es2015也提供了一个number.isfinite，这是不转换参数类型的版本。如果参数不是number类型，number.isfinite一律返回false。
console.log(isfinite('123')); // true
console.log(number.isfinite('123')); // false
console.log(isfinite('')); // true
console.log(number.isfinite('')); // false
好了，那么讨论到这里，最后的解决方法已经呼之欲出了。
因为对于isnumeric用法，我们只需要处理字符串，非字符串的case我们可以不管；那么我们剩下的就是处理这一堆字符串case：
console.assert(!isnumeric(''));
console.assert(!isnumeric(' '));
console.assert(!isnumeric(' '));
console.assert(!isnumeric('\t'));
console.assert(!isnumeric('\r'));
console.assert(!isnumeric('\n'));
这个有很多方式可以处理了，比如它们都匹配正则/^\s*$/，所以：
function isnumeric(str) {
return !/^\s*$/.test(str) && isfinite(str);
}
这个版本就可以通过所有的case了。
另外，这些字符串的parsefloat都是nan，所以，也可以这样：
function isnumeric(obj) {
return !isnan(parsefloat(obj)) && isfinite(obj);
}
实际上这个比上面那个正则的版本更好，因为这个还同时处理了非字符串的case，因为：
parsefloat(null);
parsefloat(true);
parsefloat(false);
上面这些的结果都是nan。
实际上，上面这个版本就是著名的jquery框架中的jquery.isnumeric的实现方式。
因为现在不建议用isnan和isfinite，而推荐使用number.isnan和number.isfinite替代，所以一些linter的规则可能会禁止使用这两个函数，但是没有关系，因为我们可以这么写：
function isnumeric(obj) {
return !number.isnan(parsefloat(obj))
&& number.isfinite(number(obj));
}
所以，这个就是最终的版本。
原来，实现一个小小的函数isnumeric，有那么多需要注意的地方。
关于判断字符串是数值，你还有什么想法，欢迎在issue中讨论。
总结
以上是尊龙游戏旗舰厅官网为你收集整理的excel判断字符串包含另一个字符串_【前端冷知识】如何正确判断一个字符串是数值？...的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：