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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
AngularJS基础知识
Dec 21 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
详解javascript函数写法大全
Mar 25 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
vue如何使用async、await实现同步请求
Dec 09 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
Yii配置文件用法详解
2014/12/04 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
CentOS6.5设置Django开发环境
2016/10/13 Python
python获取交互式ssh shell的方法
2019/02/14 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
weblogic面试题
2016/03/07 面试题
业务经理的岗位职责
2013/11/16 职场文书
家长寄语大全
2014/04/02 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
四查四看整改措施
2014/09/19 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL