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 相关文章推荐
简单实用的js调试logger组件实现代码
Nov 20 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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中strtotime函数使用方法详解
2011/11/27 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
js多个物体运动功能实例分析
2016/12/20 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
js实现select下拉框选择
2020/01/11 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python 基础知识之字符串处理
2017/01/06 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python实现无边框进度条的实例代码
2020/12/30 Python
几个SQL的面试题
2014/03/08 面试题
高中考试作弊检讨书
2014/01/14 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
教育实习指导教师评语
2014/12/31 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python