How to add Strings as Numbers in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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 to add multiple strings as numbers.

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 to a number.

This becomes hard to read because we have 2 unary plus (+) operators and an addition (+) operator.

I wouldn't recommend using this approach. However, the unary plus operator is often used by developers, so it's good know about.

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
Our strings end with non-numeric characters, so we can't directly convert them to numbers.

Instead, we used the parseInt method.

The method takes the following 2 parameters:

  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 take as many digits as we can from the beginning of the string, ignore the rest and convert 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 #

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.