How to concatenate strings in JavaScript

let fullName = ${firstName} ${lastName};
console.log(fullName); // Outputs: Joel Spolsky
</pre>

<p>This syntax is cleaner, and you don’t have to worry about adding spaces manually. You can embed any expression inside the placeholders, which makes it incredibly versatile:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let age = 42;
let message = Age: ${age};
console.log(message); // Outputs: Age: 42
</pre>

<p>Template literals also allow for multi-line strings, which is a huge improvement over using <code>+</code> to concatenate strings across lines:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let greeting = Hello, ${firstName} ${lastName}!
Welcome to the site.;
console.log(greeting);
/* Outputs:
Hello, Joel Spolsky!
Welcome to the site.
*/
</pre>

<p>However, while template literals enhance readability, they also come with some quirks. For instance, if you try to use an expression that evaluates to <code>null</code> or <code>undefined</code>, it will be converted to the string "null" or "undefined", similar to the <code>+</code> operator:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let middleName = null;
let fullNameWithMiddle = ${firstName} ${middleName} ${lastName};
console.log(fullNameWithMiddle);
// Outputs: Joel null Spolsky
</pre>

<p>To avoid this, you might still want to use default values or checks, just as you would with concatenation:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let middleNameSafe = middleName || "";
let fullNameWithSafeMiddle = ${firstName} ${middleNameSafe} ${lastName};
console.log(fullNameWithSafeMiddle);
// Outputs: Joel Spolsky
</pre>

<p>Another thing to keep in mind is that template literals are not just for simple string construction. You can also perform complex expressions right inside the placeholders:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let x = 5;
let y = 10;
console.log(The sum of ${x} and ${y} is ${x + y}.);
// Outputs: The sum of 5 and 10 is 15.
</pre>

console.log(firstName + lastName); // Outputs: JoelSpolsky (missing space)
console.log(${firstName}${lastName}); // Outputs: JoelSpolsky (also missing space)
</pre>
<p>Always remember to explicitly add spaces where needed, either with a string containing a space or inside the template literal:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
console.log(firstName + " " + lastName); // Correct: Joel Spolsky
console.log(${firstName} ${lastName}); // Correct: Joel Spolsky
</pre>
<p>Another subtle trap is the difference between <code>null</code>, <code>undefined</code>, and empty strings. When interpolated or concatenated, these values become the strings "null" or "undefined", which can pollute your output:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let middleName = undefined;

console.log(${firstName} ${middleName} ${lastName});
// Outputs: Joel undefined Spolsky
</pre>
<p>To avoid this, explicitly check or sanitize your values before concatenation or interpolation:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let middleNameSafe = middleName ?? ""; // Using nullish coalescing operator

console.log(${firstName} ${middleNameSafe} ${lastName});
// Outputs: Joel Spolsky
</pre>
<p>Beware of operator precedence and the left-to-right evaluation order when mixing numbers and strings with the plus operator. This often leads to unexpected concatenation instead of numeric addition:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
console.log("10" + 5 + 3); // Outputs: 1053
console.log(10 + 5 + "3"); // Outputs: 153
</pre>
<p>To fix this, use parentheses to force the intended operation:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
console.log("10" + (5 + 3)); // Outputs: 108
console.log((10 + 5) + "3"); // Outputs: 153
</pre>
<p>When using template literals, watch out for unintended line breaks or extra spaces introduced by formatting your code. For instance:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let message = Hello,
${firstName}!
Welcome to the site.;
console.log(message);
/* Outputs:
Hello,
Joel!
Welcome to the site.
*/
</pre>
<p>If you want to avoid the line break after "Hello,", write it all on one line or use string trimming methods:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let message = Hello, ${firstName}! Welcome to the site.;
console.log(message); // Outputs: Hello, Joel! Welcome to the site.
</pre>
<p>Another gotcha is escaping backticks inside template literals. Since backticks delimit the template, if you need to include one inside the string, you must escape it with a backslash:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let quote = He said, Hello!;
console.log(quote); // Outputs: He said, Hello!
</pre>
<p>Failing to escape will cause a syntax error.</p>
<p>Also, remember that template literals do not automatically escape HTML or special characters. If you’re generating HTML or user-facing content, sanitize interpolated values to prevent injection attacks:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
let userInput = "<script>alert('xss')</script>";
let safeOutput = ${userInput}; // This will render raw HTML/JS, which can be dangerous
</pre>
<p>Use libraries or functions to escape these strings before interpolation in such cases.</p>
<p>Performance-wise, template literals and plus operator concatenation are roughly equivalent for small to medium strings. However, avoid building large strings in loops with either method; using <code>Array.join()</code> or string builders can be more efficient:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
console.log(firstName + " " + lastName); // Correct: Joel Spolsky
console.log(${firstName} ${lastName}); // Correct: Joel Spolsky
</pre>0
<p>This approach minimizes intermediate string creation and is more memory-friendly.</p>
<p>Finally, watch out for the temptation to embed complex logic inside template literals. While you can do this, overly complicated expressions inside <code>${}</code> make your code harder to read and maintain:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="js">
console.log(firstName + " " + lastName); // Correct: Joel Spolsky
console.log(${firstName} ${lastName}`); // Correct: Joel Spolsky

Separating logic from presentation keeps code cleaner and debugging easier.