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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
javascript常用对话框小集
Sep 13 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
create-react-app中添加less支持的实现
Nov 15 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独立Session数据库存储操作类分享
2014/06/11 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
小程序实现留言板
2018/11/02 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
Django静态文件加载失败解决方案
2020/08/26 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
六十大寿答谢词
2014/01/12 职场文书
家具促销活动方案
2014/02/16 职场文书
初三开学计划书
2014/04/27 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
SQL中的三种去重方法小结
2021/11/01 SQL Server