How to Concat Strings in JavaScript?

You are required to concat strings in JavaScript, yet you don’t know how? Well, just keep on reading!

In this article, we will discuss how to concatenate strings of arrays in JavaScript and provide you with a clear guide on using the JavaScript concat string operation in your code effectively.

Let’s get started and discover different approaches to concatenating strings in JS.

What is string concatenation in JavaScript?

String concatenation in JavaScript means putting multiple strings together to create a single string.

You can do this using the + operator or the concat() method. These methods allow you to combine strings and work with text in different ways.

What is concat() method?

The concat() method is used to combine two or more strings together and create a new string. It’s a straightforward way to combine text.

If you used the concat() method, the original strings remain unchanged. After using the concat() method, a new string is returned.

Here’s the syntax for concat() method:

string.concat(string1, string2, ..., stringN)

Parameters:

Return value:

You will get a new string that includes all the strings you combined together.

Browser supports:

✅ Chrome
✅ Edge
✅ Firefox
✅ Safari
✅ Opera
✅ IE (Internet explorer do not support is not support template literal, but the rest of the method is good.)

How to concat strings in JavaScript?

There are several ways or method which we can use to string concat in JavaScript.

1. Use the concat() method

As what we mentioned above, the concat() method is a built-in method of the string object that that is used to concatenates two or more strings to the calling string and returns a new string.

Here’s an example:

const str1 = "It";
const str2 = "sourcecode";
const result = str1.concat(str2);
console.log(result);

In this example, we use the concat() method to concatenate the strings “It” and “sourcecode” into a single string “Itsourcecode.”

Output:

Itsourcecode

We can also try to concatenate strings with space. Here’s the example:

const str1 = "Hi";
const str2 = "Welcome";
const str3 = "to";
const str4 = "Itsourcecode!";

const result = str1.concat(' ', str2, ' ', str3 , ' ', str4);
console.log(result); // 'Hi Welcome to Itsourcecode'

In this example, we concatenate several strings into a single string using the concat() method.

As you can see, we have four constant variables str1, str2, str3, and str4 are declared and initialized with the values “Hi”, “Welcome”, “to”, and “Itsourcecode”, respectively.

These strings represent the words that will be concatenated into a single string.

The concat() method concatenates all of its arguments to the calling string (str1) in the order they are passed and returns a new string.

In this case, it concatenates the strings “Hi”, ” “, “Welcome”, ” “, “to”, ” “, and “Itsourcecode” into a single string “Hi Welcome to Itsourcecode.”

Output:

Hi Welcome to Itsourcecode!

You can also add (,) comma in your code, here’s an example:

const str1 = "Hi";
const str2 = "Welcome";
const str3 = "to";
const str4 = "Itsourcecode!";

const result = str1.concat("," ,' ', str2, ' ', str3 , ' ', str4);
console.log(result); // 'Hi Welcome to Itsourcecode'

Output:

Hi, Welcome to Itsourcecode!

2. Use the “+” operator

We can use the plus “+“ operator to join multiple strings together. When we used it with strings, it adds the second string to the end of the first string and gives you a new string as a result.

For example:

const str1 = "It";
const str2 = "sourcecode";
const result = str1 + ' ' + str2;
console.log(result); // output: It sourcecode

In the example given, we used the “+” operator to combine the strings “It”, ‘ ‘ (a space), and “sourcecode” to form the single string “It sourcecode.”

Output:

It sourcecode

If you want to remove the space, here’s an example:

const str1 = "It";
const str2 = "sourcecode";
const result = str1 + str2;
console.log(result); // output: Itsourcecode

Output:

Itsourcecode

3. Use template literals

The template literals allow you to insert expressions into strings. They use backticks (`) to enclose the string and include placeholders (${expression}) where expressions are evaluated and the result is inserted.

For example:

const str1 = "It";
const str2 = "sourcecode";
const result = `${str1} ${str2}`;
console.log(result); // output: It sourcecode

In the provided example, a template literal is used to combine the strings “It” and “sourcecode” with a space in between.

Output:

It sourcecode

4. Use join() method

The join() method is a built-in method of array object and a useful tool in JavaScript that concatenates all the elements of an array into a single string.

You can choose a separator to insert between the elements when they are joined together.

For example:

const str1 = "Hi";
const str2 = "Welcome";
const str3 = "to";
const str4 = "Itsourcecode!";

const result = [str1, str2, str3, str4].join(' ');
console.log(result); //output: 'Hi Welcome to Itsourcecode'

As you can see, in this example, we create an array containing the strings str1, str2, str3, and str4, and call the join() method on this array with ‘ ‘ (a space) as its argument.

This concatenates all the elements of the array into a single string, separated by spaces.

Output:

Hi Welcome to Itsourcecode

Here’s another example:

const str1 = "Hi";
const str2 = "Welcome";
const str3 = "to";
const str4 = "Itsourcecode!";

const result = str1 + ', ' + [str2, str3, str4].join(' ');
console.log(result); // output: 'Hi, Welcome to Itsourcecode'

In this example, we used the plus “+” operator to join the string str1 with ‘, ‘ (a comma followed by a space).

Next, we formed an array consisting of the strings str2, str3, and str4.

By invoking the join() method on this array with ‘ ‘ (a space) as the argument, we merged all the elements into a single string, with spaces between them. Finally, we used the plus “+” operator once again to concatenate the result of the join() method with the previous string combination.

Output:

Hi, Welcome to Itsourcecode

Conclusion

In conclusion, this article explores different approaches how to concat strings in JavaScript.

It explains the concept of concatenating strings, introduces the concat() method as a built-in function for combining strings, and demonstrates its usage with examples.

Additionally, it explores alternative methods such as using the “+” operator, template literals, and the join() method.

By following the solutions and examples provided in this article, we can guarantee that users will gain a clear understanding of how to effectively concatenate strings in JavaScript and choose the most suitable method for their coding needs.

We are hoping that this article provides you with enough information that helps you understand the string concat JavaScript.

You can also check out the following article:

• JavaScript concurrency
• getInfo() method in JavaScript
• Fatal JavaScript invalid size error 169220804

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →