How to add Strings as Numbers in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 2, 2024
2 min

banner

# Add Strings as Numbers in JavaScript

To add strings as numbers:

  1. Pass each string to the Number() constructor 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

add strings as numbers

The code for this article is available on GitHub

We used the Number() constructor to convert two strings to numbers and then we 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

# Add Strings as Numbers using the unary plus (+)

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

The operator is used to convert a string to a number.

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

add strings as numbers using unary plus

The code for this article is available on GitHub

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 because it is difficult to read and implicit.

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

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

Alternatively, you can use the parseInt() or parseFloat() functions.

# Using parseInt() and parseFloat() to add strings as Numbers

If your strings end with characters, you have to use the parseInt() function instead.

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

using parseint and parsefloat to add strings as numbers

The code for this article is available on GitHub
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 function is that 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

If you want to convert the strings to floating-point numbers, use the parseFloat() function instead.

index.js
const str1 = '12.3abc'; const str2 = '23.4abc'; const result = parseFloat(str1) + parseFloat(str2); console.log(result); // ๐Ÿ‘‰๏ธ 35.7
The code for this article is available on GitHub

The parseFloat() function takes a string as a parameter, parses the string and returns a floating-point number.

index.js
const str1 = '12.3abc'; console.log(parseFloat(str1)); // ๐Ÿ‘‰๏ธ 12.3 const str2 = '23.4abc'; console.log(parseFloat(str2)); // ๐Ÿ‘‰๏ธ 23.4

As with parseInt(), the parseFloat() method ignores the non-numeric characters at the end of the string.

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