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在textarea光标处插入文本的小例子
Mar 22 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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 正则表达式小结
2009/08/31 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
splice slice区别
2006/10/09 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
[17:36]VG战队纪录片
2014/08/21 DOTA
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Django框架模板介绍
2019/01/15 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
python爬取天气数据的实例详解
2020/11/20 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
年度考核自我评价
2014/01/25 职场文书
论文指导教师评语
2014/04/28 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
秋冬农业生产标语
2014/10/09 职场文书
诉讼授权委托书
2014/10/15 职场文书
部门2014年度工作总结
2014/11/12 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python