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_10_对象模型
Oct 16 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 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
GD输出汉字的函数的分析
2006/10/09 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python决策树之CART分类回归树详解
2017/12/20 Python
python机器学习之随机森林(七)
2018/03/26 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
有关Python的22个编程技巧
2018/08/29 Python
Python hmac模块使用实例解析
2019/12/24 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
flask项目集成swagger的方法
2020/12/09 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
英文求职信结束语大全
2013/10/26 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
工作说明书格式
2014/07/29 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL