Javascript 在输入框中格式化数字

我制作了一个

输入

组件。如果它是一个数字，我想正确地格式化它，就像货币一样。也就是说，

4000

将是

4000

这是一本书

我在显示和更新此内容时遇到问题

<Input initialValue={'400000000'} isNumber={true} />

我在输入组件中看到一个错误NaN。有人有什么想法吗？

问题出在

const x = Number(val);

当您计算编号（“32423343”）时，包含逗号Js的字符串将抛出错误。。。 正确的方法是发送不带逗号的号码<代码>编号（“32432343”） 要解决此问题，您可以在计算数字之前添加此行以删除逗号

val = val.replace(/,/g, '');

---

Javascript有一个数字格式化程序（国际化API的一部分）

代码片段：

// Intl.NumberFormat With React State Update

var currentVal = 0;
...
const update = (event: any) => {
   /**
   https://stackoverflow.com/questions/35535688/stop-cursor-jumping-when-formatting-number-in-react
   https://github.com/facebook/react/issues/955
   */
   const caret = event.target.selectionStart
      const element = event.target
         window.requestAnimationFrame(() => {
         element.selectionStart = caret
         element.selectionEnd = caret
      })
   // -- Stop cursor jumping when formatting number in React

   var val = event.target.value.replace(/(\..*)\./g, '$1') //Replace Multiple Dot(.)
   var x = Number(val.replace(/,/g, ""));
   if (currentVal != x) {
      var formatter = new Intl.NumberFormat("en-US", { minimumFractionDigits:2});
      currentVal = formatter.format(x);
      updateValue(currentVal);
   }else{
      updateValue(val);
   }
 };

 return (<input type="text" value={value} onChange={e => update(e)} />);

//带有React状态更新的Intl.NumberFormat
var-currentVal=0；
...
常量更新=（事件：任意）=>{
/**
https://stackoverflow.com/questions/35535688/stop-cursor-jumping-when-formatting-number-in-react
https://github.com/facebook/react/issues/955
*/
常量插入符号=event.target.selectionStart
常量元素=event.target
window.requestAnimationFrame（（）=>{
element.selectionStart=插入符号
element.selectionEnd=插入符号
})
//--在React中格式化数字时停止光标跳转
var val=event.target.value.replace（/（\..*）\./g，'$1'）//替换多个点（.）
var x=编号（val.replace（/，/g，“”）；
如果（当前值！=x）{
var formatter=新的Intl.NumberFormat（“en-US”{minimumFractionDigits:2}）；
currentVal=格式化程序.format（x）；
更新值（currentVal）；
}否则{
更新值（val）；
}
};
返回（更新（e）}/>）；

注意：代码片段为您提供了格式化数字的想法，您需要为生产处理更多的用例

另外，请检查可能适合您的申请的

参考资料：

// Intl.NumberFormat With React State Update

var currentVal = 0;
...
const update = (event: any) => {
   /**
   https://stackoverflow.com/questions/35535688/stop-cursor-jumping-when-formatting-number-in-react
   https://github.com/facebook/react/issues/955
   */
   const caret = event.target.selectionStart
      const element = event.target
         window.requestAnimationFrame(() => {
         element.selectionStart = caret
         element.selectionEnd = caret
      })
   // -- Stop cursor jumping when formatting number in React

   var val = event.target.value.replace(/(\..*)\./g, '$1') //Replace Multiple Dot(.)
   var x = Number(val.replace(/,/g, ""));
   if (currentVal != x) {
      var formatter = new Intl.NumberFormat("en-US", { minimumFractionDigits:2});
      currentVal = formatter.format(x);
      updateValue(currentVal);
   }else{
      updateValue(val);
   }
 };

 return (<input type="text" value={value} onChange={e => update(e)} />);

---

@Chris He正在将字符串转换为数字->

const x=Number（val）

updateValue

是useState

hook

的一部分，它允许我更新state@ŞivāsinkĂr，我真的不想使用库来进行此尝试

const update=（val:any）=>{var formatter=new Intl.NumberFormat（“en-US”）；updateValue（formatter.format（val.replace（/，/g，”）；}如果有小数点怎么办？对于那些用
表示千位数，用
，
表示小数位数的地区，情况又如何呢？
// Intl.NumberFormat With React State Update

var currentVal = 0;
...
const update = (event: any) => {
   /**
   https://stackoverflow.com/questions/35535688/stop-cursor-jumping-when-formatting-number-in-react
   https://github.com/facebook/react/issues/955
   */
   const caret = event.target.selectionStart
      const element = event.target
         window.requestAnimationFrame(() => {
         element.selectionStart = caret
         element.selectionEnd = caret
      })
   // -- Stop cursor jumping when formatting number in React

   var val = event.target.value.replace(/(\..*)\./g, '$1') //Replace Multiple Dot(.)
   var x = Number(val.replace(/,/g, ""));
   if (currentVal != x) {
      var formatter = new Intl.NumberFormat("en-US", { minimumFractionDigits:2});
      currentVal = formatter.format(x);
      updateValue(currentVal);
   }else{
      updateValue(val);
   }
 };

 return (<input type="text" value={value} onChange={e => update(e)} />);