Skip to main content

How to Concatenate Two Numbers in JavaScript

In JavaScript, the + operator is used for both numerical addition and string concatenation. This dual-purpose can be confusing when you want to join two numbers as strings (e.g., combining 1 and 2 to get '12', not the number 3). The key is to ensure that at least one of the operands is a string to trigger the concatenation behavior.

This guide will teach you the most effective and readable methods for concatenating numbers. We'll cover the modern and highly recommended approach using template literals, as well as the classic methods of using the String() constructor or an empty string.

The Core Problem: Addition vs. Concatenation​

The + operator in JavaScript will perform numerical addition if both operands are numbers.

For example, we want to concatenate two numbers instead of summing them:

// Problem: This adds the numbers instead of concatenating them.
const num1 = 1;
const num2 = 2;

const result = num1 + num2;
console.log(result); // Output: 3 (a number)
note

To achieve concatenation, we must first convert at least one of the numbers to a string.

Template literals are the cleanest, most readable, and most powerful way to construct strings in modern JavaScript. They are enclosed in backticks (`) and automatically convert any embedded expressions into strings.

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

const num1 = 1;
const num2 = 2;

// Using a template literal to concatenate the numbers
const result = `${num1}${num2}`;

console.log(result);         // Output: '12'
console.log(typeof result);  // Output: 'string'
note

This method is highly intuitive and can be used to combine any number of variables and strings.

The Classic Method: Explicit String Conversion​

Before template literals, the standard way to force concatenation was to explicitly convert one of the numbers to a string.

Method A: Using the String() Constructor​

This is a very clear and explicit method.

const num1 = 1;
const num2 = 2;

const result = String(num1) + String(num2);
console.log(result); // Output: '12'

Method B: The Empty String Trick​

A common shortcut is to start the expression with an empty string (''). This forces the + operator to perform string concatenation for the entire expression that follows.

const num1 = 1;
const num2 = 2;

const result = '' + num1 + num2;
console.log(result); // Output: '12'
warning

Crucial Pitfall: The empty string must be at the beginning. If it's at the end, the addition will happen first.

const result = num1 + num2 + ''; // This results in '3'

The Array.join() Method (for Multiple Numbers)​

If you have an array of numbers that you want to join together, the Array.prototype.join() method is the perfect tool.

const numbers = [1, 2, 3, 4, 5];

// The empty string argument tells .join() to use no separator.
const result = numbers.join('');

console.log(result); // Output: '12345'
note

This is the most idiomatic way to concatenate all the elements of an array.

Conclusion​

For concatenating numbers in JavaScript, the method you choose can greatly impact code readability.

  • The recommended best practice is to use template literals (e.g., `${num1}${num2}`). They are the most modern, readable, and flexible solution.
  • The classic methods of explicitly converting to a string (String(num1) + ...) or using the empty string trick ('' + num1 + ...) are functional but less elegant.
  • For concatenating all numbers within an array, the array.join('') method is the definitive choice.

Table of Contents