指数数字格式化程序 - javascript

如何解决指数数字格式化程序 - javascript

我一直在寻找一种很好的方法来格式化满足以下所有条件的指数值...

• 适用于 HTML <canvas> 元素
• 具有可配置的基值（即 10、2、e）
• 将指数显示为上标，而不仅仅是 9x10^3
• 处理负上标指数

我发现的简单解决方案是使用一些 npm 包，例如 numeral.js，然后执行类似...

const n = 9000;
const label = numeral(n).format('0[.]00e+0') // 9e+3

这对于基数 10 来说并不可怕，但是当使用基数 2 或 e 时它不是很好

numeral(Math.pow(2,4)).format('0,0e+0') // 2e+1

解决方法

我最终创建了自己的函数，我认为这是对 numeral.js 指数格式器的巨大改进。

const superscriptMap: Record<string,string> = {
  0: '⁰',1: '¹',2: '²',3: '³',4: '⁴',5: '⁵',6: '⁶',7: '⁷',8: '⁸',9: '⁹',};

const getSuperScriptNumber = (n: number) =>
  `${n > 0 ? '' : '⁻'}${Math.abs(n)
    .toString()
    .split('')
    .map((c) => superStringMap[c])
    .join('')}`;

const logFormatter = (n: number,base: number = 10) => {
  // Number.EPSILON to help with rounding errors
  const sign = n < 0 ? '-' : '';
  const nAbs = Math.abs(n);
  const exp = Math.log(nAbs) / Math.log(logBaseMap[base]) + Number.EPSILON;
  const roundedExp = Math.floor(exp);
  const constant = numeral(nAbs / Math.pow(logBaseMap[base],roundedExp)).format('0[.]00');
  const baseLabel = base === LogBase.Natural ? 'e' : logBaseMap[base];
  const expString = getSuperScriptNumber(roundedExp);
  return `${sign}${constant} x ${baseLabel}${expString}`;
};

使用这个函数，我总结了下面几个格式化值的示例。

基地（基地）	指数（exp）	Math.pow(base,exp)	numeral(n).format('0[.]00e+0')	logFormatter(n,base)
10	-5	0.000009999999999999999	10e-6	1 x 10⁻⁵
10	-2.445	0.0035892193464500534	3.59e-3	3.59 x 10⁻³
10	-1	0.1	1e-1	1 x 10⁻¹
10	0	1	1e+0	1 x 10⁻⁰
10	1	10	1e+1	1 x 10¹
10	2.545	350.75187395256796	3.51e+2	3.51 x 10²
10	5	100000	1e+5	1 x 10⁵
2	-5	0.03125	3.13e-2	1 x 2⁻⁵
2	-2.445	0.18364607915978864	1.84e-1	1.47 x 2⁻³
2	-1	0.5	5e-1	1 x 2⁻¹
2	0	1	1e+0	1 x 2⁻⁰
2	1	2	2e+0	1 x 2¹
2	2.545	5.836081376960701	5.84e+0	1.46 x 2²
2	5	32	3.20e+1	1 x 2⁵
Math.E	-5	0.006737946999085469	6.74e-3	1 x e⁻⁵
Math.E	-2.445	0.08672613490173116	8.67e-2	1.74 x e⁻³
Math.E	-1	0.36787944117144233	3.68e-1	1 x e⁻¹
Math.E	0	1	1e+0	1 x e⁻⁰
Math.E	1	2.718281828459045	2.72e+0	1 x e¹
Math.E	2.545	12.743228086065521	1.27e+1	1.72 x e²
Math.E	5	148.41315910257657	1.48e+2	1 x e⁵

我希望这对处于我位置的人有所帮助。请编辑此端口或让我知道是否有计算错误。