How to add Strings as Numbers in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Acy Varlan

Add Strings as Numbers in JavaScript #

To add strings as numbers:

  1. Pass each string to the Number object to convert it to a number.
  2. Use the addition (+) operator , e.g. Number('1') + Number('2').
  3. The addition operator will return the sum of the numbers.
index.js
const str1 = '5'; const str2 = '15'; const result = Number(str1) + Number(str2); console.log(result); // ๐Ÿ‘‰๏ธ 20 console.log(typeof result); // ๐Ÿ‘‰๏ธ number

We used the Number object to convert two strings to numbers and added them using the addition (+) operator.

Note that all strings have to be converted to numbers before using the addition (+) operator, otherwise it converts the number to a string and concatenates the strings.
index.js
console.log(5 + '10'); // ๐Ÿ‘‰๏ธ 510

You can use this approach, as many times as you need to:

index.js
const str1 = '5'; const str2 = '10'; const str3 = '15'; const result = Number(str1) + Number(str2) + Number(str3); console.log(result); // ๐Ÿ‘‰๏ธ 30

Another very common way to do this is to use the unary plus (+) operator.

Add Strings as Numbers using unary plus (+) #

To add strings as numbers, use the unary plus (+) operator to convert each string to a number and add the numbers using the addition (+) operator, e.g. +'5' + +'10'

index.js
const str1 = '5'; const str2 = '15'; const result = +str1 + +str2; console.log(result); // ๐Ÿ‘‰๏ธ 20

The unary plus (+) operator tries to convert a value into a number.

This approach is quite harder to read, because we have 2 unary plus (+) operators and an addition (+) operator in the middle.

I wouldn't recommend using this approach, however you might see it used so it's good to know about it.

Both of these examples convert the string to a number. One uses the unary plus (+) approach and the other uses the Number object.

index.js
const n1 = +'100'; console.log(n1); // ๐Ÿ‘‰๏ธ 100 console.log(typeof n1); // ๐Ÿ‘‰๏ธ number const n2 = Number(100); console.log(n2); // ๐Ÿ‘‰๏ธ 100 console.log(typeof n2); // ๐Ÿ‘‰๏ธ number

If your strings end with characters, you have to use the parseInt method instead.

index.js
const str1 = '5a'; const str2 = '15b'; const result = parseInt(str1, 10) + parseInt(str2, 10); console.log(result); // ๐Ÿ‘‰๏ธ 20
Because our strings end with non-numeric characters, we can't directly convert them to a number.

Instead, we use the parseInt method. We pass the following 2 parameters to the method:

  1. a string we want to parse to a number
  2. the radix - the default value is not 10, so we have to explicitly pass it

An easy way to think about the parseInt method is - we're basically taking as many digits as we can from the beginning of the string, ignoring the rest and converting the value to a number.

index.js
const s1 = parseInt('5abc', 10); console.log(s1); // ๐Ÿ‘‰๏ธ 5 console.log(typeof s1); // ๐Ÿ‘‰๏ธ number

This wouldn't work if the non-numeric characters were at the beginning of the string.

index.js
const s1 = parseInt('abc5', 10); console.log(s1); // ๐Ÿ‘‰๏ธ NaN

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee