js 实现千分位

hzxOnlineOk

已于 2022-08-05 17:17:20 修改

阅读量7.6k

点赞数 7

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2022-08-05 17:12:15 首次发布

本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/126181461

版权

javascript 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

本文介绍了三种对数值进行千分位、万分位分隔的方法，包括使用正则表达式、JavaScript数组方法以及内置的toLocaleString方法。toLocaleString方法尤其强大，不仅可以处理千分位、万分位，还能处理货币格式、百分比格式，并且在各大浏览器中具有良好的兼容性。此外，还提到了toLocaleString方法在Array、Object、Date等类型上的应用。

摘要由CSDN通过智能技术生成

如何对一大串数值进行千分位、万分位等方式分隔，使用户阅读更加便利，以下介绍3种方法

方法一：使用正则

function regexHandleNum(num) {
  return String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 3是千分位，4是万分位
}

方法二：使用js自带的数组方法进行处理千分位

function handleNum(num) {
  return String(num)
    .split('')
    .reverse()
    .reduce((prev, next, index) => {
      return (index % 3 ? next : next + ',') + prev; // 3是千分位，4是万分位
    });
}

方法三：使用JS内置 API （`toLocaleString`），实现数字、金额等等数值的格式化

(111111111).toLocaleString(); // 111,111,111 这种是没有单位的

// 还可以通过2个参数，进行不同数据的处理，例如人民币格式、百分比格式

const opts = {
  style: 'currency',
  currency: 'CNY',
};
(111111111).toLocaleString('zh-CN', opts); //  ¥111,111,111.00

const opts = {
  style: 'percent',
  currency: 'CNY',
};
(0.5).toLocaleString('zh-CN', opts); // 50%

更多用法请参考MDN

toLocaleString 可以接收两个可选参数：locales 和 options，而且这个 api在各大浏览器通用不存在兼容问题并且这个 api 不止存在 Number 的原型上，Array、Object、Date 原型上都有这个 api，并且格式化出来的值可以根据我们传入的参数出现各种结果。
关于toLocaleString的参数及用法在MDN（Number.prototype.toLocaleString()）中有详细的用法。