excel判断字符串包含另一个字符串-凯发ag旗舰厅登录网址下载

在网页中，我们从用户输入的内容中获取的值通常是字符串，但是有时候我们希望用户输入的内容一定要能转成数值：

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中讨论。

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的excel判断字符串包含另一个字符串_【前端冷知识】如何正确判断一个字符串是数值？...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。