DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript將數值轉換為金額格式(分隔千分位和自動增加小數點)
Javascript將數值轉換為金額格式(分隔千分位和自動增加小數點)
編輯:關於JavaScript     

在項目裡碰到需要把類似'450000'的數字轉換為會計記賬所用的格式,'450,000.00',分隔千分位和小數點後不夠兩位數時自動補齊,已下記錄幾種實現的方式

ps:如果不考慮後面的小數點,最快捷的方法:

"12345678".replace(/[0-9]+?(?=(?:([0-9]{3}))+$)/g,function(a){return a+','}); //輸出 12 345 678

1.用循環的方式實現

function formatNum(str){
 var newStr = "";
 var count = 0;

 if(str.indexOf(".")==-1){
  for(var i=str.length-1;i>=0;i--){
   if(count % 3 == 0 && count != 0){
    newStr = str.charAt(i) + "," + newStr;
   }else{
    newStr = str.charAt(i) + newStr;
   }
   count++;
  }
  str = newStr + ".00"; //自動補小數點後兩位
  console.log(str)
 }
 else
 {
  for(var i = str.indexOf(".")-1;i>=0;i--){
   if(count % 3 == 0 && count != 0){
    newStr = str.charAt(i) + "," + newStr; //碰到3的倍數則加上“,”號
   }else{
    newStr = str.charAt(i) + newStr; //逐個字符相接起來
   }
   count++;
  }
  str = newStr + (str + "00").substr((str + "00").indexOf("."),3);
  console.log(str)
 }
}

formatNum('13213.24'); //輸出13,213.34
formatNum('132134.2'); //輸出132,134.20
formatNum('132134'); //輸出132,134.00
formatNum('132134.236'); //輸出132,134.236

2.使用正則(比較不足的是還是得自己去判斷小數點後面的位數,有更智能的正則請通知我~)

function regexNum(str){
 var regex = /(\d)(?=(\d\d\d)+(?!\d))/g;

 if(str.indexOf(".") == -1){

  str= str.replace(regex,',') + '.00';
  console.log(str)

 }else{
  var newStr = str.split('.');
  var str_2 = newStr[0].replace(regex,',');

  if(newStr[1].length <= 1){ 
   //小數點後只有一位時
   str_2 = str_2 + '.' + newStr[1] +'0';
   console.log(str_2)

  }else if(newStr[1].length > 1){ 
   //小數點後兩位以上時
   var decimals = newStr[1].substr(0,2);
   var srt_3 = str_2 + '.' + decimals;
   console.log(srt_3)
  }
 }
};
regexNum('23424224'); //輸出2,42,224.00 
regexNum('23424224.2'); //輸出2,42,224.20
regexNum('23424224.22'); //輸出2,42,224.22
regexNum('23424224.233'); //輸出2,42,224.23 

以上就是本文的全部內容,了解更多JavaScript的語法,大家可以查看:《JavaScript 參考教程》、《JavaScript代碼風格指南》,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved