以友好的方式显示前端号码的提示

您如何在前端平稳显示数字？ 在本文中，我们总结了一些实用的原理，介绍了一个工具库-Number Display，并分析了其源代码。

Number Display具有用于Web的JavaScript版本和用于Flutter的Dart版本。

JavaScript版本

飞镖版

在前端开发中，显示数字是非常普遍的要求。 与统计或科学报告中的那些报告最关注精度和标准化不同，前端中的数字更关心友好的用户体验。 让用户乍一看就知道数字，并保持页面整洁很重要。

在移动应用程序，后台管理系统或流行的数据可视化屏幕中，天气显示数字有一些共同的要求：

• 受几何空间的限制，数字字符串不能溢出一定的长度。
• 禁止使用null，NaN或undefined之类的字符串，在例外情况下最好使用占位符，例如“-”。
• 对于大整数，请添加逗号作为组分隔符（1,234,222）或以单位转换（1.23k）。
• 没有科学记数法（1.23e + 4）。
• 没有尾随的十进制零。

如果有一个工具功能，只需简单的配置就可以将输入数字转换为所需的字符串，那将是非常好的。 特别是当几何空间有限时，它可以通过转换单位或减少小数位来自动修剪数字字符串：

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

数字显示是针对以下需求而构建的：

rstStr = display( -254623933.876 )    // result: -254.62M

用法

原则上将配置和用法分开，Number Display导出一个名为createDisplay的高阶函数。 通过将参数作为配置传递给createDisplay，我们可以定制小部件中使用的实际显示功能。

网络用途：

import createDisplay from 'number-display' ;

const display = createDisplay({
  length : 8 ,
  decimal : 0 ,
});

< div > {display(data)} </ div >

Flutter中的用法：

import 'package:number_display/number_display.dart' ;

final display = createDisplay(
  length: 8 ,
  decimal : 0 ,
);

print(display(data));

这使得使用display非常简洁，并且可以批量配置。 请注意，配置在JavaScript中作为对象传递，但在Dart中称为参数。

现在，数字显示包括5种配置：

• length：结果的最大长度。 长度不应小于5，以便修剪后可以显示任何数字（例如-123000）。
• 小数：最大十进制长度。 请注意，这只是一个约束。 最终精度将根据长度计算，且小于此参数。 将没有十进制尾随零。
• 占位符：输入既不是字符串也不是数字，或者输入是NaN，Infinity或-Infinity时的结果。 如果长度超过长度参数，它将被切片。
• allowText：允许文本 （无法转换为数字的字符串）作为输入和结果。 它将在长度参数内切片。 如果为false，则文本结果将为占位符。 请注意，某些特殊格式将被视为诸如“ NaN”，“-1.2345e + 5”之类的文本。 请注意，Dart版本没有此参数。
• 逗号：如果有房间，则区域设置字符串是否具有逗号（1,234,222）。

整理原则

当显示在页面上时，数字字符串受几何空间限制。

从理论上讲，在设计小部件的大小时，应考虑其值的长度。 但是实际上，它不可能如此全面，并且响应总是落在前端开发人员的手中。

数字的形式可以灵活，但是字符串绝对不可接受在小部件外部溢出。 这是最高优先级。 这是数字显示的主要功能。 当长度受限制时，“数字显示”将按以下顺序修剪数字字符串：

• 省略区域逗号
• 将左小数部分切成小数
• 用数字单位（k，M，G，T，P）修剪整数
• 如果长度> = 5，则可以在其中修剪任何数字。 如果小于5并且输入数字太长，则显示将引发错误。

源代码

引擎盖后面的数字显示主要使用正则表达式来处理数字字符串。 步骤如下：

1.法律判断

对于JavaScript（这是一种非常动态的语言），实际上输入的“数字”可以是数字或字符串：

if (
  (type !== 'number' && type !== 'string' )
  || (type === 'number' && ! Number .isFinite(value))
) {
  return placeholder;
}

对于静态类型的Dart，我们宣布输入类型为num：

if (value == null || !value.isFinite) {
  return placeholder;
}

2.切符号，整数和小数部分

符号，整数和小数部分由分隔符“-”和“。”标识。 引用Ant Design Statistic组件的代码 ，并使用JavaScript中的String.match函数，我们可以匹配多个模式，并在一行中将所有三个部分作为一个数组获得：

const cells = value.match( /^(-?)(\d*)(\.(\d+))?$/ );

但是在Dart中，我们没有这样的技巧：

final negative = RegExp (r '^-?' ).stringMatch(valueStr) ?? '' ;
final integer = RegExp (r '\d+' ).stringMatch(valueStr) ?? '' ;
final deciRaw = RegExp (r '(?<=\.)\d+$' ).stringMatch(valueStr) ?? '' ;

实际上dart中的正则表达式正在优化，我们注意到在所有最新版本（2.1-2.4）中正则表达式都有变化。

3.修剪小数部分

省略逗号分隔符后，如果空间仍然有限，则十进制长度将减小。 请注意，由于小数点仅在存在小数部分时出现，因此长度会有两个边界，0和2。 同时，我们将通过以下方式减去尾随零：

（对于左侧，JavaScript和Dart代码非常相似，因此我们仅以JavaScript代码为例）

let space = length - negative.length - int.length;
if (space >= 2 ) {
  deciShow = deci.slice( 0 , space - 1 ).replace( /0+$/ , '' );
  return ` ${negative} ${int} ${deciShow && '.' } ${deciShow} ` ;
}
if (space >= 0 ) {
  return ` ${negative} ${int} ` ;
}

4.修剪整数部分

如果字符串仍然溢出，则必须使用诸如k或M之类的单位转换整数部分。由于我们之前添加了组分隔符：

const localeInt = int.replace( /\B(?=(\d{3})+(?!\d))/g , ',' );

我们可以用它来计算我们需要的单位：

const sections = localeInt.split( ',' );
const units = [ 'k' , 'M' , 'G' , 'T' , 'P' ];
const unit = units[sections.length - 2 ];

最后，与修整小数部分相同，将尾随的部分减小到左边的空间：

space = length - negative.length - mainSection.length - 1 ;
if (space >= 2 ) {
  const tailShow = tailSection.slice( 0 , space - 1 ).replace( /0+$/ , '' );
  return ` ${negative} ${mainSection} ${tailShow && '.' } ${tailShow} ${unit} ` ;
}
  if (space >= 0 ) {
  return ` ${negative} ${mainSection} ${unit} ` ;
}

讨论区

在开发过程中，通常不显示数字，并且其中确实没有深层的技术。 但是，如果我们不能彻底考虑，就会有很多麻烦。

以上原则寻求更多共同点。 但是总是有独特的需求，因此我们试图使其可配置。 数字显示经历了两次重大更新，并简化了配置。 为了获得更好的性能，我们使用正则表达式操作更改了一些循环和判断。 希望您能提供一些建议：

问题（JavaScript）

问题（飞镖）

From: https://hackernoon.com/tips-for-displaying-frontend-numbers-in-a-friendly-manner-bf9t37gv