javascript实现将数字转成千分位的方法小结【5种方式】


Posted in Javascript onDecember 11, 2016

本文实例讲述了javascript实现将数字转成千分位的方法。分享给大家供大家参考,具体如下:

javascript实现将数字转成千分位的方法小结【5种方式】

尽管离过年还有两个月之久,春运抢票的战斗已经打响了,悲剧的是我还没抢到票,看到某浏览器上的数字时,想到一个经典面试题,没错,就是数字转千分位。如将数字87463297转成87,463,297,方法有很多种,我这里只想到5种。

1、利用正则的零宽度正预测先行断言(?=exp),名字有点难记,意思是它断言自身出现的位置的后面能匹配表达式exp,对此概念还不明白的可以戳这里,这里不做过多解释。数字千分位的特点是,第一个逗号后面数字的个数是3的倍数,正则:/(\d{3})+$/;第一个逗号前最多可以有1至3个数字,正则:/\d{1,3}/。加起来就是/\d{1,3}(\d{3})+$/,分隔符要从前往后加,就要将前面的数字“87”替换成“87,”,为什么是87不是874?因为874后面只剩下5位数字,在632后加一个分隔符后,将只剩下97,不符合千分位要求,所以第一个分隔符后面的数字位数必须是3的倍数。要匹配数字87,又要保证87后面数字位数是3的倍数,并且要将匹配的87替换成“87,”,就要用到(?=exp),这里先定义一个变量var str = "87463297";

// 零宽断言
console.info( str.replace(/\d{1,3}(?=(\d{3})+$)/g,function(s){
  return s+','
}) )

2、利用正则的子项来替换,跟第1种方法类似。

// 子项
console.info( str.replace(/(\d{1,3})(?=(\d{3})+$)/g,function($1){
  return $1=$1+','
}) )

3、先将字符串转成数组,利用reverse反转数组后每3个数字后添加一个分隔符“,”,到字符串末尾除外,之后转回字符串。

// 利用字符串和数组方法
console.info( str.split("").reverse().join("").replace(/(\d{3})+?/g,function(s){
  return s+",";
}).replace(/,$/,"").split("").reverse().join("") )

4、利用while循环拼接字符串每隔3个数字加一个分隔符,首尾不加

// 利用循环拼接字符串每隔3个加一个分隔符
var result="",
  index = 0,
  len = str.length-1;
while(len>=0) {
  index%3===0&&index!==0 ? result+=","+str[len] : result+=str[len];
  len--;
  index++;
};
result=result.split("").reverse().join("");
console.info(result);

5、利用while循环在数组里push分隔符,首尾不加

// 利用while循环在数组里push分隔符
var result="",
  index = 0,
  len = str.length,
  i = len-1,
  arr = str.split("");
while(len-index>0){
  len>=index&&len-index!==len && arr.splice(len-index,0,",");
  index+=3;
  i-=4;
};
console.log(arr.join(""));

结语:第1种方法是最简洁的,性能也是最好的,推荐使用。顺便附上所有例子的demo源码下载,如果还有其它更好更方便的方法请告诉我,谢谢!

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 #Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 #Javascript
AngularJS过滤器filter用法分析
Dec 11 #Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 #Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 #Javascript
利用JS判断鼠标移入元素的方向
Dec 11 #Javascript
实现JavaScript高性能的数据存储
Dec 11 #Javascript
You might like
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php异常处理捕获错误整理
2019/09/23 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python理解递归的方法总结
2019/01/28 Python
python读写csv文件方法详细总结
2019/07/05 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
酒店员工检讨书
2014/02/18 职场文书
护士节策划方案
2014/05/19 职场文书
企业承诺书格式
2014/05/21 职场文书
教师年终个人总结
2015/02/11 职场文书
讲文明倡议书
2015/04/29 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
python实现商品进销存管理系统
2022/05/30 Python