Parse a String with Commas to a Number in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 3, 2024
4 min

banner

# Parse a String with Commas to a Number using String.replaceAll()

To parse a string with commas to a number:

  1. Use the replaceAll() method to remove all the commas from the string.
  2. The replaceAll method will return a new string containing no commas.
  3. Use the parseFloat() function to convert the string to a number.
index.js
const str = '12,000,000.50'; const num = parseFloat(str.replaceAll(',', '')); console.log(num); // ๐Ÿ‘‰๏ธ 123000000.5

parse string with commas to number using replaceall

The code for this article is available on GitHub

The String.replaceAll() method returns a new string with all matches of a pattern replaced by the provided replacement.

The method takes the following parameters:

NameDescription
patternThe pattern to look for in the string. Can be a string or a regular expression.
replacementA string used to replace the substring match by the supplied pattern.

The String.replaceAll() method returns a new string with the matches of the pattern replaced. The method doesn't change the original string.

Strings are immutable in JavaScript.

We replace each comma in the string with an empty string in order to remove the commas.

The last step is to call the parseFloat() function with the result.

The parseFloat function parses the provided string and returns a floating-point number.

If the parseFloat() function cannot convert the string to a number, because the string contains non-numeric characters, the method returns NaN (not a number).

Here are some examples of using the parseFloat() function.

index.js
console.log(parseFloat('100')); // ๐Ÿ‘‰๏ธ 100 console.log(parseFloat('100abc')); // ๐Ÿ‘‰๏ธ 100 console.log(parseFloat('100.5')); // ๐Ÿ‘‰๏ธ 100.5 console.log(parseFloat(10.5)); // ๐Ÿ‘‰๏ธ 10.5 console.log(parseFloat('a123')); //๐Ÿ‘‰๏ธ NaN

If you have to do this often, define a reusable function.

index.js
function parseToNumber(str) { return parseFloat(str.replaceAll(',', '')); } console.log(parseToNumber('12,000,000.50')); // ๐Ÿ‘‰๏ธ 12000000.5 console.log(parseToNumber('12,123,456')); // ๐Ÿ‘‰๏ธ 12123456

The function takes a string with commas as thousands separator and parses the string to a number.

# Parse a String with Commas to a Number using String.split()

This is a three-step process:

  1. Use the split() method to split the string on each comma.
  2. Use the join() method to join the array into a string.
  3. Use the parseFloat() function to convert the string to a number.
index.js
function parseToNumber(str) { return parseFloat(str.split(',').join('')); } console.log(parseToNumber('12,000,000.50')); // ๐Ÿ‘‰๏ธ 12000000.5 console.log(parseToNumber('12,123,456')); // ๐Ÿ‘‰๏ธ 12123456

parse string with commas to number using split

The code for this article is available on GitHub

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

index.js
const str = '12,000,000.50'; // ๐Ÿ‘‡๏ธ [ '12', '000', '000.50' ] console.log(str.split(','));

The String.split() method takes the following 2 parameters:

NameDescription
separatorThe pattern describing where each split should occur.
limitAn integer used to specify a limit on the number of substrings to be included in the array.

We split the string on each comma and joined the array without a separator.

The Array.join() method concatenates all of the elements in an array using a separator.

The only argument the Array.join() method takes is a separator - the string used to separate the elements of the array.

If the separator argument is set to an empty string, the array elements are joined without any characters in between them.
index.js
const str = '12,000,000.50'; // ๐Ÿ‘‡๏ธ 12000000.50 console.log(str.split(',').join(''));

The last step is to pass the result to the parseFloat() function to convert the string to a number.

# Parse a String with Commas to a Number using String.replace()

This is a three-step process:

  1. Use the replace() method to remove all the commas from the string.
  2. The replace method will return a new string containing no commas.
  3. Convert the string to a number.
index.js
const str = '12,000,000.50'; const num = parseFloat(str.replace(/,/g, '')); console.log(num); // ๐Ÿ‘‰๏ธ 123000000.5

parse string with commas to number using replace

The code for this article is available on GitHub

We used the replace() method to remove all of the commas from the string.

The String.replace() method returns a new string with one, some, or all matches of a regular expression replaced with the provided replacement.

The method takes the following parameters:

NameDescription
patternThe pattern to look for in the string. Can be a string or a regular expression.
replacementA string used to replace the substring match by the supplied pattern.

The forward slashes / / mark the beginning and end of the regular expression.

We only match a comma in the regular expression.

index.js
const str = '12,000,000.50'; const num = parseFloat(str.replace(/,/g, '')); console.log(num); // ๐Ÿ‘‰๏ธ 123000000.5
The code for this article is available on GitHub

The g (global) flag is used to match all occurrences of a comma in the string and not just the first occurrence.

We used an empty string for the replacement for each match to remove all commas from the string.

The last step is to use the parseFloat() function to convert the string to a number.

Which approach you pick is a matter of personal preference. I'd use the String.replaceAll() method as I find it quite direct and intuitive.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev