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 闭包深入理解(closure)
May 27 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
详解javascript void(0)
Jul 13 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 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
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
git进行版本控制心得详谈
2017/12/10 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python 实现两个线程交替执行
2020/05/02 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
怎样声明子类
2013/07/02 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
十月份红领巾广播稿
2014/01/22 职场文书
学习张林森心得体会
2014/09/10 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
先进教师个人总结
2015/02/11 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
初中生物教学随笔
2015/08/15 职场文书
创业计划书之校园超市
2019/09/12 职场文书