DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS數字千分位格式化實現方法總結
JS數字千分位格式化實現方法總結
編輯:關於JavaScript     

本文實例講述了JS數字千分位格式化實現方法。分享給大家供大家參考,具體如下:

用js實現如下功能,將給定的數字轉化成千分位的格式,如把“10000”轉化成“10,000”,並考慮到性能方面的因素。

一.首先想到的辦法,將數字轉換為字符串(toString())再打散成數組(split),如果直接數字轉換為數組,就是一整個放進去了,不能單獨取到每一位。然後通過循環,逐個倒著把數組中的元素插入到新數組的開頭(unshift),第三次或三的倍數次,插入逗號,最後把新數組拼接成一個字符串

n=1233456;
toQfw(n);
function toQfw(){
  var arr_n=n.toString().split("");
  var result=[];
  var cs=0;
  for(var i=arr_n.length-1;i>=0;i--){
    cs++;
    result.unshift(arr_n[i]);
    if(!(cs%3)&&i!=0){ //i!=0即取到第1位的時候,前面不用加逗號
        result.unshift(",");
    }
    alert(result.join(""))
  }
};

缺點,一位一位的加進去,性能差,且還要先轉換成字符串再轉換成數組

二.於是想到能不能從頭到尾都用字符串完成,不通過數組,即用charAt()獲取子字符串,主要用到字符串拼接

n=1233456;
toQfw(n);
function toQfw(){
  var str_n=n.toString();
  var result="";
  var cs=0;
  for(var i=str_n.length-1;i>=0;i--){
    cs++;
    result=str_n.charAt(i)+result;
    if(!(cs%3)&&i!=0){
        result=","+result;
    }
    alert(result)
  }
};

缺點:依然是一位一位加進去

三.可不可以不用循環用純字符串方法來實現,這樣就不會一位一位加進去了。每次取末三位子字符串放到一個新的空字符串裡並拼接上之前的末三位,原本數組不斷截掉後三位直到長度小於三個,最後把剝完的原數組拼接上新的不斷被填充的數組

n=1233456;
toQfw(n);
function toQfw(){
  var str_n=n.toString();
  var result="";
  while(str_n.length>3){
    result=","+str_n.slice(-3)+result;
    str_n=str_n.slice(0,str_n.length-3)
  }
  if(str_n){
    alert(str_n+result)
  }
};

性能最佳

四.用正則表達式,去最後三位數字,和字符串匹配,匹配成功就把後三位存起來,前面加逗號,然後將原字符串的值更新為匹配成功剩下的左邊,直到正則與字符串匹配成功後三位的值和原字符串更新值相等時,說明取完了

n=1233456;
toQfw(n);
function toQfw(){
  var str_n=n.toString();
  var result="";
  var re=/\d{3}$/;
  while(re.test(str_n)){
    result=RegExp.lastMatch+result;
    if(str_n!=RegExp.lastMatch){
      result=","+result;
      str_n=RegExp.leftContext; //匹配成功,返回匹配內容左側的字符信息
    }
    else{
      num="";
    }
  }
  if(str_n){
    alert(str_n+result);
  }
}

五.簡化版正則,用前向聲明和非前向聲明,從後往前匹配3位數字,前向聲明的地方替換成逗號,但是如果剛好3的倍數位,會第一位前面也加,所以前面要再來個非前向聲明

var str="123598752";
var re=/(?=(?!(\b))(\d{3})+$)/g;
str=str.replace(re,",");
alert(str);

更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript數學運算用法總結》、《JavaScript數組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

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