jJavaScript中toFixed()和正則表達式的坑
toFixed精度問題
toFixed方法可以把Number四舍五入為指定小數(shù)位數(shù)的數(shù)字?？墒谴蠹铱聪孪旅孢@張圖，發(fā)現(xiàn)了什么？
0.985四舍五入之后變成了0.98！！
- 這就是toFixed方法的坑。
導(dǎo)致原因
那這到底是怎么回事呢？本質(zhì)其實是因為js小數(shù)的精度問題。 在計算機中計算，是將數(shù)字轉(zhuǎn)成二進制，進行計算之后再轉(zhuǎn)化為十進制。 比如將0.985轉(zhuǎn)化為二進制是0.1111110000101000（超出精度，結(jié)果保留了16位小數(shù)），此時再將該二進制轉(zhuǎn)化為十進制結(jié)果為：0.9849853515625，此時將他保留兩位小數(shù)就成了0.98。
解決辦法
- 那么要如何避免這種問題呢？可以用下面的方法來補充原生的toFixed方法
toFixed(number, precision) {
var str = number + "";
var len = str.length;
var last = str.substring(len - 1, len);
var afterPoint = str.substring(str.indexOf(".") + 1, len);
if (last == "5" && afterPoint.length > precision) {
last = "6";
str = str.substring(0, len - 1) + last;
return (str - 0).toFixed(precision);
} else {
return number.toFixed(precision);
}
},
正則表達式全局匹配的坑
有這么一個需求，select支持可以搜索item。剛看到我就興致沖沖去寫了，這還不簡單嗎，輸入的數(shù)據(jù)和select中的數(shù)據(jù)源進行正則匹配，匹配到的就是搜索到的。
過濾函數(shù)我是這么寫的：
//searchKey是輸入的數(shù)據(jù)
const regex = new RegExp(searchKey.trim(), 'gi');
let dataSource = [
{
value: 'test1',
},
{
value: 'test2',
},
];
let res = dataSource
.map((i) => {
let _flag = regex.test(i.value);
i.visible = _flag;
return i;
})
.filter((i) => i.visible);
但是實際運行時，發(fā)現(xiàn)數(shù)據(jù)源中的數(shù)據(jù)，有的可以匹配到有的匹配不到。當(dāng)時就納悶了，這有什么問題嗎？最后幾經(jīng)查找答案，原來是正則表達式的全局匹配有個坑：正則表達式中有一個lastIndex的屬性，這個屬性表示上一次匹配文本結(jié)果之后的第一個字符的位置。他在下一次查找的時候，會從lastIndex往后繼續(xù)查找，這就會導(dǎo)致一下個匹配返回false。
那么如何解決呢？
因為lastIndex屬性是可讀可寫的，所以我這里的解決辦法是每次test方法之后將將lastIndex置為零，這樣每次匹配都將會從最開始進行查找。這樣就會避免這個問題了哦！
let _flag = regex.test(i.value); regex.lastIndex = 0;
到此這篇關(guān)于jJavaScript中toFixed()和正則表達式的坑的文章就介紹到這了,更多相關(guān)toFixed()和正則表達式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了webpack4 css打包壓縮問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了微信小程序HTTP接口請求封裝代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
之前看到一個Android的加載效果不錯，一直想自己動手做一個，正好這段時間重溫了一個Canvas，所以就嘗試了一下。下面這篇文章主要給大家介紹了關(guān)于利用canvas實現(xiàn)加載效果的相關(guān)資料，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了ES6 如何改變JS內(nèi)置行為的代理與反射，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了js如何判斷用戶是在PC端和還是移動端訪問,需要的朋友可以參考下2014-04-04
element-ui 時間選擇器限制范圍的實現(xiàn)（隨動）
這篇文章主要介紹了element-ui 時間選擇器限制范圍（隨動）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了javascript笛卡爾積算法實現(xiàn)方法,實例分析了笛卡爾積算法的javascript實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
微信小程序連接數(shù)據(jù)庫與WXS的使用方法詳細介紹
這篇文章主要介紹了微信小程序連接數(shù)據(jù)庫與WXS的使用方法,微信小程序是騰訊內(nèi)部的產(chǎn)品,不能直接打開一個外部的鏈接,但是騰訊為開發(fā)者封裝好了API用來請求一個網(wǎng)站的內(nèi)容或者服務(wù),感興趣的同學(xué)可以參考下2023-12-12
Babel是一個廣泛使用的轉(zhuǎn)碼器,babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼，所以下面這篇文章就來給大家詳細介紹了關(guān)于利用babel將es6語法轉(zhuǎn)es5的相關(guān)資料，文章通過示例介紹的非常詳細，需要的朋友可以參考下。2017-12-12
javascript判斷移動端訪問設(shè)備并解析對應(yīng)CSS的方法
這篇文章主要介紹了javascript判斷移動端訪問設(shè)備并解析對應(yīng)CSS的方法,涉及移動端設(shè)備的判斷及動態(tài)加載技巧,需要的朋友可以參考下2015-02-02