JavaScript String Concatenation: +, Template Literals, join(), and Performance Tips

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction: What Is String Concatenation in JavaScript?

JavaScript makes string manipulation extremely important. Among those operations, string concatenation is one of the most basic—and most frequently used—techniques.

For example, you often need to combine a user name with a message or merge multiple pieces of data into a single string.

In this article, we’ll walk through practical ways to concatenate strings in JavaScript. We’ll cover everything from basic techniques to real-world examples and even performance optimization, making it useful for beginners through intermediate developers.

1.1 Why String Operations Matter in JavaScript

JavaScript is essential for building dynamic web applications. String concatenation is especially useful in situations like:

• Processing user input: Organizing data entered in forms.
• Generating HTML: Building HTML dynamically and displaying it on the page.
• Combining API data: Merging multiple values retrieved from an API for display.

1.2 A Simple Example of String Concatenation

Here’s a basic example using string concatenation:

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

console.log(fullName); // Output: John Doe

As you can see, you can easily concatenate strings with the + operator. However, JavaScript also provides other convenient ways to concatenate strings, and it’s important to choose the right approach depending on the situation.

1.3 Article Structure

In this article, we’ll cover the following topics in detail:

1. Basic string concatenation methods: How to use the plus operator and template literals.
2. Advanced techniques: Concatenating arrays and mixing strings with special types.
3. Performance optimization: Best approaches when processing large amounts of data.

By the end, you’ll have the skills to handle JavaScript string concatenation confidently. From the next section, we’ll dive into specific techniques in detail.

2. Basic Techniques for Concatenating Strings in JavaScript (With Code Examples)

JavaScript provides multiple ways to concatenate strings. In this section, we’ll take a close look at the most basic and widely used techniques.

2.1 Simple Concatenation with the Plus Operator (+)

The simplest method is using the plus operator (+).

Example

let greeting = "Hello";
let name = "Taro";
let message = greeting + ", " + name + "!";

console.log(message); // Output: Hello, Taro!

Pros

• Beginner-friendly: The syntax is intuitive and easy to learn.
• Simple: You can implement it quickly with short code.

Things to Watch Out For

1. Behavior with different data types: When concatenating with numbers or null, JavaScript performs implicit type conversion, which can lead to unexpected results.

Example:

let age = 25;
let message = "Age: " + age;

console.log(message); // Output: Age: 25

2. Not ideal for large-scale processing: If you repeatedly concatenate strings inside loops, performance may degrade. We’ll discuss optimization later.

2.2 Using Template Literals (Backticks)

