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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
Javascript实现字数统计
Jul 03 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 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数据库备份还原类分享
2014/03/20 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
JS改变页面颜色源码分享
2018/02/24 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python3抓取中文网页的方法
2015/07/28 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
宣传保护环境的公益广告词
2014/03/13 职场文书
环保倡议书500字
2014/05/15 职场文书
社区娱乐活动方案
2014/08/21 职场文书
工程安全生产协议书
2014/11/21 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
社区党建工作总结2015
2015/05/13 职场文书
高老头读书笔记
2015/06/30 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
python模板入门教程之flask Jinja
2022/04/11 Python