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 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
JS实现九宫格拼图游戏
Jun 28 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实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
python定时器使用示例分享
2014/02/16 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
pyqt5实现登录界面的模板
2020/05/30 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python对文件的操作方法汇总
2020/02/28 Python
Python如何实现远程方法调用
2020/08/07 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
老人祝寿主持词
2014/03/28 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript