前端计算后展示如何去除小数点_前端数值展示的思考与实践

前端如何友好的展示数值？本文基于实践总结了一些原则，介绍封装的工具库 Number Display ，并分析源码的实现。
Number Display 有适用于 Web 的 JavaScript 版和适用于 Flutter 的 Dart 版。
JavaScript 版
Dart 版

更新

• 增加了保留小数时设置四舍五入规则的功能
• 增加内部精度限制以避免浮点数精度问题

---

在前端开发中，数值展示是一个常见的需求。不同于统计或实验报表对精确性和规范性的注重，前端展示数值时更注重用户友好，让人一眼能感知数字，并且保持页面简洁、整齐。

无论是移动端的 App ，还是管理后台型的页面，或者流行的数据大屏，以下一些需求是展示数值时常常遇到的，具有一定的共性：

• 受布局空间的限制，数值字符串不能超过某个长度
• 不能出现 null 、 NaN 、 undefined 之类的情况，异常时希望有 “--” 之类的占位符
• 数字过大时希望加上千位分隔符 (1,234,222) ，或用数值单位表示 (1.23k)
• 不要出现科学计数法 (1.23e+4)
• 小数末尾不要有一串 0

如果能有一个工具函数，只需简单的配置，便可将输入的数值转换成符合要求的字符串就好了，特别是当长度有限时，能自动通过变换单位，压缩小数位的方式确保字符串不溢出长度限制，比如：

-254623933.876  =>  -254.62M
-1.2345e+5  =>  -123,450
12.000  => 12 
NaN  =>  --

Number Display 就是为这样的需求而创建的：