如何在计算器应用程序（React）中正确格式化数字？

Question

这是我第一次在 SO 中发帖，我需要帮助我在使用 ReactJS 制作的计算器应用中正确格式化数字。

这是 StackBlitz 上的 link。

现在，我想实现在数字被按下并显示在显示器上并添加算术符号后的格式化效果，尤其是在使用多个算术时。

为了说明我的观点，下面是当前显示的示例：

123456 + 7890123 * 11111

而我想要实现的是：

123,456 + 7,890,123 * 11,111

我只能在使用toLocaleString() 函数显示结果时这样做。即使这样，如果我按下数字/数字然后单击结果按钮两次，它会崩溃（因为显示包含逗号，并且评估函数将无法正确处理它）。

希望有人能指出我正确的方向。谢谢。

Answer 1

快速修复

您可以在评估结果之前删除','。 将 Input.js 的第 65 行更改为

setDisplay(evaluate(display.replace(/,/g, '')).toLocaleString());

更好的解决方案

为内部逻辑状态和外部显示状态保留单独的变量，其中前者对代码有效，后者是其可视化表示。

你可以像这样通过useEffect实现这个

/* --- Display.js --- */
const Display = ({ display }) => {
  const [printValue, setPrintValue] = useState('')
  useEffect(() => {
    setPrintValue(`${display}`.replace(/[0-9]+/g, num => (+num).toLocaleString()))
  }, [display])
  return (
    <StyledDisplay>
      {' '}
      <span>{printValue}</span>{' '}
    </StyledDisplay>
  );
};

另外，在Input.js 中，将handleResult 中的第 65 行更新为

setDisplay(evaluate(display));

Answer 2

对于这种情况，我喜欢使用正则表达式。在这里，您可以使用匹配 3 位数字的正则表达式并根据需要添加逗号。为了简化正则表达式，我通常反转字符串：

const original = "123456 / 98765 * 22222"

function format(str) {
  const reversed = str.split('').reverse().join('')
  const formatted = reversed.replace(/(\d{3})(?=\d)/gm, `$1,`)
  return formatted.split('').reverse().join('')
}
console.log('original string : ', original)
console.log('result string : ',format(original))

你可以在你的 Display 组件中使用这个函数，就在像这样注入 display 属性之前

function format(str){
    const reversed = str.split('').reverse().join('')
    const formatted = reversed.replace(/(\d{3})(?=\d)/gm, `$1,`)
    return formatted.split('').reverse().join('')
}
const Display = ({ display }) => {
  return (
    <StyledDisplay>
      {' '}
      <span>{format(display)}</span>{' '}
    </StyledDisplay>
  );
};