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每次Title显示不同的名言
Sep 25 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
ant design实现圈选功能
Dec 17 Javascript
canvas实现贪食蛇的实践
Feb 15 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正则提取或替换img标记属性
2013/06/26 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
PHP实现的购物车类实例
2015/06/17 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
Javascript 解疑
2009/11/11 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
bootstrap table表格客户端分页实例
2017/08/07 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python操作Word批量生成文章的方法
2015/07/28 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
linux面试题参考答案(9)
2015/01/07 面试题
无故旷工检讨书
2014/01/26 职场文书
财务部绩效考核方案
2014/05/04 职场文书
派出所所长先进事迹
2014/05/19 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
机械专业求职信
2014/05/25 职场文书
幼儿发展评估方案
2014/06/11 职场文书
见习报告格式范文
2014/11/08 职场文书
2014年平安夜寄语
2014/12/08 职场文书
毕业生党员个人总结
2015/02/14 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers