javascript - Bootstrap 和 JS - 如何在有限的 空间中容纳大量数字

Question

我正在尝试在单元格中显示一个数字，该数字可以从非常小到巨大不等，例如 3.3078854415193856e+107。但正如您在下面看到的，它们超出了单元格的限制。

这是数字所在的代码:

>   <div class="col-sm-6 my-col" align="center">
>        <text class="my-text-topdashboard-value"> id="id-topdashbaord-value2">5040</text>
>   </div>

是否有一种方法可以自动修复数字的大小，使其永远不会高于预定义的字符数或 Flex 列中的当前可用空间？也就是当数字太大时，它会自动在末尾添加 e+xx。

例如(还有逗号千位分隔符...)

• 5,040
• 40,320
• 479,001,600
• 8.68331176e+36
• 9.23564546e+107

Answer 1

使用 JavaScript 方法 toPrecision()(引用:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Number/toPrecision)关于你所有的值(value)观:

(100000000000).toPrecision(3)

返回字符串:“1.00e+11”

(1000000).toPrecision(3)

返回:“1.00e+6”

和

(5040).toPrecision(3)

返回:“5.04e+3”

等等..

其中传递的值:3，是您想要的精度 - 您可以使用它来获得最适合您的值。

那么您的大部分号码将以较小的长度变化抽出。