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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
vue项目实战总结篇
Feb 11 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
JsRender实用入门教程
2014/10/31 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
自学python的建议和周期预算
2019/01/30 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
眼镜促销方案
2014/03/15 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
老员工辞职信范文
2015/05/12 职场文书
七一表彰大会简报
2015/07/20 职场文书