Skip to main content

How to Concatenate a String with a Variable in JavaScript

Combining static text with the dynamic value of a variable is one of the most fundamental operations in programming. Whether you're building a greeting message, constructing a filename, or creating a dynamic URL, you need a reliable way to join strings together. JavaScript provides two primary methods for this: the classic addition (+) operator and modern template literals.

This guide will teach you both methods, explain the critical pitfall of using the + operator with numbers, and show why template literals are the recommended best practice in modern JavaScript.

The Classic Method: The Addition (+) Operator​

The traditional way to concatenate strings in JavaScript is with the addition (+) operator. When used with strings, it joins them together to form a new, single string.

Problem: we have a variable and need to embed it within a sentence.

// Problem: How to insert the 'name' variable into a greeting?
const name = 'World';

Solution: you can chain multiple strings and variables together.

const name = 'World';

const greeting = 'Hello, ' + name + '!';

console.log(greeting); // Output: "Hello, World!"
note

This method is simple and works in all versions of JavaScript, but it can become clumsy and hard to read with many variables.

Introduced in ES6, template literals (also known as template strings) are the modern and preferred way to handle string interpolation. They are more readable, more powerful, and less prone to common errors.

A template literal is enclosed in backticks (`), not single or double quotes. Variables or expressions can be embedded directly into the string using the ${...} syntax.

Problem: same as before, we need to embed a variable within a sentence.

// Problem: How to insert the 'name' variable into a greeting?
const name = 'World';

Solution: the syntax is cleaner and more intuitive.

const name = 'World';

const greeting = `Hello, ${name}!`;

console.log(greeting); // Output: "Hello, World!"

You can also embed any valid JavaScript expression inside the ${} placeholder.

const str = `${50 + 50} percent`;
console.log(str); // Output: "100 percent"

Because of their superior readability and power, template literals are the recommended best practice.

The Pitfall: Type Coercion with the + Operator​

The biggest drawback of the addition (+) operator is that it has a dual purpose: it performs both string concatenation and numeric addition. If one of the operands is a string, JavaScript will coerce the other to a string, which can lead to unexpected bugs.

This is a classic example of code with bug for beginners.

const num1 = 100;
const num2 = '100';

const result = num1 + num2;

console.log(result); // Output: "100100"

Instead of adding the numbers, JavaScript converted the number 100 to the string "100" and concatenated them.

Solution: to perform addition, you must ensure both operands are numbers by explicitly converting the string.

const num1 = 100;
const num2 = '100';

const result = num1 + Number(num2);

console.log(result); // Output: 200
note

Template literals do not have this ambiguity. They only perform string interpolation, making your code safer and more predictable.

Conclusion​

JavaScript provides two primary ways to concatenate strings and variables, each with its own use case.

  • The addition (+) operator is the classic method. It works but can be less readable and is prone to type coercion bugs when mixing strings and numbers.
  • Template literals (`Hello, ${name}!`) are the modern and recommended best practice. They are more readable, more powerful, and avoid the ambiguity of the + operator, leading to safer and cleaner code.

For new JavaScript development, you should prefer template literals whenever you need to construct strings with variables.

Table of Contents