让数字更美观：JavaScript格式化大数的2种方法

最新推荐文章于 2024-07-03 15:45:53 发布

曼&波

最新推荐文章于 2024-07-03 15:45:53 发布

阅读量638

点赞数

分类专栏： JS Tips 文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/twentyfourand8/article/details/129088727

版权

本文介绍了两种在JavaScript中格式化大数的方法，包括自定义函数和使用国际化API。自定义函数通过处理数字的边缘情况实现，而国际化API提供更强大、更灵活的格式化选项，如locale、notation等，使代码更加简洁且适应多种语言环境。

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

引入

在网站或应用程序的布局中展示大量数字有时会很难阅读，特别是当你需要同时展示多个数字时，在UI的设计上也会增加难度。因此我们通常采用同一种格式来以紧凑的方式展示大数字。比如

123,000 -> 123k
1,250,000 -> 1.25m
15,500,000 -> 15.5m
450,000,000 -> 450m
3,500,000,000 -> 3.5b

而在代码当中处理这些大数的时候，是不能用逗号进行分割的，因此我们不得不处理这样的数字3500000000，在看到几次这样的数之后你就会一个头两个大了，你能在3s内数出它有几个0吗？所以我们需要手段来格式化或简化这些数字。

#1：自定义函数

办法总比问题多。自从ES2021以来，JavaScript支持使用下划线作为数字分隔符，使得在代码中更容易阅读大数字。因此我们的格式化代码或大数美化代码可以这样写。

function formatCompactNumber(number) {
  if (number < 1000) {
    return number;
  } else if (number >= 1000 && number < 1_000_000) {
    return (number / 1000).toFixed(1) + "K";
  } else if (number >= 1_000_000 && number < 1_000_000_000) {
    return (number / 1_000_000).toFixed(1) + "M";
  } else if (number >= 1_000_000_000 && number < 1_000_000_000_000) {
    return (number / 1_000_000_000).toFixed(1) + "B";
  } else if (number >= 1_000_000_000_000 && number < 1_000_000_000_000_000) {
    return (number / 1_000_000_000_000).toFixed(1) + "T";
  }
}

formatCompactNumber(12_000);        // 12.0K
formatCompactNumber(2_000_00