score:68

## Print a number with commas as thousands separators in JavaScript

You can find a general JS solution for this:

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 not supported):

``````var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"
``````

var number = 1234567890; // Example number to be converted

⚠ Mind that javascript has a maximum integer value of 9007199254740991

Other Solution:

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

2345643.00 will return 2,345,643.00

score:0

React boys, use this component.

``````// number cell
function NumberCell({ line, handleBlur, property, readOnly }) {
function replaceNonNumeric(numStr) {
return String(numStr).replace(/[^0-9]/g, '')
}
function commarize(numStr) {
return Number(replaceNonNumeric(numStr)).toLocaleString()
}

useEffect(() => {
setValue(commarize(line[property.name]))
}, [line])

const [value, setValue] = useState(line[property.name])

const handleChange = e => {
setValue(commarize(e.target.value))
}

function proxyHandleBlur(e) {
e.target.value = replaceNonNumeric(e.target.value)
return handleBlur(e)
}

return (
<input
name={property.name}
value={ value }
onChange={handleChange}
onBlur={proxyHandleBlur}
type="text"
/>
);
}
``````

score:2

React component to format numbers in an input or as text: react-number-format

score:4

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

Please note that I am ignoring the decimal points

score:39

I have a class which converts a number to either `31,312` or `31,312.00`.

The code is pretty much;

`return value.toLocaleString(navigator.language, { minimumFractionDigits: 2 });`

and

`return value.toLocaleString(navigator.language, { minimumFractionDigits: 0 });`

So you can just use `toLocaleString` for converting.

Update

Based on your example, it would be (assuming points is a number);

``````const RankingsList = ({rankings, currentUserId}) => {
return (
<div className="listGroup">
{rankings.map((ranking, index) =>
<span className="number">{ranking.points.toLocaleString(navigator.language, { minimumFractionDigits: 0 })}</span>
)}
</div>
);
};
``````

However, you might want to just move this into a smaller component called `NumberDisplay` and a property to show/hide decimal points'