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 相关文章推荐
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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正则preg_replace_callback函数用法实例
2015/06/01 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP中Array相关函数简介
2016/07/03 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
python脚本内运行linux命令的方法
2015/07/02 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
详解Python正则表达式re模块
2019/03/19 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python 如何停止一个死循环的线程
2020/11/24 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
预备党员综合考察材料
2014/05/31 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
小程序实现侧滑删除功能
2022/06/25 Javascript