Javascript: How to Concatenate Strings

Javascript concatenate strings: Joining strings together in Javascript is known as concatenation. Concatenation allows you to combine multiple string values to form a single new string. There are a few different ways to concatenate strings in Javascript – let’s take a look!

The Addition Operator (+)

The most common method of concatenating strings in Javascript is to use the addition operator (+). The + operator can be used to add numbers together, but when used with strings, it will concatenate them:

let string1 = "Hello";
let string2 = "World";

let concatenated = string1 + " " + string2;

console.log(concatenated); // "Hello World"

As you can see, using the + operator allows us to join multiple strings with spaces to form a new, concatenated string.

The + operator is great for simple concatenation, but it can get messy when you need to join a lot of strings together. For those cases, template literals and concat() are better options.

Template Literals

Template literals were introduced in ES6 and provide an easy way to do string interpolation and concatenation. Template literals are enclosed by backticks (``) instead of quotes (‘ or “), allowing you to embed expressions and variables directly inside the literal:

let string1 = "Hello";
let string2 = "World";

let concatenated = `${string1} ${string2}`; 

console.log(concatenated); // "Hello World"

The ${expression} syntax allows us to directly reference variables or expressions inside the template literal. When interpolated, it will be concatenated into the final string.

Template literals make concatenation much cleaner when there are several variables to concatenate.

The concat() Method

The concat() method can be used to concatenate strings together by “chaining” multiple calls:

let string1 = "Hello";
let string2 = "World";

let concatenated = string1.concat(" ").concat(string2);

console.log(concatenated); // "Hello World"

concat() is a method on the String prototype, so it can be called directly on any string. Each call concatenates the argument passed to the end of the string.

This method is especially useful for concatenating strings stored in an array:

let strings = ["Hello", "World"];

let concatenated = strings.reduce((accumulator, currentValue) => {
  return accumulator.concat(" ").concat(currentValue);
}, "");

console.log(concatenated); // "Hello World"

By using concat() with reduce(), we can loop through the array and concatenate each value onto the accumulated string.

Performance Differences

The different methods of concatenating strings don’t have a huge performance difference for small numbers of operations.

However, once you start concatenating thousands or even millions of strings, the + operator becomes much slower than template literals or concat().

This is because the + operator creates a new string for each concatenation, while template literals and concat() modify the string in-place.

In performance critical code, it’s best to test and use whichever method is fastest for your specific use-case.

Conclusion

• The + operator provides a simple way to concatenate, but gets messy with multiple variables
• Template literals make concatenation cleaner and support string interpolation
• concat() can “chain” multiple calls to build a concatenated string
• For huge numbers of concatenations, template literals and concat() are faster than the + operator

Hopefully this gives you a few options to choose from when you need to concatenate strings in Javascript! Let me know if you have any other questions.

Also Read: iPhone vs Android 2023: How the Best Phones Compare and 4 New Features From Each