js千分位实现方法大汇总

 更新时间:2022年04月11日 14:51:22   作者:朽木·露琪亚  
这篇文章主要介绍了js千分位实现方法大汇总,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

千分位实现汇总

1.最最便捷的实现方式:toLocaleString()

注:只针对数字格式有效!

let num = 1234567890;
num.toLocaleString(); //"1,234,567,890"

2.正则匹配

// 正则匹配方法一
let num = 1234567890;
let reg = /\d{1,3}(?=(\d{3})+$)/g;   
String(num).replace(reg, '$&,'); //"1,234,567,890"
// 正则匹配方法二
let num = 1234567890;
let reg = /\B(?=(\d{3})+$)/g;   
String(num).replace(reg, ','); //"1,234,567,890"
说明:如果想知道具体怎样的分组方式,可在 [https://regexper.com/](https://regexper.com/) 上测试
1. ?= 表示正向引用
2. $& 表示与正则表达式相匹配的内容,可查看replace()
3. \B 非单词边界

3.for循环

// for循环方法一
function format(num){  
  num = String(num);//数字转字符串  
  let str = '';//字符串累加  
  for (let i = num.length- 1, j = 1; i >= 0; i--, j++){  
      if (j%3 == 0 && i != 0){ //每隔三位加逗号,过滤正好在第一个数字的情况  
          str += num[i] + ','; //加千分位逗号  
          continue;  
      }  
      str += num[i]; //倒着累加数字
  }  
  return str.split('').reverse().join(""); //字符串=>数组=>反转=>字符串  
} 
let num = 1234567890;
format(num); //"1,234,567,890"
// for循环方法二
function format(num){  
  num = String(num);//数字转字符串
  let str = '';//字符串累加
  for (let i = num.length- 1, j = 1; i >= 0; i--, j++){  
      if (j%3 == 0 && i != 0){ //每隔三位加逗号,过滤正好在第一个数字的情况
          str = ',' + num[i] + str; //加千分位逗号
         continue; 
      }  
      str = num[i] + str; //累加数字
  }  
  return str;
}
let num = 1234567890; 
format(num); //"1,234,567,890"

4.slice+while循环

function format(num) {
  let arr = [],
      str = String(num),
      count = str.length;
  while (count >= 3) {
    arr.unshift(str.slice(count - 3, count));
    count -= 3;
  }
  // 如果是不是3的倍数就另外追加到上去
  if(str.length % 3) arr.unshift(str.slice(0, str.length % 3));
  return arr.toString();
}
let num = 1234567890; 
format(num); //"1,234,567,890"

5.reduce

function format(num) {
  var str = num+'';
  return str.split("").reverse().reduce((prev, next, index) => {
    return ((index % 3) ? next : (next + ',')) + prev;
  })
}
let num = 1234567890; 
format(num); //"1,234,567,890"

当然也存在很多类似的写法,不一一列举了~ 

千分位分隔符

方法一

没有小数位时

formatMoney(num) {  
  let reg=/\d{1,3}(?=(\d{3})+$)/g;   
  return (num + '').replace(reg, '$&,');  
}

方法二

有小数位时

formatThousand(money) {  
  let res = money.toString().replace(/\d+/, function(num){ // 先提取整数部分
    return num.replace(/(\d)(?=(\d{3})+$)/g, function($1){
      return $1+",";
    });
  })
  return res;
},

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 前端冒泡排序算法详解及实战案例

    前端冒泡排序算法详解及实战案例

    这篇文章主要介绍了前端冒泡排序算法的相关资料,冒泡排序是一种简单的排序算法,通过比较相邻元素并交换位置,实现元素排序,该算法的时间复杂度为O(n^2),空间复杂度为O(1),具有稳定性,适用于小规模数据集和对稳定性要求高的场景,需要的朋友可以参考下
    2024-10-10
  • JS实现全屏预览F11功能的示例代码

    JS实现全屏预览F11功能的示例代码

    这篇文章主要介绍了JS实现全屏预览F11功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • js获取某元素的class里面的css属性值代码

    js获取某元素的class里面的css属性值代码

    这篇文章主要介绍了js获取某元素的class里面的css属性值代码,有需要的朋友可以参考一下
    2014-01-01
  • JS获取checkbox的个数简单实例

    JS获取checkbox的个数简单实例

    下面小编就为大家带来一篇JS获取checkbox的个数简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js下拉菜单生成器dropMenu使用方法详解

    js下拉菜单生成器dropMenu使用方法详解

    这篇文章主要介绍了js下拉菜单生成器dropMenu的使用方法 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript 字符串处理函数使用小结

    JavaScript 字符串处理函数使用小结

    JavaScript 字符串处理函数使用小结,学习js的朋友可以参考下。
    2010-12-12
  • JavaScript本地存储的几种方式小结

    JavaScript本地存储的几种方式小结

    在 JavaScript 中,本地存储指的是将数据保存在用户的浏览器中,能够在页面刷新或关闭后仍然保留,本文给大家介绍了本地存储的几种方式,每种存储方式的特点、区别及应用场景,需要的朋友可以参考下
    2024-12-12
  • 小程序开发实现access_token统一管理

    小程序开发实现access_token统一管理

    本文主要介绍了小程序开发实现access_token统一管理,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • 使用Threejs加载外部glb文件

    使用Threejs加载外部glb文件

    这篇文章主要介绍了使用Threejs加载外部glb文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Javascript数组的 forEach 方法详细介绍

    Javascript数组的 forEach 方法详细介绍

    这篇文章主要介绍了Javascript数组的forEach方法详细介绍,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09

最新评论