js千分位實(shí)現(xiàn)方法大匯總
千分位實(shí)現(xiàn)匯總
1.最最便捷的實(shí)現(xiàn)方式:toLocaleString()
注:只針對數(shù)字格式有效!
let num = 1234567890; num.toLocaleString(); //"1,234,567,890"
2.正則匹配
// 正則匹配方法一 let num = 1234567890; let reg = /\d{1,3}(?=(\d{3})+$)/g; String(num).replace(reg, '$&,'); //"1,234,567,890" // 正則匹配方法二 let num = 1234567890; let reg = /\B(?=(\d{3})+$)/g; String(num).replace(reg, ','); //"1,234,567,890" 說明:如果想知道具體怎樣的分組方式,可在 [https://regexper.com/](https://regexper.com/) 上測試 1. ?= 表示正向引用 2. $& 表示與正則表達(dá)式相匹配的內(nèi)容,可查看replace() 3. \B 非單詞邊界
3.for循環(huán)
// for循環(huán)方法一 function format(num){ ? ? num = String(num);//數(shù)字轉(zhuǎn)字符串 ? ? let str = '';//字符串累加 ? ? for (let i = num.length- 1, j = 1; i >= 0; i--, j++){ ? ? ? ? if (j%3 == 0 && i != 0){ //每隔三位加逗號(hào),過濾正好在第一個(gè)數(shù)字的情況 ? ? ? ? ? ? str += num[i] + ','; //加千分位逗號(hào) ? ? ? ? ? ? continue; ? ? ? ? } ? ? ? ? str += num[i]; //倒著累加數(shù)字 ? } ? ? return str.split('').reverse().join(""); //字符串=>數(shù)組=>反轉(zhuǎn)=>字符串 ? }? let num = 1234567890; format(num); //"1,234,567,890" // for循環(huán)方法二 function format(num){ ? ? num = String(num);//數(shù)字轉(zhuǎn)字符串 ? let str = '';//字符串累加 ? for (let i = num.length- 1, j = 1; i >= 0; i--, j++){ ? ? ? ? if (j%3 == 0 && i != 0){ //每隔三位加逗號(hào),過濾正好在第一個(gè)數(shù)字的情況 ? ? ? ? ? str = ',' + num[i] + str; //加千分位逗號(hào) ?? ??? ? continue;? ? ? ? } ? ? ? ? str = num[i] + str; //累加數(shù)字 ? } ? ? return str; } let num = 1234567890;? format(num); //"1,234,567,890"
4.slice+while循環(huán)
function format(num) { ? let arr = [], ? ? ? str = String(num), ? ? ? count = str.length; ? while (count >= 3) { ? ? arr.unshift(str.slice(count - 3, count)); ? ? count -= 3; ? } ? // 如果是不是3的倍數(shù)就另外追加到上去 ? if(str.length % 3) arr.unshift(str.slice(0, str.length % 3)); ? return arr.toString(); } let num = 1234567890;? format(num); //"1,234,567,890"
5.reduce
function format(num) { ? var str = num+''; ? return str.split("").reverse().reduce((prev, next, index) => { ? ? return ((index % 3) ? next : (next + ',')) + prev; ? }) } let num = 1234567890;? format(num); //"1,234,567,890"
當(dāng)然也存在很多類似的寫法,不一一列舉了~
千分位分隔符
方法一
沒有小數(shù)位時(shí)
formatMoney(num) { ? ? let reg=/\d{1,3}(?=(\d{3})+$)/g; ?? ? return (num + '').replace(reg, '$&,'); ? }
方法二
有小數(shù)位時(shí)
formatThousand(money) { ? ? let res = money.toString().replace(/\d+/, function(num){ // 先提取整數(shù)部分 ? ? return num.replace(/(\d)(?=(\d{3})+$)/g, function($1){ ? ? ? return $1+","; ? ? }); ? }) ? return res; },
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 三種方法實(shí)現(xiàn)獲得和設(shè)置以及移除元素屬性
獲得和設(shè)置以及移除元素屬性在操作dom的過程中會(huì)經(jīng)常遇到吧,為了提高工作的效率本文整理了一些快捷操作方法和大家一起分享,感興趣的朋友可以參考下哈2013-03-03頁面中實(shí)現(xiàn)setInterval和setTimeout效果示例詳解
這篇文章主要為大家介紹了不使用setTimeout和setInterval在頁面中實(shí)現(xiàn)setInterval和setTimeout效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09WebSocket的通信過程與實(shí)現(xiàn)方法詳解
這篇文章主要給大家愛介紹了關(guān)于WebSocket的通信過程與實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧2018-04-04JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實(shí)例形式較為詳細(xì)的分析了showModalDialog常見用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03實(shí)現(xiàn)高性能javascript的注意事項(xiàng)
JavaScript代碼在web應(yīng)用程序中經(jīng)常用到,但是很多開發(fā)者忽視了一些性能方面的知識(shí),如何編寫高性能javascript代碼呢?接下來,小編跟大家一起學(xué)習(xí)2019-05-05bootstrap實(shí)現(xiàn)彈窗和拖動(dòng)效果
這篇文章主要介紹了bootstrap實(shí)現(xiàn)彈窗和拖動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2016-01-01javascript輕松實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時(shí)已彈出子菜單自動(dòng)消失
本文為大家詳細(xì)介紹下使用javascript實(shí)現(xiàn)當(dāng)鼠標(biāo)移開時(shí)已彈出子菜單自動(dòng)消失,具體如下,感興趣的朋友不要錯(cuò)過2013-12-12使用 Node.js 做 Function Test實(shí)現(xiàn)方法
這篇文章介紹了Node.js 做 Function Test實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-10-10