How to Concatenate Strings in JavaScript: Simple Methods Explained

In JavaScript, you can concatenate strings using the + operator, the concat() method, or template literals with backticks `. Template literals allow embedding variables easily using ${variable} syntax. These methods combine multiple strings into one.

Syntax

There are three common ways to concatenate strings in JavaScript:

• Using the + operator: Joins two or more strings by placing + between them.
• Using the concat() method: Calls concat() on a string and passes other strings as arguments.
• Using template literals: Enclose the string in backticks ` and embed variables or expressions inside ${}.

javascript

let str1 = "Hello";
let str2 = "World";

// Using + operator
let result1 = str1 + " " + str2;

// Using concat() method
let result2 = str1.concat(" ", str2);

// Using template literals
let result3 = `${str1} ${str2}`;

Example

This example shows how to join two strings using all three methods and prints the results.

javascript

const firstName = "Jane";
const lastName = "Doe";

// Using + operator
const fullName1 = firstName + " " + lastName;
console.log(fullName1);

// Using concat() method
const fullName2 = firstName.concat(" ", lastName);
console.log(fullName2);

// Using template literals
const fullName3 = `${firstName} ${lastName}`;
console.log(fullName3);

Output

Jane Doe
Jane Doe
Jane Doe

Common Pitfalls

Some common mistakes when concatenating strings include:

• Forgetting spaces between words, which causes words to stick together.
• Using + with non-string types without converting them, which can lead to unexpected results.
• Not using backticks for template literals, which causes syntax errors.

Always ensure spaces are added explicitly if needed, and use template literals for clearer syntax.

javascript

let a = "Hello";
let b = "World";

// Wrong: missing space
let wrong = a + b;
console.log(wrong); // HelloWorld

// Right: add space
let right = a + " " + b;
console.log(right); // Hello World

Output

HelloWorld
Hello World

Quick Reference

Method	Syntax	Notes
Plus operator	`str1 + str2`	Simple and common for joining strings
concat() method	`str1.concat(str2, str3)`	Can join multiple strings at once
Template literals	` `${var1} text ${var2}` `	Supports embedding variables and expressions

Key Takeaways

Use the + operator or template literals to join strings easily in JavaScript.

Template literals with backticks allow embedding variables clearly and support multi-line strings.

Always add spaces explicitly when concatenating words to avoid them sticking together.

The concat() method can join multiple strings but is less commonly used than + or template literals.

Avoid mixing string and non-string types without conversion to prevent unexpected results.