How to add Strings as Numbers in JavaScript

# 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.

Copied!
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() constructor to convert two strings to numbers and then we added them using the addition (+) operator.

Copied!
console.log(5 + '10'); // 👉️ 510

You can use this approach to add multiple strings as numbers.

Copied!
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.

Copied!
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.

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

Copied!
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.

Copied!
const str1 = '5a';
const str2 = '15b';

const result = parseInt(str1, 10) + parseInt(str2, 10);

console.log(result); // 👉️ 20

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.

Copied!
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.

Copied!
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.

Copied!
const str1 = '12.3abc';
const str2 = '23.4abc';

const result = parseFloat(str1) + parseFloat(str2);
console.log(result); // 👉️ 35.7

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

Copied!
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.