{display(data)}
Flutter中的用法&＃xff1a;
import &＃39;package:number_display/number_display.dart&＃39; ;final display &＃61; createDisplay(length: 8 ,decimal : 0 ,
);print(display(data));
这使得使用display非常简洁&＃xff0c;并且可以批量配置。 请注意&＃xff0c;配置在Javascript中作为对象传递&＃xff0c;但在Dart中称为参数。
现在&＃xff0c;数字显示包括5种配置&＃xff1a;
- length&＃xff1a;结果的最大长度。 长度不应小于5&＃xff0c;以便修剪后可以显示任何数字&＃xff08;例如-123000&＃xff09;。
- 小数&＃xff1a;最大十进制长度。 请注意&＃xff0c;这只是一个约束。 最终精度将根据长度计算&＃xff0c;且小于此参数。 将没有十进制尾随零。
- 占位符&＃xff1a;输入既不是字符串也不是数字&＃xff0c;或者输入是NaN&＃xff0c;Infinity或-Infinity时的结果。 如果长度超过长度参数&＃xff0c;它将被切片。
- allowText&＃xff1a;允许文本 &＃xff08;无法转换为数字的字符串&＃xff09;作为输入和结果。 它将在长度参数内切片。 如果为false&＃xff0c;则文本结果将为占位符。 请注意&＃xff0c;某些特殊格式将被视为诸如“ NaN”&＃xff0c;“-1.2345e &＃43; 5”之类的文本。 请注意&＃xff0c;Dart版本没有此参数。
- 逗号&＃xff1a;如果有房间&＃xff0c;则区域设置字符串是否具有逗号&＃xff08;1,234,222&＃xff09;。
整理原则 当显示在页面上时&＃xff0c;数字字符串受几何空间限制。
从理论上讲&＃xff0c;在设计小部件的大小时&＃xff0c;应考虑其值的长度。 但是实际上&＃xff0c;它不可能如此全面&＃xff0c;并且响应总是落在前端开发人员的手中。
数字的形式可以灵活&＃xff0c;但是字符串绝对不可接受在小部件外部溢出。 这是最高优先级。 这是数字显示的主要功能。 当长度受限制时&＃xff0c;“数字显示”将按以下顺序修剪数字字符串&＃xff1a;
- 省略区域逗号
- 将左小数部分切成小数
- 用数字单位&＃xff08;k&＃xff0c;M&＃xff0c;G&＃xff0c;T&＃xff0c;P&＃xff09;修剪整数
- 如果长度> &＃61; 5&＃xff0c;则可以在其中修剪任何数字。 如果小于5并且输入数字太长&＃xff0c;则显示将引发错误。
源代码 引擎盖后面的数字显示主要使用正则表达式来处理数字字符串。 步骤如下&＃xff1a;
1.法律判断
对于Javascript&＃xff08;这是一种非常动态的语言&＃xff09;&＃xff0c;实际上输入的“数字”可以是数字或字符串&＃xff1a;
if ((type !&＃61;&＃61; &＃39;number&＃39; && type !&＃61;&＃61; &＃39;string&＃39; )|| (type &＃61;&＃61;&＃61; &＃39;number&＃39; && ! Number .isFinite(value))
) {return placeholder;
}
对于静态类型的Dart&＃xff0c;我们宣布输入类型为num&＃xff1a;
if (value &＃61;&＃61; null || !value.isFinite) {return placeholder;
}
2.切符号&＃xff0c;整数和小数部分
符号&＃xff0c;整数和小数部分由分隔符“-”和“。”标识。 引用Ant Design Statistic组件的代码 &＃xff0c;并使用Javascript中的String.match函数&＃xff0c;我们可以匹配多个模式&＃xff0c;并在一行中将所有三个部分作为一个数组获得&＃xff1a;
const cells &＃61; value.match( /^(-?)(\d*)(\.(\d&＃43;))?$/ );
但是在Dart中&＃xff0c;我们没有这样的技巧&＃xff1a;
final negative &＃61; RegExp (r &＃39;^-?&＃39; ).stringMatch(valueStr) ?? &＃39;&＃39; ;
final integer &＃61; RegExp (r &＃39;\d&＃43;&＃39; ).stringMatch(valueStr) ?? &＃39;&＃39; ;
final deciRaw &＃61; RegExp (r &＃39;(?<&＃61;\.)\d&＃43;$&＃39; ).stringMatch(valueStr) ?? &＃39;&＃39; ;
实际上dart中的正则表达式正在优化&＃xff0c;我们注意到在所有最新版本&＃xff08;2.1-2.4&＃xff09;中正则表达式都有变化。
3.修剪小数部分
省略逗号分隔符后&＃xff0c;如果空间仍然有限&＃xff0c;则十进制长度将减小。 请注意&＃xff0c;由于小数点仅在存在小数部分时出现&＃xff0c;因此长度会有两个边界&＃xff0c;0和2。 同时&＃xff0c;我们将通过以下方式减去尾随零&＃xff1a;
&＃xff08;对于左侧&＃xff0c;Javascript和Dart代码非常相似&＃xff0c;因此我们仅以Javascript代码为例&＃xff09;
let space &＃61; length - negative.length - int.length;
if (space >&＃61; 2 ) {deciShow &＃61; deci.slice( 0 , space - 1 ).replace( /0&＃43;$/ , &＃39;&＃39; );return &＃96; ${negative} ${int} ${deciShow && &＃39;.&＃39; } ${deciShow} &＃96; ;
}
if (space >&＃61; 0 ) {return &＃96; ${negative} ${int} &＃96; ;
}
4.修剪整数部分
如果字符串仍然溢出&＃xff0c;则必须使用诸如k或M之类的单位转换整数部分。由于我们之前添加了组分隔符&＃xff1a;
const localeInt &＃61; int.replace( /\B(?&＃61;(\d{3})&＃43;(?!\d))/g , &＃39;,&＃39; );
我们可以用它来计算我们需要的单位&＃xff1a;
const sections &＃61; localeInt.split( &＃39;,&＃39; );
const units &＃61; [ &＃39;k&＃39; , &＃39;M&＃39; , &＃39;G&＃39; , &＃39;T&＃39; , &＃39;P&＃39; ];
const unit &＃61; units[sections.length - 2 ];
最后&＃xff0c;与修整小数部分相同&＃xff0c;将尾随的部分减小到左边的空间&＃xff1a;
space &＃61; length - negative.length - mainSection.length - 1 ;
if (space >&＃61; 2 ) {const tailShow &＃61; tailSection.slice( 0 , space - 1 ).replace( /0&＃43;$/ , &＃39;&＃39; );return &＃96; ${negative} ${mainSection} ${tailShow && &＃39;.&＃39; } ${tailShow} ${unit} &＃96; ;
}if (space >&＃61; 0 ) {return &＃96; ${negative} ${mainSection} ${unit} &＃96; ;
}
在开发过程中&＃xff0c;通常不显示数字&＃xff0c;并且其中确实没有深层的技术。 但是&＃xff0c;如果我们不能彻底考虑&＃xff0c;就会有很多麻烦。
以上原则寻求更多共同点。 但是总是有独特的需求&＃xff0c;因此我们试图使其可配置。 数字显示经历了两次重大更新&＃xff0c;并简化了配置。 为了获得更好的性能&＃xff0c;我们使用正则表达式操作更改了一些循环和判断。 希望您能提供一些建议&＃xff1a;
问题&＃xff08;Javascript&＃xff09;
问题&＃xff08;飞镖&＃xff09;
From: https://hackernoon.com/tips-for-displaying-frontend-numbers-in-a-friendly-manner-bf9t37gv
京公网安备 11010802041100号