0

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

这是 StackBlitz 上的链接。

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

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

123456 + 7890123 * 11111

我想要实现的是：

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

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

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

4

2 回答 2

0

快速解决

','您可以在评估结果之前删除。将 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，将第 65 行更新handleResult为

setDisplay(evaluate(display));
于 2021-06-27T12:25:43.073 回答
0

对于这种情况，我喜欢使用正则表达式。在这里，您可以使用匹配 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>
  );
};
于 2021-06-27T12:50:19.510 回答