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 学习入门篇附实例代码
Mar 16 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vue动态设置页面title的方法实例
Aug 23 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在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
yii操作session实例简介
2014/07/31 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python访问系统环境变量的方法
2015/04/29 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
快速了解Python中的装饰器
2018/01/11 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
python excel多行合并的方法
2020/12/09 Python
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
工厂门卫岗位职责
2013/11/25 职场文书
小学生演讲稿
2014/01/12 职场文书
小学教师师德感言
2014/02/10 职场文书
幼儿园家长寄语
2014/04/02 职场文书
运动会横幅标语
2014/06/17 职场文书
人事局接收函
2015/01/30 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
阿里云日志过滤器配置日志服务
2022/04/09 Servers