在JavaScript中使用逗号作为千位分隔符打印数字

你可以找到一个通用的JS解决方案：
转换为本地字符串：

// A more complex example: 
number.toLocaleString(); // "1,234,567,890"

// A more complex example: 
var number2 = 1234.56789; // floating point example
number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57"

NumberFormat（不支持Safari浏览器）：

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

来源：https://stackoverflow.com/a/32154217/6200607
变量编号= 1234567890;//要转换的示例编号
注意javascript的最大整数值为9007199254740991

其他解决方案：

https://css-tricks.com/snippets/javascript/comma-values-in-numbers/
将返回2，345，643.00

我有一个类，它可以将一个数字转换为31,312或31,312.00。
代码差不多;
return value.toLocaleString(navigator.language, { minimumFractionDigits: 2 });
以及
return value.toLocaleString(navigator.language, { minimumFractionDigits: 0 });
因此，您可以只使用toLocaleString进行转换。

• • 更新**

根据您的示例，它将是（假设points是一个数字）;

const RankingsList = ({rankings, currentUserId}) => {
  return (
      <div className="listGroup">
        {rankings.map((ranking, index) =>
            <span className="number">{ranking.points.toLocaleString(navigator.language, { minimumFractionDigits: 0 })}</span>
        )}
      </div>
  );
};

但是，您可能只想将其移到一个名为NumberDisplay的较小组件中，并添加一个显示/隐藏小数点的属性。

export const formatNumber = inputNumber => {
    let formetedNumber=(Number(inputNumber)).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    let splitArray=formetedNumber.split('.');
    if(splitArray.length>1){
      formetedNumber=splitArray[0];
    }
    return(formetedNumber);
  };

请注意，我忽略了小数点

React组件以格式化输入中的数字或将数字格式化为文本：react-number-format

const numberWithCommas = (x) => {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

React男孩，使用这个组件。

// number cell
function NumberCell({ line, handleBlur, property, readOnly }) {
    function replaceNonNumeric(numStr) {
        return String(numStr).replace(/[^0-9]/g, '')
    }
    function commarize(numStr) {
        return Number(replaceNonNumeric(numStr)).toLocaleString()
    }

   
    useEffect(() => {
        setValue(commarize(line[property.name]))
    }, [line])

    const [value, setValue] = useState(line[property.name])

    const handleChange = e => {
        setValue(commarize(e.target.value))
    }

    function proxyHandleBlur(e) {
        e.target.value = replaceNonNumeric(e.target.value)
        return handleBlur(e)
    }

    return (
        <input 
            name={property.name}
            value={ value }
            onChange={handleChange}
            onBlur={proxyHandleBlur}
            type="text"
            readOnly={readOnly}
            />
    );
}

import React from 'react'

export default function Test() {

    const [finalAmount, setfinalAmount]= useState("");

    const handleNumChange = (event) => {
    const str = (event.target.value).replace(/\,/g,'');
    setfinalAmount(str);
  }
  return (
    <div>
        <input
                    type="text"
                    onChange={handleNumChange}
                    value={new Intl.NumberFormat('en-IN', {
                    }).format(finalAmount)}
                  />
    </div>
  )
}