JavaScript實現(xiàn)千位分隔符

將普通的數(shù)字轉(zhuǎn)換為帶千位分隔符格式的數(shù)字字符串是一個非常常見的問題,千位分隔符格式的規(guī)則是數(shù)字的整數(shù)部分每三位一組粟害,以“掉房,”分節(jié)茧跋。小數(shù)部分不分節(jié)
示例:19,351,235.235767
這里有幾個常見的實現(xiàn)方法卓囚。

1.方法一

實現(xiàn)思路是將數(shù)字轉(zhuǎn)換為字符數(shù)組瘾杭,再循環(huán)整個數(shù)組, 每三位添加一個分隔逗號哪亿,最后再合并成字符串粥烁。因為分隔符在順序上是從后往前添加的:比如 1234567添加后是1,234,567 而不是 123,456,7 ,所以方便起見可以先把數(shù)組倒序锣夹,添加完之后再倒序回來页徐,就是正常的順序了。要注意的是如果數(shù)字帶小數(shù)的話银萍,要把小數(shù)部分分開處理变勇。

function numFormat(num){
    num=num.toString().split(".");  // 分隔小數(shù)點
    var arr=num[0].split("").reverse();  // 轉(zhuǎn)換成字符數(shù)組并且倒序排列
    var res=[];
    for(var i=0,len=arr.length;i<len;i++){
      if(i%3===0&&i!==0){
         res.push(",");   // 添加分隔符
      }
      res.push(arr[i]);
    }
    res.reverse(); // 再次倒序成為正確的順序
    if(num[1]){  // 如果有小數(shù)的話添加小數(shù)部分
      res=res.join("").concat("."+num[1]);
    }else{
      res=res.join("");
    }
    return res;
}

var a=1234567894532;
var b=673439.4542;
console.log(numFormat(a)); // "1,234,567,894,532"
console.log(numFormat(b)); // "673,439.4542"

2.方法二

使用JS自帶的函數(shù) toLocaleString

語法: numObj.toLocaleString([locales [, options]])

toLocaleString() 方法返回這個數(shù)字在特定語言環(huán)境下的表示字符串。

var a=1234567894532;
var b=673439.4542;

console.log(a.toLocaleString());  // "1,234,567,894,532"
console.log(b.toLocaleString());  // "673,439.454"  (小數(shù)部分四舍五入了)

要注意的是這個函數(shù)在沒有指定區(qū)域的基本使用時,返回使用默認的語言環(huán)境和默認選項格式化的字符串搀绣,所以不同地區(qū)數(shù)字格式可能會有一定的差異飞袋。最好確保使用 locales 參數(shù)指定了使用的語言。
注:我測試的環(huán)境下小數(shù)部分會根據(jù)四舍五入只留下三位链患。

3. 方法三

使用正則表達式replace函數(shù)巧鸭,相對前兩種我更喜歡這種方法,雖然正則有點難以理解麻捻。

replace 語法:str.replace(regexp|substr, newSubStr|function)

其中第一個 RegExp
對象或者其字面量所匹配的內(nèi)容會被第二個參數(shù)的返回值替換纲仍。

function numFormat(num){
  var res=num.toString().replace(/\d+/, function(n){ // 先提取整數(shù)部分
       return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
          return $1+",";
        });
  })
  return res;
}

var a=1234567894532;
var b=673439.4542;
console.log(numFormat(a)); // "1,234,567,894,532"
console.log(numFormat(b)); // "673,439.4542"

參考閱讀:
1.正則表達式30分鐘入門教程
2.String.prototype.replace()

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市贸毕,隨后出現(xiàn)的幾起案子郑叠,更是在濱河造成了極大的恐慌,老刑警劉巖明棍,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件乡革,死亡現(xiàn)場離奇詭異,居然都是意外死亡摊腋,警方通過查閱死者的電腦和手機沸版,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來兴蒸,“玉大人视粮,你說我怎么就攤上這事±噙郑” “怎么了馒铃?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長痕惋。 經(jīng)常有香客問我,道長娃殖,這世上最難降的妖魔是什么值戳? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮炉爆,結(jié)果婚禮上堕虹,老公的妹妹穿的比我還像新娘。我一直安慰自己芬首,他們只是感情好赴捞,可當我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著郁稍,像睡著了一般赦政。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天恢着,我揣著相機與錄音桐愉,去河邊找鬼。 笑死掰派,一個胖子當著我的面吹牛从诲,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播靡羡,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼系洛,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了略步?” 一聲冷哼從身側(cè)響起描扯,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎纳像,沒想到半個月后荆烈,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡竟趾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年憔购,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岔帽。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡玫鸟,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出犀勒,到底是詐尸還是另有隱情屎飘,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布贾费,位于F島的核電站钦购,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏褂萧。R本人自食惡果不足惜押桃,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望导犹。 院中可真熱鬧唱凯,春花似錦、人聲如沸谎痢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽节猿。三九已至票从,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背纫骑。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工蝎亚, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人先馆。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓发框,卻偏偏與公主長得像,于是被迫代替她去往敵國和親煤墙。 傳聞我的和親對象是個殘疾皇子梅惯,可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容