指数数字格式化程序 - javascript答案

【问题标题】：Exponential number formatter - javascript指数数字格式化程序 - javascript
【发布时间】：2021-05-10 08:11:00
【问题描述】：

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

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

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

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

这对于 base 10 来说并不可怕，但在使用 base 2 或 e 时就不好了

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

【问题讨论】：

“使用 base 2 或 e”是什么意思？您给出的示例仍然只使用e+0。你想看到什么结果？另外，你想用那张桌子告诉我们什么？我觉得不错。
@ChristianFritz 我希望自己回答这个问题（见下文），以便为任何基值的值提供更好的格式化程序。 e+0 值假定基数为 10，这不能很好地格式化基数 2、e 或其他。请参阅下面我的答案中的表格。上表是为了说明使用numeral.js时的当前格式。

标签： javascript charts logarithm exponent

【解决方案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}`;
};

使用此函数，我在下面总结了一些示例格式化值。

Base (base)	Exponent (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⁵

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

【讨论】：