Question

我的API正在发送像10, 31312, 4000这样的React整数。

在我的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

我有一个类，可以将数字转换为<form [formGroup]="form" novalidate> <div [ngClass]="{'has-success': form.controls.myControl.valid}"> <input formControlName="myControl" type="text"/> </div> </form>或31,312。

代码非常多;

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> ); };的较小组件和显示/隐藏小数点的属性

Answer 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

var number = 1234567890; //要转换的示例号

⚠请注意，javascript的最大整数值为9007199254740991

其他解决方案：

https://css-tricks.com/snippets/javascript/comma-values-in-numbers/

2345643.00将返回2,345,643.00

Answer 3

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

请注意，我忽略了小数点

Answer 4

对组件进行反应以将数字格式化为输入或文本：react-number-format

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

4 个答案:

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