Template literals were introduced in ES6 (ECMAScript 2015). They use backticks (`) and allow you to embed variables and expressions directly inside strings.

Example

let greeting = "Hello";
let name = "Taro";
let message = `${greeting}, ${name}!`;

console.log(message); // Output: Hello, Taro!

Pros

• More readable: You can write variables and expressions directly inside ${}, improving code clarity.
• Multi-line strings: You can create strings with line breaks more easily.

let address = `Tokyo
Shinjuku
1-1-1`;
console.log(address);

2.3 Choosing Between the Plus Operator and Template Literals

2.4 Practical Example: Generating Dynamic HTML

Using the plus operator

let userName = "Taro";
let content = "<h1>Welcome, " + userName + "!</h1>";
document.body.innerHTML = content;

Using template literals

let userName = "Taro";
let content = `<h1>Welcome, ${userName}!</h1>`;
document.body.innerHTML = content;

2.5 Summary

In this section, we covered the following fundamental techniques for concatenating strings in JavaScript:

1. The plus operator is beginner-friendly and easy to use.
2. Template literals improve readability and are powerful for real-world use cases.

In the next section, we’ll take a closer look at the join() method for concatenating array elements.

3. Concatenating Arrays into Strings: The Complete Guide to the join() Method

In JavaScript, when you want to concatenate array elements into a single string, the join() method is extremely useful. In this section, we’ll explain everything from the basics to practical use cases.

3.1 What Is the join() Method?

The join() method concatenates array elements using a specified separator (delimiter) and returns a single string.

Basic Syntax

array.join([separator])

• array: The array to join.
• separator (optional): The separator to insert between elements. If omitted, a comma (,) is used by default.

Return Value

It returns the concatenated string.

3.2 Basic Usage of join()

Example 1: Using the default separator (comma)

let fruits = ["Apple", "Banana", "Orange"];
let result = fruits.join();

console.log(result); // Output: Apple,Banana,Orange

In this example, the comma (,) is used as the separator.

Example 2: Specifying a separator

let fruits = ["Apple", "Banana", "Orange"];
let result = fruits.join(" / ");

console.log(result); // Output: Apple / Banana / Orange

You can freely choose any separator.

3.3 Using an Empty String or a Newline as the Separator

Joining with an empty string

let letters = ["H", "e", "l", "l", "o"];
let result = letters.join("");

console.log(result); // Output: Hello

Here, the array is joined seamlessly by specifying an empty string (“”) as the separator.

Joining with a newline

let lines = ["Line 1", "Line 2", "Line 3"];
let result = lines.join("\n");

console.log(result);
/*
Output:
Line 1
Line 2
Line 3
*/

This is useful when you want to insert line breaks and format the output neatly.

3.4 Practical Examples of Turning Arrays into Strings

Example 1: Dynamically generating an HTML list

let items = ["Apple", "Banana", "Orange"];
let list = "<ul><li>" + items.join("</li><li>") + "</li></ul>";

console.log(list);
// Output: <ul><li>Apple</li><li>Banana</li><li>Orange</li></ul>

This approach makes it easy to build list markup using join().

Example 2: Creating CSV-formatted data

let data = [
  ["Name", "Age", "Gender"],
  ["Tanaka", "25", "Male"],
  ["Yamada", "30", "Female"]
];

let csv = data.map(row => row.join(",")).join("\n");

console.log(csv);
/*
Output:
Name,Age,Gender
Tanaka,25,Male
Yamada,30,Female
*/

By using join() twice, you can generate CSV data easily.

3.5 Things to Watch Out For When Using join()

1. Handling empty arrays

let emptyArray = [];
console.log(emptyArray.join(",")); // Output: (empty string)

An empty array returns an empty string. This won’t throw an error, but be careful to avoid unexpected results.

2. Type conversion

let mixedArray = [1, true, null, undefined, "string"];
console.log(mixedArray.join("-"));
// Output: 1-true--undefined-string

join() automatically converts each element to a string. In particular, note that null and undefined are treated as empty strings.

3. Performance considerations Even when concatenating large amounts of data, join() is generally considered high-performance. It’s often more efficient than manual concatenation inside loops.

3.6 Summary

In this section, we covered array-to-string concatenation using the join() method.

• We introduced the basic syntax and how to specify separators.
• We showed practical examples such as HTML generation and CSV creation.
• We explained important caveats like type conversion and handling empty arrays.

The join() method is simple yet highly flexible. Mastering it will help you manipulate strings more efficiently.

In the next section, we’ll explore more advanced techniques such as concatenating with special types (numbers, null, etc.) and error handling in detail.

4. Practical Guide: Advanced String Concatenation Techniques (Many Sample Codes)

In this section, we’ll dive into advanced techniques for string concatenation in JavaScript—especially concatenating with numbers or null and error handling.

4.1 Concatenating with Numbers and Booleans

In JavaScript, when you concatenate a string with other data types (numbers, booleans, etc.), implicit type conversion occurs automatically. Here’s how to use that behavior safely.

Example 1: Concatenating with a number

let name = "Taro";
let age = 25;

let message = name + " is " + age + " years old.";
console.log(message); // Output: Taro is 25 years old.

Since the number is automatically converted into a string, concatenation works as expected.

Caution 1: Mixing arithmetic and string concatenation

let result = 10 + 5 + " yen";
console.log(result); // Output: 15 yen

let result2 = "Price: " + 10 + 5 + " yen";
console.log(result2); // Output: Price: 105 yen

Explanation:

• In the first example, the numbers are added first, then the result is converted to a string.
• In the second example, concatenation with the initial string happens first, so the remaining numbers are treated as strings.

Solution

Use parentheses to control evaluation order explicitly.

let result = "Price: " + (10 + 5) + " yen";
console.log(result); // Output: Price: 15 yen

4.2 Error Handling When Concatenating with null or undefined

If your data includes null or undefined, concatenation can produce unintended output.

Problem Example

let name = null;
let greeting = "Hello, " + name + "!";

console.log(greeting); // Output: Hello, null!

Here, null is converted into the string "null".

Solution 1: Use a default value

let name = null || "Guest";
let greeting = "Hello, " + name + "!";

console.log(greeting); // Output: Hello, Guest!

If the value is null or undefined, using a default (here, “Guest”) prevents unexpected results.

Solution 2: Conditional handling with template literals

let name = undefined;
let greeting = `Hello, ${name ?? "Guest"}!`;

console.log(greeting); // Output: Hello, Guest!

This uses the nullish coalescing operator (??) to assign a default when the value is null or undefined.

4.3 Advanced Examples for Complex String Construction

Example 1: Dynamically concatenating information from an object

let user = {
  firstName: "Taro",
  lastName: "Yamada",
  age: 30
};

let message = `${user.firstName} ${user.lastName} is ${user.age} years old.`;
console.log(message);
// Output: Taro Yamada is 30 years old.

Template literals make it easy to output object properties cleanly.

Example 2: Creating a conditional string

let isAdmin = true;
let userName = "Taro";

let message = `${userName}${isAdmin ? " (Admin)" : ""}, welcome!`;
console.log(message);
// Output: Taro (Admin), welcome!

Explanation: This uses the ternary operator (? :) to append text based on a condition.

4.4 Practical Technique: Building Paths and URLs

Example 1: Generating a URL dynamically

let baseUrl = "https://example.com/user";
let userId = 123;
let query = "active=true";

let fullUrl = `${baseUrl}/${userId}?${query}`;
console.log(fullUrl);
// Output: https://example.com/user/123?active=true

Example 2: Normalizing a path

let folder = "images";
let file = "logo.png";

let path = [folder, file].join("/");
console.log(path); // Output: images/logo.png

Combining arrays with join() makes path construction simple and consistent.

4.5 Summary

In this section, we covered advanced techniques for JavaScript string concatenation.

• We explained caveats and safe approaches when concatenating with numbers, null, and undefined.
• We provided practical examples like conditional strings and dynamically generating output from objects.
• We showed real-world use cases such as building URLs and file paths.

By applying these techniques, you can write concise code even for complex string operations.

In the next section, we’ll explore performance and optimization tips for string concatenation. You’ll learn how to speed up processing when working with large data sets.

5. Performance and Optimization Tips: How to Speed Up String Concatenation

When concatenating strings in JavaScript, processing speed and performance can become critical—especially when dealing with large datasets or repeated operations inside loops.

In this section, we’ll explain optimization techniques for string concatenation with performance in mind.

5.1 Performance Challenges in String Concatenation

String concatenation tends to become slower as data volume increases. This is because JavaScript strings are immutable.

• Every time a new string is created, a new object is allocated in memory.
• Repeated concatenation inside loops causes frequent object creation and disposal, which can degrade performance.

Consider the following example:

let result = "";
for (let i = 0; i < 100000; i++) {
  result += "a";
}
console.log(result.length); // Output: 100000

Although this code works, it may run slowly because a new string object is created on every iteration.

5.2 Comparing Efficient Concatenation Methods

1. Plus Operator (+)

let str = "";
for (let i = 0; i < 100000; i++) {
  str += "a";
}

• Pros: Simple and intuitive.
• Cons: Performance degrades with large-scale processing.

2. Arrays with the join() Method

let arr = [];
for (let i = 0; i < 100000; i++) {
  arr.push("a");
}
let result = arr.join("");

• Pros: Arrays are mutable, so adding elements is efficient and fast.
• Cons: The code is slightly more complex.

3. Template Literals (Backticks)

let str = "";
for (let i = 0; i < 100000; i++) {
  str = `${str}a`;
}

• Pros: High readability and clean syntax.
• Cons: Performance is similar to the + operator and not ideal for large loops.

5.3 Performance Test Results

The table below shows typical benchmark results for each approach.

Result: For large-scale concatenation, using arrays with join() is significantly faster.

5.4 Best Practices for Large-Scale Data Processing

1. Small datasets → Use the + operator or template literals for simplicity.
2. Large datasets (1,000+ concatenations) → Use arrays with join() for better performance.
3. Dynamic data generation (HTML or JSON) → Use template literals to balance readability and efficiency.

5.5 Additional Optimization Techniques

1. Precompiling and caching

• Store frequently used strings in variables or constants and reuse them.

1. Batch processing

• Process data in chunks instead of concatenating everything at once to reduce load.

1. Using third-party libraries

• High-performance utility libraries (e.g., Lodash) can provide optimized string handling.

5.6 Summary

In this section, we explored performance challenges and optimization techniques for string concatenation.

• For small-scale operations, + operators and template literals are convenient.
• For large-scale processing, arrays with join() deliver substantial performance gains.
• Thoughtful code design and selective library usage can further improve efficiency.

In the next section, we’ll answer frequently asked questions (FAQ) about JavaScript string concatenation.

6. Frequently Asked Questions (FAQ): Solving Common JavaScript String Concatenation Issues

In this section, we address common questions and practical concerns about JavaScript string concatenation in a Q&A format.

Q1: Should I use the + operator or the join() method?

A1: Choose based on the operation type and data size.

• + operator
  Best for small-scale and simple concatenation due to its readability and ease of use.

let firstName = "Taro";
let lastName = "Yamada";
let fullName = firstName + " " + lastName;
console.log(fullName); // Output: Taro Yamada

• join() method
  Ideal for concatenating array elements or handling large datasets where performance matters.

let words = ["Hello", "World"];
let sentence = words.join(" ");
console.log(sentence); // Output: Hello World

Key Point:

Small strings → use +

Large lists or datasets → use join()

Q2: When should I use template literals?

A2: When building complex or dynamic strings.

Template literals use backticks (`) and allow easy variable interpolation.

