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

Question

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

这是 StackBlitz 上的链接。

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

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

123456 + 7890123 * 11111

而我想要实现的是：

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

我只能在使用toLocaleString()函数显示结果时执行此操作。 即便如此，如果我按下 number/numbers 然后单击结果按钮两次，它也会崩溃（因为显示包含一个逗号，并且评估函数将无法正确处理它）。

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

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 prop 之前

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>
  );
};