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

Ответы

Ответ 1

У меня есть класс, который преобразует число в 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>
  );
};

Однако вы можете просто переместить это в меньший компонент, называемый NumberDisplay и свойство показать/скрыть десятичные точки '

Ответ 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"

источник: fooobar.com/info/11130/...

var номер = 1234567890;//Пример номера для конвертации

Ind Имейте в виду, что максимальное целочисленное значение javascript составляет 9007199254740991

Другое решение:

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

2345643.00 will return 2,345,643.00