How to Add Strings as Numbers in JavaScript

A classic "gotcha" in JavaScript is what happens when you try to add two "numbers" that are actually strings. Instead of mathematical addition, the + operator will perform string concatenation, leading to unexpected results.

This guide will explain why this happens and teach you the modern, standard methods for correctly converting strings to numbers before performing addition. You will learn how to use the Number() constructor for clean conversions and parseInt()/parseFloat() for more complex parsing.

The Core Problem: Concatenation vs. Addition

The addition operator (+) in JavaScript is overloaded. It performs two different operations depending on the types of the operands:

• If both operands are numbers, it performs mathematical addition.
• If at least one operand is a string, it converts the other operand to a string and performs concatenation.

This example shows a very common bug for beginners.

const str1 = '5';
const str2 = '15';

// This performs string concatenation, not addition.
const result = str1 + str2;

console.log(result); // Output: "515" (This is wrong!)

The Solution (Recommended): Explicit Conversion with Number()

The Number() constructor, when called as a function, is the standard and most readable way to convert a string to a number.

For example, we have two numeric strings and we want to find their mathematical sum.

// Problem: How to get 20 from these two strings?
const str1 = '5';
const str2 = '15';

The solution is to convert each string to a number before using the + operator.

const str1 = '5';
const str2 = '15';

// Convert each string to a number before adding
const result = Number(str1) + Number(str2);

console.log(result);        // Output: 20
console.log(typeof result); // Output: "number"

Handling Non-Numeric Strings with parseInt() and parseFloat()

What if your string contains non-numeric characters (e.g., "10px")? The Number() constructor will return NaN (Not-a-Number) in this case. If your goal is to parse a number from the beginning of a string, you should use parseInt() or parseFloat().

• parseInt(string, radix): Parses an integer from the start of a string.
• parseFloat(string)`: Parses a floating-point number from the start of a string.

Solution:

const str1 = '10.5px';
const str2 = '20rem';

// parseInt stops at the first non-digit character.
const intSum = parseInt(str1, 10) + parseInt(str2, 10);
console.log(intSum);    // Output: 30

// parseFloat stops at the first invalid character for a float.
const floatSum = parseFloat(str1) + parseFloat(str2);
console.log(floatSum);  // Output: 30.5

A Note on an Unreadable Alternative (Unary Plus +)

You will often see the unary plus (+) operator used as a shorthand for converting a string to a number.

// This works, but can be hard to read.
const result = +str1 + +str2;

Conclusion

Adding strings as numbers in JavaScript requires a clear, explicit type conversion to avoid the common pitfall of string concatenation.

• The Number() constructor is the recommended best practice for converting clean numeric strings into numbers. It is explicit and highly readable.
• Use parseInt() or parseFloat() when you need to parse a number from the beginning of a string that may contain non-numeric characters.
• Avoid the unary plus (+) operator in favor of Number() for better code clarity.