jJavaScript中toFixed()和正則表達(dá)式的坑
toFixed精度問(wèn)題
toFixed方法可以把Number
四舍五入為指定小數(shù)位數(shù)的數(shù)字??墒谴蠹铱聪孪旅孢@張圖,發(fā)現(xiàn)了什么?
0.985四舍五入之后變成了0.98??!
- 這就是toFixed方法的坑。
導(dǎo)致原因
那這到底是怎么回事呢?本質(zhì)其實(shí)是因?yàn)閖s小數(shù)的精度問(wèn)題。 在計(jì)算機(jī)中計(jì)算,是將數(shù)字轉(zhuǎn)成二進(jìn)制,進(jìn)行計(jì)算之后再轉(zhuǎn)化為十進(jìn)制。 比如將0.985
轉(zhuǎn)化為二進(jìn)制是0.1111110000101000
(超出精度,結(jié)果保留了16位小數(shù)),此時(shí)再將該二進(jìn)制轉(zhuǎn)化為十進(jìn)制結(jié)果為:0.9849853515625
,此時(shí)將他保留兩位小數(shù)就成了0.98
。
解決辦法
- 那么要如何避免這種問(wèn)題呢?可以用下面的方法來(lái)補(bǔ)充原生的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); } },
正則表達(dá)式全局匹配的坑
有這么一個(gè)需求,select支持可以搜索item。剛看到我就興致沖沖去寫(xiě)了,這還不簡(jiǎn)單嗎,輸入的數(shù)據(jù)和select中的數(shù)據(jù)源進(jìn)行正則匹配,匹配到的就是搜索到的。
過(guò)濾函數(shù)我是這么寫(xiě)的:
//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);
但是實(shí)際運(yùn)行時(shí),發(fā)現(xiàn)數(shù)據(jù)源中的數(shù)據(jù),有的可以匹配到有的匹配不到。當(dāng)時(shí)就納悶了,這有什么問(wèn)題嗎?最后幾經(jīng)查找答案,原來(lái)是正則表達(dá)式的全局匹配有個(gè)坑:正則表達(dá)式中有一個(gè)lastIndex
的屬性,這個(gè)屬性表示上一次匹配文本結(jié)果之后的第一個(gè)字符的位置。他在下一次查找的時(shí)候,會(huì)從lastIndex
往后繼續(xù)查找,這就會(huì)導(dǎo)致一下個(gè)匹配返回false。
那么如何解決呢?
因?yàn)?code>lastIndex屬性是可讀可寫(xiě)的,所以我這里的解決辦法是每次test方法之后將將lastIndex置為零,這樣每次匹配都將會(huì)從最開(kāi)始進(jìn)行查找。這樣就會(huì)避免這個(gè)問(wèn)題了哦!
let _flag = regex.test(i.value); regex.lastIndex = 0;
到此這篇關(guān)于jJavaScript中toFixed()和正則表達(dá)式的坑的文章就介紹到這了,更多相關(guān)toFixed()和正則表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 盤(pán)點(diǎn)javascript 正則表達(dá)式中 中括號(hào)的【坑】
- JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
- JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)
- javascript中toFixed()四舍五入使用方法詳解
- js正則表達(dá)式簡(jiǎn)單校驗(yàn)方法
- js用正則表達(dá)式篩選年月日的實(shí)例方法
- JS中toFixed()方法四舍五入的精度問(wèn)題詳解
- JavaScript 正則表達(dá)式詳解
- jmeter實(shí)現(xiàn)接口關(guān)聯(lián)的兩種方式(正則表達(dá)式提取器和json提取器)
- 在nest.js中通過(guò)正則表達(dá)式正確設(shè)置驗(yàn)證的方法
相關(guān)文章
微信小程序HTTP接口請(qǐng)求封裝代碼實(shí)例
這篇文章主要介紹了微信小程序HTTP接口請(qǐng)求封裝代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09利用canvas實(shí)現(xiàn)的加載動(dòng)畫(huà)效果實(shí)例代碼
之前看到一個(gè)Android的加載效果不錯(cuò),一直想自己動(dòng)手做一個(gè),正好這段時(shí)間重溫了一個(gè)Canvas,所以就嘗試了一下。下面這篇文章主要給大家介紹了關(guān)于利用canvas實(shí)現(xiàn)加載效果的相關(guān)資料,需要的朋友可以參考下。2017-07-07js如何判斷用戶是在PC端和還是移動(dòng)端訪問(wèn)
這篇文章主要介紹了js如何判斷用戶是在PC端和還是移動(dòng)端訪問(wèn),需要的朋友可以參考下2014-04-04element-ui 時(shí)間選擇器限制范圍的實(shí)現(xiàn)(隨動(dòng))
這篇文章主要介紹了element-ui 時(shí)間選擇器限制范圍(隨動(dòng)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01javascript笛卡爾積算法實(shí)現(xiàn)方法
這篇文章主要介紹了javascript笛卡爾積算法實(shí)現(xiàn)方法,實(shí)例分析了笛卡爾積算法的javascript實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04微信小程序連接數(shù)據(jù)庫(kù)與WXS的使用方法詳細(xì)介紹
這篇文章主要介紹了微信小程序連接數(shù)據(jù)庫(kù)與WXS的使用方法,微信小程序是騰訊內(nèi)部的產(chǎn)品,不能直接打開(kāi)一個(gè)外部的鏈接,但是騰訊為開(kāi)發(fā)者封裝好了API用來(lái)請(qǐng)求一個(gè)網(wǎng)站的內(nèi)容或者服務(wù),感興趣的同學(xué)可以參考下2023-12-12利用babel將es6語(yǔ)法轉(zhuǎn)es5的簡(jiǎn)單示例
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器,babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼,所以下面這篇文章就來(lái)給大家詳細(xì)介紹了關(guān)于利用babel將es6語(yǔ)法轉(zhuǎn)es5的相關(guān)資料,文章通過(guò)示例介紹的非常詳細(xì),需要的朋友可以參考下。2017-12-12javascript判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS的方法
這篇文章主要介紹了javascript判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS的方法,涉及移動(dòng)端設(shè)備的判斷及動(dòng)態(tài)加載技巧,需要的朋友可以參考下2015-02-02