Be careful parsing formatted numbers in JavaScript
I was working on a script recently and ran into an unexpected issue. The work
involved parsing a number-range string into an array of numbers, e.g. “1-100”
into [1,100].
My first instinct was to reach for parseInt with something like:
"1-100".split("-").map((string) => parseInt(string));
// [1, 100]
This worked nicely until I rant into formatted numbers in the dataset:
“1,000-2,000”. Instead of parsing the strings into the expected numbers,
parseInt seems to treat the commas as decimals:
"1,000-2,000".split("-").map((string) => parseInt(string));
// [1, 2]
Unfortunately, parseFloat and the Number constructor similarly struggle with
formatted numbers:
"1,000-2,000".split("-").map((string) => parseFloat(string));
// [1, 2]
"1,000-2,000".split("-").map((string) => Number(string));
// [NaN, NaN]
It’s interesting to me that Number returns NaN, but
MDN says you probably shouldn’t be using it like this anyway.
The solution is to remove the commas before parsing. There are a few methods to
do this, but String.replace will work nicely:
"1,000-2,000"
.replace(",", "")
.split("-")
.map((string) => parseInt(string));
If you’re curious, swapping the commas for underscores – the approved numeric separator – doesn’t work either:
parseInt("1_000");
// 1
There might be an optimal solution that handles numbers formatted for different locales, e.g. “1.000,00” and “1,000.00”, so please send me a message if you know of one.
Happy coding!