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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 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合并js请求的例子
2013/11/01 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
vue中监听返回键问题
2019/08/28 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
人力资源部经理岗位职责规定
2014/02/23 职场文书
实习单位鉴定评语
2014/04/26 职场文书
催款函范文
2015/06/24 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
golang操作rocketmq的示例代码
2022/04/06 Golang
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers