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 +.

constfirstName="Alex";
constmessage="Hello, "+firstName;

console.log(message);

Chain multiple values when needed:

constgreeting="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.

constfirstName="Alex";
constmessage=`Hello,${firstName}`;

console.log(message);

Insert expressions directly:

constprice=20;
constresult=`Total: $${price*1.2}`;

console.log(result);

Multi-line strings also work naturally:

constproduct="Laptop";
constprice=1200;

constreceipt=`Product:${product}
Price: $${price}`;

console.log(receipt);

Step 3: Use the concat() method

Strings also support concat().

constpart1="Hello";
constpart2=" world";

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

Pass multiple pieces at once:

consttext="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

constfirstName="Sara";
constlastName="Connor";

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

Example 2: Create a dynamic URL

constuserId=42;
constprofileUrl=`https://example.com/user/${userId}`;

console.log(profileUrl);

Example 3: Combine array values into a sentence

constitems= ["apples","bananas","oranges"];
constsentence="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:

constname="Alex";
constmessage="Hello,"+name;

Why it breaks:

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

Correct approach:

constmessage="Hello, "+name;

Or:

constmessage=`Hello,${name}`;

Mistake 2: Mixing numbers and strings incorrectly

What you might do:

constresult=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:

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

If you meant math first, make it obvious:

constresult="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.