JS数字千分位格式化实现方法总结


Posted in Javascript onDecember 16, 2016

本文实例讲述了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中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
vue实现户籍管理系统
May 29 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
jquery插件锦集【推荐】
Dec 16 #Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 #Javascript
JS实现字符串转驼峰格式的方法
Dec 16 #Javascript
详解js数组的完全随机排列算法
Dec 16 #Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 #Javascript
基于Vue如何封装分页组件
Dec 16 #Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 #Javascript
You might like
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php中的数组操作函数整理
2008/08/18 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
javascript 闭包
2011/09/15 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
JavaScript函数详解
2014/11/17 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
python回调函数用法实例分析
2015/05/09 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
校园创业策划书
2014/01/14 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
毕业大学生自荐信
2014/06/17 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
铅球加油稿100字
2014/09/26 职场文书
学生个人评语大全
2015/01/04 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
红高粱观后感
2015/06/10 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers