JavaScript String Concat Method Explained

A common task in any programming language is combining two or more strings together to form a single string.

This technique is known as concatenation, and one way it can be accomplished is with the string concat() method.

The following example demonstrates how to combine two strings in JavaScript with the concat() method.

var StringOne = 'Hello';
var StringTwo = 'World';
document.write(StringOne.concat(StringTwo));

The output is:

HelloWorld

The concat() method does not alter the existing string, instead a new string is created with the additional string(s) added to the end.

This method will also accept a list of strings, not just a single string.

The following example demonstrates both of these concepts:

var StringOne = 'Hello';
var StringTwo = 'World';
var StringThree = '';
StringThree = StringOne.concat(' ', StringTwo, '!');
document.write(StringThree);

The output is:

Hello World!

A Better Alternative: Using the Plus and Equals Plus Operators

In most situations, it is recommended to avoid using the concat() method and use the plus or plus equals operators instead.

The concat() method can be used in some complex situations that these operators can not be, and that is why combining simple strings is often faster with them.

Strings can be added together in the say way that number variables can be, here is an example:

var StringOne = 'Hello';
var StringTwo = 'World';
var StringThree = StringOne + ' ' + StringTwo + "!";
document.write(StringThree);

The above code outputs:

Hello World!

Here’s another example using the plus equal operator:

var OneString = '';
OneString += 'Hello' + ' ';
OneString += 'World' + '!';
document.write(OneString);

The above code outputs:

Hello World!

Combining Arrays of Strings

One thing that the concat() method can do that the plus operator can not do is combine arrays into a single string.

This example combines an array of strings into a single one:

var Colors = ['Red', 'Green', 'Blue'];
var MyString = 'Colors: '.concat(Colors);
document.write(MyString);

The above code outputs:

Colors: Red,Green,Blue

Combining Arrays of Strings With Out the Comma as a Separator

You may have noticed that in the above example, the text is formatted in a slightly undesirable and unexpected way.

In between the individual strings that were in the array, JavaScript inserted commas.

There are many ways to combine strings in a way where the final string would not have commas, but one quick and easy way is to use the dot dot dot operator.

This example demonstrates the JavaScript spread operator:

var MyArray = ['What', ' ', 'is', ' ', 'today', '?'];
var MyString2 = '';
MyString2 = MyString2.concat(...MyArray);
document.write(MyString2);

The above code produces the following string:

What is today?

Concatenate a Number Variable with a String Variable

Both the concat() method and the + operator will combine number variables and strings together in a logical way.

var MyColor = "Blue";
var MyNumber = 7;
MyColor = MyColor.concat(MyNumber);
document.write(MyColor);
//Outputs: Blue7
MyColor = "Blue" + MyNumber;
document.write(MyColor);
//Same Output As Above

The last example demonstrates how to use the concat() method without first declaring a string while combining a list of numbers into a string instead of adding them together

document.write("".concat(1,2,3));
//Output: 123