Combine Multiple Strings in JavaScript

In this tutorial, I am going to explain how to combine multiple strings in JavaScript. Sometimes we need to combine two or more strings into one variable and use the combined string. Basically, combine means merging two or more strings together.

These are some methods below to combine multiple strings.

• The plus operator (+): This is a concatenation operator that allows us to add two or more operands of JavaScript. The plus operator(+) also combines two or more strings into a single string.
• Template literal: We can insert variables into the string with the template literals.
• concat() method: This method concatenates multiple strings and returns a new string. The concat() method doesn’t change the original string.
• join() method: Concatenates all the elements of an array and returns a new string. Specified separators will be used to separate the elements of the string. The default separator of this method is comma(,).

Combine strings using the plus operator(+)

let str1 = "welcome to";
let str2 = "CodeSpeedy";
let result = str1 + str2;
console.log(result);

In the above program, I have declared two variables first one is str1 and the second is str2. Then I combined those two variables with the + operator in another variable called result. After that, I printed the result through console.log().

Output:

welcome toCodeSpeedy

As you can see in the above output, to and CodeSpeedy are two different words but there is no space between them. To avoid this problem we need to add space after to ("welcome to  ") or before CodeSpeedy ("  CodeSpeedy") like below.

let str1 = "welcome to ";
let str2 = "CodeSpeedy";
let result = str1 + str2;
console.log(result);

In the above program, I just added a space after to, you can add space before CodeSpeedy also wherever you want.

Output:

welcome to CodeSpeedy

Now in the above output, you can see the whitespace space between to and CodeSpeedy.

Combine strings using the template literals

We can use $ sign template literals to combine multiple strings. In order to use the $ operator, users need to use the curly braces.

let str1 = "welcome to";
let str2 = "CodeSpeedy";
let result =`${str1} ${str2}`
console.log(result);

In the above program, The ${str1} and the ${str2} will concatenate the value of the variable str1 and str2. We don’t have to worry about adding spaces in this method.

Output:

welcome to CodeSpeedy

Now, we can insert variables into a string like below in this method.

let str1 = "to";
let str2 = "CodeSpeedy";
let result =`Welcome ${str1} the ${str2}`
console.log(result);

In the above program, I have inserted two variables in a string. The ${str1} to fetch the value of the variable str1 and the ${str2} to fetch the value of another variable which is str2.

Output:

Welcome to the CodeSpeedy

Template literals make it easier to concatenate strings, variable interpolation, etc…

Combine strings using the concat() method

The JavaScript string concat() method joins two or multiple strings into one and generates a new string.

let str1 = "Welcome ";
let str2 = "to ";
let str3 = "CodeSpeedy"
let result = str1.concat(str2, str3)
console.log(result);

• str1 – The string with which we want to combine multiple strings.
• str2, str3 – These are the strings with which we want to combine the str1.

Output:

Welcome to CodeSpeedy

We can also call this method on a string like below.

let str1 = "Welcome ";
let str2 = "to ";
let str3 = "CodeSpeedy"
let result = "Hey there ".concat(str1, str2, str3)
console.log(result);

In the above program, Concatenated all three variables i.e, str1, str2, and str3 with the string “Hey there”.

Output:

Hey there Welcome to CodeSpeedy

In this method, you have to add spaces in specific places in the string otherwise you will not get the output you want.

Combine strings using the join() method

let str = ["Welcome", "to", "CodeSpeedy"]
let result = str.join(" ")
console.log(result);

In the above program, I have created an array of strings that I want to combine into a single string. Then the str.join("") method to combine the string values of the variable str. After that, I have printed the result through console.log().

Output:

Welcome to CodeSpeedy

In the above program, we have added space as a separator between strings using join() method by passing space as the parameter. If we need to use comma as a separator of strings, then we can also do it like you can see below:

let result = str.join(",")

But if we don’t pass anything as the parameter for separator, it will also use comma for the separator. This is because, when we don’t pass any parameter to the join() method, it will automatically use comma as the separator during joining strings.

let result = str.join() // Uses comma as the separator by default