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

Question

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

这是StackBlitz的链接。

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

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

123456 + 7890123 * 11111

我想要实现的是：

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

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

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

Answer 1

快速修复

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

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

更好的解决方案

为内部逻辑状态和

外部显示状态你可以通过使用像这样的效果来实现这一点

/* --- 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

对于这种情况，我喜欢使用regex。在这里，您可以使用一个匹配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>
);
};