Skip to main content

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!)
note

To get the correct sum, you must explicitly convert the strings to numbers before you add them.

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"
note

This is the recommended best practice for its clarity and predictability.

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
note

Important: These functions only work if the string starts with a number. parseInt('abc10') will return NaN.

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;
note

While this is functionally equivalent to using Number(), the Number() constructor is generally preferred for its readability. The line Number(str1) + Number(str2) is much clearer and less ambiguous than +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.

Table of Contents