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 Discuz代码中的msn聊天小功能
May 25 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
详解JS函数防抖
Jun 05 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
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python 的 with 语句详解
2014/06/13 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
大学同学聚会感言
2015/07/30 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
浅析Python中的套接字编程
2021/06/22 Python