Combine Multiple Strings into a Single String | Concatenate Strings

In this article we will learn how to combine multiple strings into one single string i.e concatenate strings in JavaScript.

There are three ways on how we can combine or concatenate strings in JavaScript. We will be using different methods and operator to combine strings into one.

+ Operator: It helps to manipulate current values and also appends. It can do addition between two numbers and can also use append(add) strings.

join() : It create new string from concatenating two or more elements in an array.

concat() : Its an inbuilt function of JavaScript. It returns modified string by taking two or more parameters.

Method 1: Using + Operator.

The + operator not just add two numbers , it also helps to concatenate two or more strings together.

const str = 'Hello' + ' ' + 'World';
console.log(str)
// 'Hello World'

Not just + you can use += together too. The a += b syntax is similar to a = a + b.

let str = 'Hello';
str += ' ';
str += 'World';
console.log(str)
// 'Hello World'

The empty string ' ' is to give space between the two words.

The + operator also let you concatenate (add) numbers, strings object, null etc and it will return everything as a string.

const str = 'Hello' + ' ' + 'World' + ' ' + 23 + ' '+ {} + ' ' + true;
console.log(str)

//Hello World 23 [object Object] true

Method 2 : Using join() method in JavaScript

The join() method basically returns an array of strings as single string. The join() method uses a parameter which is called as a separator. By default it is a comma ( , ).

Syntax :

array.join(seperator)

When we use a separator it returns a string in which the element in the array have been joined by the separator.

In the example below we will use a space (' ' ) as a separator and all the string in the array as one single string using join() method.

Example :

['Hello', 'World'].join(' ');

// 'Hello World'

You can pass anything as a separator and it will best to use for concatenating strings if you see yourself repeating the same character over and over again. For example lets say you want to get an URL string and you don’t want to repeat the / over and over again between the words. So use it as a separator to join the array of words.

const url = ['exmaple.com', 'tutorial', 'javascript', 'string-concat'].join('/');

console.log(url)

// exmaple.com/tutorial/javascript/string-concat

Method 3 : Using concat() method.

The concat() is a in-built method of JavaScript Strings. It merges two or more strings or an array of strings and return a single string.

The concat() method does not change the existing arrays or string. But returns a new string.

Example:

const str1 = 'Hello';
const str2 = ' ';
const str3 = 'World';
const str4 = str1.concat(str2, str3);

console.log(str4)

//Hello World

While using concat() we have to be careful because if the first string str1 value that concat() method is called on is not a string then it will show us an error.

It’s better to go with the Method 1 and 2 to join strings, instead of concat() method. But if you want to us it anyway, the best is call it on an empty string.

Example:

const str1 = '';
const str2 = 'Hello ';
const str3 = 'World';
const str4 = str1.concat(str2, str3);

console.log(str4)

//Hello World

Related Topics :

String Interpolation In JavaScript

3 Ways to generate random string/characters in JavaScript

Get the 10 characters from a string using Javascript.

How to create Multiline string in JavaScript?