JavaScript Concatenate Strings: A Guide

The JavaScript concat() method merges the contents of two or more strings. You can also use the + concatenation operator to merge multiple strings. The concatenation operator is preferred in most cases as it is more concise.

Concatenation is a technique used in programming to merge two or more strings into one value. For example, you may have two lists of employees stored as strings, one for each branch in your company. You may want to merge them all into one list of all your employees.

There are two ways to concatenate a string:

• Using the concatenation operator (+).
• Using the concat() method.

In this tutorial, we are going to discuss how to concatenate a JavaScript string. We’ll walk through the plus sign concatenation operator (+) and the string concat() method. Without further ado, let’s get started!

The concat() method has browser support on all modern browsers.

There is a method called Array.concat() that concatenates two arrays. In this article we’re going to focus on the string concat() method.

JavaScript String Concatenation

You can merge two or more JavaScript strings into one. The process of merging strings is called JavaScript string concatenation. To concatenate strings without relying on any built-in functions, you can use the + operator.

Here is the syntax for the concatenation operator:

"string1" + "string2"

Concatenation is useful if you have separate string values that you want to appear as one. For instance, say that you have two strings. One string contains the forename of a user. The other string contains the surname. You can merge these two values to get the whole name as one string.

Say we want to merge two strings together. One string is the forename of a customer. Another string is the surname of that customer. Let’s merge these two strings using the “+” operator:

var bill_johnson = "Bill" + "Johnson";

console.log(bill_johnson);

Our code returns: “BillJohnson”. Our strings are not automatically separated by a space. If we want a space between our strings, we need to specify one within one of our strings:

"Bill " + "Johnson"

Our code now returns: “Bill Johnson”. This is because we added a space in the “Bill ” string.

JavaScript String concat() Method

The JavaScript concat() method combines two or more strings. concat() accepts as many parameters as you want, each one representing a string to merge. The concat() method is an alternative to the concatenation operator.

Here’s the syntax for the JavaScript concat() string function:

string_name.concat(string_one, string_two, string_three);

You can pass as many parameters as you would like into concat().

concat() JavaScript Example

Let’s use an example to illustrate how the concat() string function works in action. Let’s say that we have a user’s first name, middle and second name and want to combine them into one string. We could use the following code to achieve this goal:

var first_name = 'Lucy';
var middle_name = ' Turnbull';
var second_name = ' Cooper';
console.log(name_string.concat(middle_name, surname));

Our code returns: “Lucy Turnbull Cooper”. It’s important to note that we included spaces at the start of the “middle_name” and “second_name” strings. This ensures that our end string was separated by spaces.

In addition, you can also use the concat() function to combine more than two strings. Here’s an example of concat() being used to combine three strings together:

var good_morning = 'Good';
console.log(good_morning.concat(' Morning', 'Alex!', ' It is a great day!'));

Our code returns a new string: “Good Morning, Alex! It is a great day!”

The JavaScript concat() string function does not alter our original string. Instead, it creates a new string with our concatenated values. So, if we wanted to store our new string for later use, we would need to assign it to a variable like so:

var good_morning = 'Good';
var new_string = good_morning.concat(' Morning', 'Alex!', ' It is a great day!')
console.log(new_string);

Our code returns the same as above, but now our new string is stored within the variable “new_string.”

Conclusion

The JavaScript concatenation operator is a plus sign (+). This operator lets you add the contents of two or more strings together to create one larger string. You can also use the concat() method to merge strings.

Both of these methods can be used interchangeably. This means that neither one offers any special methods. Both the plus sign and the concat() method merge strings to create a new string.

Are you interested in learning more about JavaScript coding? Check out our complete How to Learn JavaScript guide. You’ll find expert tips for learning how to code and plenty of learning resources to help you master the JavaScript language.