let name = "Taro";
let age = 25;
let message = `${name} is ${age} years old.`;
console.log(message);

Recommended use cases:

• HTML generation: Building dynamic markup.
• Multi-line strings: Handling text with line breaks.
• Variable interpolation: Improving readability.

Q3: Will concatenating numbers without conversion cause errors?

A3: No errors occur, but implicit type conversion requires caution.

JavaScript automatically converts numbers to strings during concatenation.

let age = 30;
let message = "Age: " + age;
console.log(message); // Output: Age: 30

However, mixing arithmetic and concatenation can lead to unexpected results.

let result = "Total: " + 10 + 20;
console.log(result); // Output: Total: 1020

Solution:

let result = "Total: " + (10 + 20);
console.log(result); // Output: Total: 30

Q4: What happens when concatenating with null or undefined?

A4: They are stringified, which may produce unintended output.

let value = null;
let message = "Value: " + value;
console.log(message); // Output: Value: null

Solution:

let value = null || "Not set";
let message = `Value: ${value}`;
console.log(message); // Output: Value: Not set

Q5: Which method is best for performance?

A5: Arrays with join() are best for large datasets.

6.6 Summary

In this FAQ section, we answered common questions about JavaScript string concatenation.

• Choose between + and join() based on data size.
• Use template literals for readable and dynamic string construction.
• Always handle type conversion and null values carefully.

