JavaScript concat String

In this tutorial, you will learn 4 different ways to concatenate a string in JavaScript with examples.

Concatenation of strings is one of the most common things that you do while programming in JavaScript. Concatenation means joining two or more strings together.

Here we have discussed 4 different ways to concatenate strings in JavaScript, where one of the methods is the concat() method.

Here is the list of 4 different ways to concatenate strings in JavaScript:

1. concat() Method
2. Using assignment operator
3. Using join method
4. Using template string

1. concat() String Method

The concat() method joins together (concatenate) the strings passed argument to the method to the calling string and returns a new string.

For example, if the method is called on str1 and str2 is passed as an argument then the result will be str1 + str2.

The method accepts any number of string arguments separated by a comma.

Syntax

The syntax of concat() method is following:

str1.concat(str2, str3, str4, ...)

Let's see an example that concatenates 3 strings in one.

const str1 = "Learn ";
const str2 = "to ";
const str3 = "code";
const final = str1.concat(str2, str3); // str1 + str2 + str3
console.log(final);

The arguments passed in the concat() method are converted to string values before concatenating if it is not of the type string.

const arr = ["Hello", " ", "World", "!"];
console.log("".concat(...arr));  // "Hello World!"

console.log("".concat([1, 2, 3]));  // "1,2,3"
console.log("".concat([])); // ""
console.log("".concat({}));   // [object Object]
console.log("".concat(null)); // "null"
console.log("".concat(true)); // "true"
console.log("".concat(10, 20));  // "1020"

Note: It is advised to use the assignment operator (+,+=) to concatenate strings instead of concat() method.

2. Using assignment operator

The strings can be concatenated using the + or += operator.

The plus operator in JavaScript can add as well as concatenate strings.

The += operator keeps previously stored sting if any in the result variable.

const str1 = "Learn ";
const str2 = "to ";
const str3 = "code";
const final = str1 + str2 + str3;
console.log(final);

In an expression from the left if the operands are numbers then it (+ or +=) adds it, but as soon as it gets the first operand as string, it starts concatenating next all the operands with the previously calculated result.

// first number are added then concatenate with string
console.log(5 + 5 + 12 + " = 5 + 5 + 12");

// if you put any string before any calculative part
// then it will concatenate it as string
console.log("5 + 5 + 12 = " + 5 + 5 + 12);

3. Using join method

The join() array method creates a new string by concatenating all array members to a single string.

The join() method accepts the separator as the first argument, so for concatenation, you can pass an empty string ('') to it or space (' ') which will add all array members to the string separated by a space.

const array = ["Learn","to","code"];

const saperator1 = array.join("");
console.log(saperator1);

const saperator2 = array.join(" ");
console.log(saperator2);

4. Using template string

Using template string is not a pure form of concatenation but this looks cool and clear. Using this you can directly embed any string variable into another string.

To concatenate are enclosed by backticks (``) and the string variable that you want to embed is enclosed by curly braces with a dollar sign (${string_variable}).

const str1 = "Learn";
const str2 = "to";
const str3 = "code";
console.log(`${str1} ${str2} ${str3}.`);

Conclusion

You have learned 4 ways to concatenate strings in this tutorial with examples. In general, you can use the assignment operator to concatenate and embed in any string using string literal.