How to Concatenate Strings in JavaScript

What you’ll build or solve

You’ll combine two or more strings into one readable result.

When this approach works best

Concatenating strings works best when you:

• Build user-facing messages like “Hello, Alex”.
• Combine dynamic values like names, prices, or IDs.
• Create URLs or file paths from smaller parts.
• Format console output for debugging.

Avoid manual concatenation when you generate complex HTML. In those cases, use templates or a rendering approach to reduce errors.

Prerequisites

• A browser or Node.js installed
• Basic understanding of variables and strings

No additional setup is required.

Step-by-step instructions

Step 1: Use the + operator

The most common way to concatenate strings is with +.

const firstName = "Alex";
const message = "Hello, " + firstName;

console.log(message);

Chain multiple values when needed:

const greeting = "Hello" + ", " + "world" + "!";
console.log(greeting);

What to look for:

JavaScript will auto-convert non-strings when you use + with a string.

Step 2: Use template literals

Template literals are easier to read when you insert variables. They use backticks.

const firstName = "Alex";
const message = `Hello, ${firstName}`;

console.log(message);

Insert expressions directly:

const price = 20;
const result = `Total: $${price * 1.2}`;

console.log(result);

Multi-line strings also work naturally:

const product = "Laptop";
const price = 1200;

const receipt = `Product: ${product}
Price: $${price}`;

console.log(receipt);

Step 3: Use the concat() method

Strings also support concat().

const part1 = "Hello";
const part2 = " world";

const result = part1.concat(part2);
console.log(result);

Pass multiple pieces at once:

const text = "JavaScript".concat(" is ", "fun");
console.log(text);

concat() is less common than + or template literals, but it’s still valid.

Examples you can copy

Example 1: Build a full name

const firstName = "Sara";
const lastName = "Connor";

const fullName = firstName + " " + lastName;
console.log(fullName);

Example 2: Create a dynamic URL

const userId = 42;
const profileUrl = `https://example.com/user/${userId}`;

console.log(profileUrl);

Example 3: Combine array values into a sentence

const items = ["apples", "bananas", "oranges"];
const sentence = "I bought " + items.join(", ");

console.log(sentence);

What to look for:

join() is usually better than building a string by hand when you already have an array.

Common mistakes and how to fix them

Mistake 1: Forgetting spaces

What you might do:

const name = "Alex";
const message = "Hello," + name;

Why it breaks:

You get "Hello,Alex" because you never added a space.

Correct approach:

const message = "Hello, " + name;

Or:

const message = `Hello, ${name}`;

Mistake 2: Mixing numbers and strings incorrectly

What you might do:

const result = 5 + 5 + " apples";
console.log(result);

Why it breaks:

Order matters. JavaScript adds numbers first, then concatenates, so you get "10 apples".

Correct approach:

If you meant string concatenation the whole time:

const result = `${5}${5} apples`;
console.log(result);

If you meant math first, make it obvious:

const result = "Total: " + (5 + 5);
console.log(result);

What to look for:

Once a string is involved, + becomes concatenation, and JavaScript may auto-convert values for you.

Troubleshooting

• If you see unexpected math results, add parentheses to control order, or use a template literal.
• If ${} prints literally, you used quotes instead of backticks.
• If your output smashes words together, check for missing spaces in your string pieces.
• If you’re combining array values, prefer items.join(", ") over repeated +.

Quick recap

• Use + for quick, simple joins.
• Use template literals for readability and multiple variables.
• Use concat() as a method-based alternative.
• Watch type coercion and operator order when mixing strings and numbers.
• Use join() when combining arrays into a string.