By following these guidelines, you can write safe, efficient, and practical code.

In the next section, we’ll conclude the article by summarizing how to choose the optimal string concatenation method for different scenarios.

7. Conclusion: Choosing the Optimal String Concatenation Method

In this article, we explored JavaScript string concatenation from the basics to advanced techniques and performance optimization. In this final section, we’ll review the key points and reaffirm the best concatenation method for each scenario.

7.1 Characteristics and Use Cases of Each Method

7.2 Recommended Methods by Scenario

1. Simple string concatenation (e.g., names or short messages)
   → Use the + operator or template literals.
2. Multi-line strings or HTML generation (e.g., tables or lists)
   → Use template literals for better readability.
3. Dataset concatenation or CSV generation
   → Use the join() method for speed and efficiency.
4. Large-scale concatenation inside loops (e.g., logs or reports)
   → Combine arrays with join() to optimize performance.

7.3 Common Pitfalls and How to Avoid Them

1. Handling null and undefined

• Assign default values or use the nullish coalescing operator (??) before concatenation.

2. Mixing arithmetic with string concatenation

• Wrap numeric calculations in parentheses to ensure correct evaluation order.

3. Performance degradation

• Use the + operator for small data and join() for large-scale processing.

7.4 Next Learning Steps

Building on what you’ve learned in this article, consider exploring the following topics to further strengthen your JavaScript skills:

• Regular expressions and string manipulation: Useful for search and replace operations.
• Advanced error handling: Writing safer and more robust code.
• Modern ES6+ features: Combining string handling with methods like map() and the spread operator.
• Third-party libraries: Leveraging utilities like Lodash for efficient data processing.

7.5 Key Takeaways

1. Understand the fundamentals

• Use the plus operator or template literals for simple concatenation.

1. Apply advanced techniques

• Use arrays and join() to handle large datasets efficiently.

1. Optimize for performance

• Select the appropriate method based on data size and processing needs.

1. Practice error handling

• Safely handle null, undefined, and type conversion issues.

7.6 Put It into Practice

By reading this article, you should now have a solid understanding of both basic and advanced JavaScript string concatenation techniques.

Apply these concepts in real projects, experiment with different approaches, and refine your ability to choose the most efficient and readable solution for each situation.

As a next step, consider tackling more complex data processing or API integrations while continuing to optimize your code for clarity and performance.