javascript实现将数字转成千分位的方法小结【5种方式】

 更新时间:2016年12月11日 12:07:40   作者:wangmeijian  
这篇文章主要介绍了javascript实现将数字转成千分位的方法,结合实例形式分析了5种常用的数字转换的常用方法,涉及字符串与正则操作的相关技巧,需要的朋友可以参考下

本文实例讲述了javascript实现将数字转成千分位的方法。分享给大家供大家参考,具体如下:

尽管离过年还有两个月之久,春运抢票的战斗已经打响了,悲剧的是我还没抢到票,看到某浏览器上的数字时,想到一个经典面试题,没错,就是数字转千分位。如将数字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中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript遍历算法与技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • javascript设置页面背景色及背景图片的方法

    javascript设置页面背景色及背景图片的方法

    这篇文章主要介绍了javascript设置页面背景色及背景图片的方法,涉及JavaScript动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2015-12-12
  • 微信小程序使用radio显示单选项功能【附源码下载】

    微信小程序使用radio显示单选项功能【附源码下载】

    这篇文章主要介绍了微信小程序使用radio显示单选项功能,涉及针对radio组件事件响应相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • JSONObject与JSONArray使用方法解析

    JSONObject与JSONArray使用方法解析

    这篇文章主要介绍了JSONObject与JSONArray使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • WebGL 多重纹理的使用介绍

    WebGL 多重纹理的使用介绍

    这篇文章主要为大家介绍了WebGL 多重纹理的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • JS实现弹出下载对话框及常见文件类型的下载

    JS实现弹出下载对话框及常见文件类型的下载

    JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能
    2017-07-07
  • js实现无缝滚动特效

    js实现无缝滚动特效

    这篇文章主要介绍了js实现无缝滚动特效,结合已学知识进行扩展性练习,感兴趣的朋友可以参考一下
    2015-12-12
  • JS表的模拟方法

    JS表的模拟方法

    这篇文章主要介绍了JS表的模拟方法,涉及javascript模拟表的生成、添加与删除节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 原生JS实现圆环拖拽效果

    原生JS实现圆环拖拽效果

    这篇文章主要为大家详细介绍了原生JS写一个环形的鼠标滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • VSCode中如何利用d.ts文件进行js智能提示

    VSCode中如何利用d.ts文件进行js智能提示

    这篇文章主要给大家介绍了关于VSCode中如何利用d.ts文件进行js智能提示的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2018-04-04
  • 小程序实现多列选择器

    小程序实现多列选择器

    这篇文章主要为大家详细介绍了小程序实现多列选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02

最新评论