千位分隔符的完整攻略
千位分隔符[1]是很常見的需求,但是輸入文本千變萬化,如何才能準確添加千分符呢?
純整數情況
純整數大概是所有情況里最簡單的一種,我們只要正確匹配出千分位就好了。
觀察上面的數字,我們可以得出千分位的特征是到字符串終止位有 3n 個數字,不包括起始位。于是可以得到這樣的函數:
let milliFormat = (num) => { return num && num.toString().replace(/(?=(?!^)(\d{3})+$)/g, ',') }但是往往現實沒有那么樂觀:
小數的情況
遇到小數時,我們的希望只針對整數部分添加千分符,這時問題就變得稍稍有些棘手了。
如果正則引擎支持逆序環視[2],我們可以這樣構造正則表達式:
(?<=^\d+)(?=(\d{3})+\b)但是多數語言并不支持逆序環視,所以我們要變通一下:
1. 拿到小數的整數部分
也就是起始位到小數點(非數字)之間的部分,可以這樣實現:
^\d+2. 為整數部分添加千分符
這一步可以利用我們之前的實現,整合在一起如下:
let milliFormat = (num) => { return num && num.toString() .replace(/^\d+/g, (m) => m.replace(/(?=(?!^)(\d{3})+$)/g, ',')) }這個函數對整、小數都能正確處理:
但在實際中,我們還可能傳入一個整、小數混合的字符串:
整、小數混合字符串
這時我們就不能繼續用字符串起終點?^$?來判定邊界了,如果改成單詞邊界?\b?會發生什么呢:
哦不!連小數部分也被添上千分符了!怎樣才能避開小數部分?
重新審視我們捕獲整數部分所用到的正則:
\b\d+\b?的界定是?(?<!\w)(?=\w)|(?<=\w)(?!\w)[3],所以小數點也被視為單詞邊界了!所以我們不應該用單詞邊界作為界定條件,重新看剛才的字符串?'12345678 1234.5678',可以發現整數部分的起始點都有一個特征:要么位于字符串起點,要么跟在空白符后。基于這點我們修改捕獲整數部分的正則如下:
(^|\s)\d+咦,多出來一個空白符?別著急,看看我們用來匹配千分位的正則:
(?=(?!^)(\d{3})+$)判斷條件是非起點、到結尾有 3n 個數字的位置,現在為了去掉這多出來的一個空格,我們應將起始條件改成單詞邊界:
(?=(?!\b)(\d{3})+$)完整函數如下:
let milliFormat = (input) => { return input && input.toString() .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ',')) }酷炫!我們已經能自如應付各種數值的混合了!這時耳邊幽幽飄來產品經理的聲音:如果我傳入含有非數字的字符串呢……
復雜字符串
在上一個例子中,我們只判斷了起始邊界,于是?1234ww?中的數字部分也會被捕獲。為了解決這個問題,我們要加上終止界定。來看看整、小數成立的條件:
字符串中僅包含有數字 0-9 或小數點
依據這個我們可以這樣做:
(^|\s)\d+(?=\.?\d*($|\s))這個正則表示匹配目標應以字符串起始位或空白符開始,緊接著是數字,數字的右邊只允許繼續是數字或者一個小數點、直到字符串結尾或下一個空格處。來看看它的匹配效果:
好樣的!我們已經能精確匹配出正確的部分了!繼續用之前的千分位模式封裝:
let milliFormat = (() => { const DIGIT_PATTERN = /(^|\s)\d+(?=\.?\d*($|\s))/g const MILLI_PATTERN = /(?=(?!\b)(\d{3})+$)/g return (input) => input && input.toString() .replace(DIGIT_PATTERN, (m) => m.replace(MILLI_PATTERN, ',')) })()酷炫!全部都正確處理了!
復雜的現實世界
但是!這還遠遠不夠!我們看這樣一個字符串:
'1234 1234.56 $1234 $-1234 $-1234.56e+7 123...e3'容我先去買一根上吊繩……
轉載于:https://www.cnblogs.com/alantao/p/9374021.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的千位分隔符的完整攻略的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【TensorFlow】——实现mini
- 下一篇: 微信小程序文件大小限制