将逗号添加到更大的数字

Question

我有一个输入字段，并且使用 JavaScript 和 React，我将该字段限制为仅限数字：

HTML：

<input type="number" name="worth" id="worth-Valueofproperty-undefined-39916" style="padding: 0px; position: relative; width: 100%; border: none; outline: none; background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.87); cursor: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; opacity: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 100%;">

JS：

validateValue(e) {
  return (
    e.target.value = e.target.value.replace(/[^0-9,.]/, '')
  );
}

这很好用，但现在我想在输入中添加逗号以对数百、数千等进行分组。

例如：

     1000 -> 1,000
   100000 -> 100,000
100000000 -> 100,000,000

我该怎么做？

Answer 1

如果你的意思是逗号“，”在整数之后，

var n = Number.parseInt(e.target.value);
return Number.isNaN(n) ? "0,": ""+Number.parseInt(n)+",";

如果您想将数字转换为浮点数（有一个点，有时是逗号），请使用Number.parseFloat(n)。

如果你想用逗号格式化数字 1,000,000.12：

let num = Number(parseFloat(1000000.12).toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2});
console.log(num)

最终代码可能是：

validateValue(e) {
  return (
    e.target.value = Number(parseFloat(e.target.value).toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2});
  );
}

或者也许（参见下面的 cmets 进行讨论）：

validateValue(e) {
  return (
    Number(parseFloat(e.target.value).toFixed(2)).toLocaleString('en', {minimumFractionDigits: 2});
  );
}