JavaScript实现数字千分位的方法

最新推荐文章于 2025-03-19 11:08:32 发布

前端可樂

最新推荐文章于 2025-03-19 11:08:32 发布

阅读量1k

点赞数 10

分类专栏： Vue 文章标签： javascript

本文链接：https://blog.csdn.net/m0_67460846/article/details/142751537

版权

Vue 专栏收录该内容

29 篇文章

订阅专栏

前言

如何利用 JavaScript 将普通数字转换为带有千分位分隔符的格式。我们将介绍多种方法，包括使用内置的 toLocaleString()
方法、Intl.NumberFormat
对象以及自定义函数来实现数字格式化。无论你是初学者还是有一定经验的开发者，本文都将为你揭示数字格式化的各种技巧和灵活性，让你在数据展示方面游刃有余。让我们一起探索如何美化数字，让数据更加清晰和吸引人！

什么是千分位分隔

千分位分割指的是在数字中插入逗号或其他分隔符，以提高数字的可读性。通常，千分位分割会在数字的每三位之间插入一个分隔符，例如逗号。这个分隔符可以帮助我们更清晰地识别数字的大小和结构。
举个例子，假设有一个数字 1234567.6789。在进行千分位分割后，它将被转换为
1,234,567,678.9。通过插入逗号作为分隔符，我们可以更容易地理解这个数值表示的是一个百万级别的数字。
千分位分割广泛应用于金融、统计数据、货币金额等领域，以及在各种数据展示中。它可以使大数字更易读，并且更加美化和规范化。在编程中，我们可以使用各种语言和方法来实现千分位分割，如
JavaScript 中的 toLocaleString() 方法、C# 中的 ToString(“N”) 方法等。
通过千分位分割，我们可以方便地将数字转换为更具可读性和易懂性的格式，使数据更加清晰和吸引人。

代码实现

        /*
        * 参数说明：
        * number：要格式化的数字
        * decimals：保留几位小数, 默认0
        * dec_point：小数点符号, 默认.
        * thousands_sep：千分位符号, 默认,
        */
        // vue中使用 {{ number_format('xxxx变量名') }}
        number_format(number, decimals = 0, dec_point = '.', thousands_sep = ",") {
          number = (number + '').replace(/[^0-9+-Ee.]/g, '');
          var n = !isFinite(+number) ? 0 : +number,
              prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
              sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
              dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
              s = '';
          s = (prec ? n.toFixed(prec) : '' + Math.round(n)).split('.');
          var re = /(-?\d+)(\d{3})/;
          while (re.test(s[0])) {
            s[0] = s[0].replace(re, "$1" + sep + "$2");
          }
          if ((s[1] || '').length < prec) {
            s[1] = s[1] || '';
            s[1] += new Array(prec - s[1].length + 1).join('0');
          }
          return s.join(dec);
        },