reactjs - 在React中，如何用逗号格式化数字？

Question

我的 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>
  );
};

Answer 1

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

你可以找到一个通用的 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 will return 2,345,643.00