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 相关文章推荐
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
javascript 闭包详解
Jul 02 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 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漏洞小结
2012/02/05 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
实例浅析js的this
2016/12/11 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
经营理念标语
2014/06/21 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL