excel判断字符串包含另一个字符串_【前端冷知识】如何正确判断一个字符串是数值？...
在網(wǎng)頁中，我們從用戶輸入的內容中獲取的值通常是字符串，但是有時候我們希望用戶輸入的內容一定要能轉成數(shù)值：
<input?id="userInput">
userInput.addEventListener('change',?(e)?=>?{
??const?value?=?e.target.value;
??console.log(typeof?value);?// string
??console.assert(isNumeric(value),?`Not a numeric value:?${value}`);
});
即我們要實現(xiàn)一個isNumeric方法，判斷用戶輸入的值是能轉為數(shù)值的字符串。
我們討論isNumeric實現(xiàn)前，先說一下限制用戶輸入的方式。
?? 如果我們設置input的type為number，并不能保證輸入的內容一定是數(shù)值，因為如果input的type是number，它依然可以輸入多個“+“、”-”、“.”、“e”。
<input?type="number"?step="0.0000001"?id="userInput">
input[type=number]并不阻止輸入多個e
這是因為“+/-”(正負符號)，“.”(小數(shù)點)和“e”(科學記數(shù)法)都是Number允許輸入的字符。
不過如果在form提交的時候，瀏覽器會對input[type=number]內容再做一次檢查：
<form?id="myForm">
??<input?type="number">
??<input?type="submit">
form>
但是，不管怎樣，用戶還是可以通過修改頁面上的元素，繞過這些檢查，所以我們還是要用到isNumeric來判斷用戶輸入的合法性。
我們先看一下isNumeric應該返回什么。
如果參考input[type=number]的規(guī)則，那么它應該支持所有合法的有窮數(shù)值寫法：
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(''));
那么具體要怎么實現(xiàn)呢？
parseFloat?
有同學想到用parseFloat，這個行不行呢？
function?isNumeric(str)?{
??return?!Number.isNaN(parseFloat(str));
}
這個顯然是不行的，因為parseFloat('123abc')結果是123，因為parseFloat會嘗試轉部分數(shù)值，而忽略掉不能轉數(shù)值的部分。
所以：
console.assert(!isNumeric('-100..'));
console.assert(!isNumeric('3abc'));
console.assert(!isNumeric('-3e3.2'));
這三個case是過不去的，另外這里用了Number.isNaN處理parseFloat之后的結果，由于±Infinity是數(shù)值，Number.isNaN會返回false，所以：
console.assert(!isNumeric('Infinity'));
console.assert(!isNumeric('-Infinity'));
也pass不了。
isNaN
有同學說，那我們直接使用isNaN如何？
function?isNumeric(str)?{
??return?!isNaN(str);
}
這次結果好得多，但是最后三條規(guī)則過不了：
console.assert(!isNumeric('Infinity'));
console.assert(!isNumeric('-Infinity'));
console.assert(!isNumeric(''));
±Infinity和上面的原因一樣，但是為什么''也pass不了呢？這是因為isNaN會先嘗試將參數(shù)轉為Number，而空字符串被轉為了數(shù)值0。
console.log(Number(''));?// 0
這里面就不得不提一下ECMA-262規(guī)范里面[[ToNumber]]的轉換規(guī)則了：
根據(jù)規(guī)則，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方法對參數(shù)做[[ToNumber]]轉換，會導致一些比較怪異的結果，所以ES2015增加了Number.isNaN，該方法不會對參數(shù)做類型轉換，只要參數(shù)不是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也一樣會對參數(shù)進行類型轉換，所以，這幾個case問題還是存在：
console.assert(!isNumeric(''));
console.assert(!isNumeric(' '));
console.assert(!isNumeric(' '));
console.assert(!isNumeric('\t'));
console.assert(!isNumeric('\r'));
console.assert(!isNumeric('\n'));
?? 冷知識：isFinite與isNaN一樣，會對參數(shù)做[[ToNumber]]轉換，因此對應的，ES2015也提供了一個Number.isFinite，這是不轉換參數(shù)類型的版本。如果參數(shù)不是Number類型，Number.isFinite一律返回false。
console.log(isFinite('123'));?// true
console.log(Number.isFinite('123'));?// false
console.log(isFinite(''));?// true
console.log(Number.isFinite(''));?// false
好了，那么討論到這里，最后的解決方法已經(jīng)呼之欲出了。
因為對于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的實現(xiàn)方式。
因為現(xiàn)在不建議用isNaN和isFinite，而推薦使用Number.isNaN和Number.isFinite替代，所以一些linter的規(guī)則可能會禁止使用這兩個函數(shù)，但是沒有關系，因為我們可以這么寫：
function?isNumeric(obj)?{
??return?!Number.isNaN(parseFloat(obj))
????&&?Number.isFinite(Number(obj));
}
所以，這個就是最終的版本。
原來，實現(xiàn)一個小小的函數(shù)isNumeric，有那么多需要注意的地方。
關于判斷字符串是數(shù)值，你還有什么想法，歡迎在issue中討論。
總結
以上是生活随笔為你收集整理的excel判断字符串包含另一个字符串_【前端冷知识】如何正确判断一个字符串是数值？...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 股票商誉规模是什么意思
- 下一篇： 2017年html5行业报告,云适配发布