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 相关文章推荐
GRID拖拽行的实例代码
Jul 18 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
解读Vue组件注册方式
May 15 Vue.js
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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python中顺序表的实现简单代码分享
2018/01/09 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
什么是网络协议
2016/04/07 面试题
教师岗位职责
2013/11/17 职场文书
搞笑创意广告语
2014/03/17 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
中学图书馆工作总结
2015/08/11 职场文书
2019 入党申请书范文
2019/07/10 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
七年级作文之游记
2019/12/11 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
golang中的struct操作
2021/11/11 Golang
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Elasticsearch 索引操作和增删改查
2022/04/19 Python