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中使用ajax获取远程页面信息
Nov 13 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JS实现日期加减的方法
Nov 29 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
mustache.js实现首页元件动态渲染的示例代码
Dec 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 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
Yii配置文件用法详解
2014/12/04 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
wxPython实现文本框基础组件
2019/11/18 Python
python实现飞机大战项目
2020/03/11 Python
python怎么提高计算速度
2020/06/11 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
中学生寄语大全
2014/04/03 职场文书
美食节策划方案
2014/05/26 职场文书
计生个人工作总结
2015/02/28 职场文书
python 爬取华为应用市场评论
2021/05/29 Python