前端如何友好的展示数值?本文基于实践总结了一些原则,介绍封装的工具库 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 就是为这样的需求而创建的:
rstStr = dis