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 相关文章推荐
学习jquery之一
Apr 27 Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
从vue源码看props的用法
2019/01/09 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
AUC计算方法与Python实现代码
2020/02/28 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
经典c++面试题五
2014/12/17 面试题
飞机制造技术专业求职信
2014/07/27 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
教务处干事工作总结
2015/08/14 职场文书
新员工入职感言范文!
2019/07/04 职场文书