在 React 中,如何用逗号格式化数字?

新手上路,请多包涵

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

原文由 AnApprentice 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k
2 个回答

在 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 将返回 2,345,643.00

原文由 hassan ketabi 发布,翻译遵循 CC BY-SA 4.0 许可协议

我有一个将数字转换为 31,31231,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 的较小组件和一个显示/隐藏小数点的属性中

原文由 Tim B James 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进