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 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
javascript canvas实现雨滴效果
Jun 09 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
关于python写入文件自动换行的问题
2018/06/23 Python
keras之权重初始化方式
2020/05/21 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
电子商务专业个人的自我评价
2013/11/19 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
军训拉歌口号
2014/06/13 职场文书
团队拓展活动方案
2014/08/28 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书