JavaScript String Concatenation: `+` vs Template Literals vs .join()

The "best" way to concatenate strings in JavaScript depends on what you're doing, but for modern JavaScript, template literals are usually the cleanest and most readable option.

Let's break down the three main methods, their performance, and when to use each.

---

1. Template Literals (ES6+)

Use backticks and ${} to embed variables directly into a string.

const firstName = "Alice";
const lastName = "Smith";
const greeting = `Hello, ${firstName} ${lastName}!`;

This is generally the best approach because it's readable, avoids messy quote escaping, and allows for multi-line strings without special characters.

---

2. The + Operator

The classic way. It works fine for simple combinations but gets messy fast.

const greeting = "Hello, " + firstName + " " + lastName + "!";

If you have lots of variables or need to mix single and double quotes, it becomes hard to read.

---

3. Array .join()

Best for concatenating a large list of items or when building strings in a loop.

const words = ["Hello", firstName, lastName];
const greeting = words.join(" ") + "!";

This is highly performant for large datasets because you aren't creating a new string in memory with every single concatenation operation.

---

Performance Considerations

In older browsers, + was slow for large loops because strings are immutable. Every time you concatenate, it creates a new string in memory. Array .join() was the standard performance fix.

However, modern JavaScript engines (like V8 in Chrome and Node.js) have optimized the + operator using "ropes" (a data structure that defers string copying). In most modern environments, template literals and + are fast enough for everyday use.

---

When to use which

• Template literals: Default choice for 99% of cases.
• + operator: Simple, single-line combinations.
• .join(): Huge loops or building strings from arrays.

---

Converting Legacy Code

If you're modernizing a codebase, converting old + concatenations to template literals makes the code much easier to read. But doing it by hand for hundreds of lines is error-prone—it's easy to miss a backtick or a dollar sign.

If you want to quickly convert standard string concatenation into ES6 template literals (or vice versa), I built a free JS String Concatenation Utility.

Try it here

100% client-side. Nothing uploaded.

---

What's your go-to method for string concatenation? Do you use template literals exclusively, or do you still use +? Let me know in the comments.