我的 API 正在发送 React 整数，例如10, 31312, 4000.
在我的 React 组件中，像这样格式化这些数字的正确方法是什么：
from: 10, 31312, 4000
to: 10, 31,312, 4,000
该数字由我的 Rails API 提供并在 React 组件中呈现：
const RankingsList = ({rankings, currentUserId}) => {
return (
<div className="listGroup">
{rankings.map((ranking, index) =>
<span className="number">{ranking.points}</span>
)}
</div>
);
};
您可以为此找到通用的 JS 解决方案：
toLocaleString:
// 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/
2345643.00 将返回 2,345,643.00
我有一个将数字转换为31,312or 的类31,312.00。
代码非常多；
return value.toLocaleString(navigator.language, { minimumFractionDigits: 2 });
和
return value.toLocaleString(navigator.language, { minimumFractionDigits: 0 });
所以你可以只toLocaleString用于转换。
更新
根据您的示例，它将是（假设点是一个数字）；
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