Top 3 Practical Ways to Perform Javascript String Concatenation

Summary: in this tutorial, you’ll learn how to concatenate strings in JavaScript.

JavaScript provides various options that allow you to concatenate two or more strings:

• Use the concat() method
• Use the + and += operators
• Use the template literals

1) Using the concat() method

The String.prototype.concat() concatenates two or more string arguments and returns a new string:

let newString = string.concat(...str);Code language: JavaScript (javascript)

The concat() accepts a varied number of string arguments and returns a new string containing the combined string arguments.

If you pass non-string arguments into the concat(), it will convert these arguments to a string before concatenating. For example:

let racing = 'Formula ' + 1;
console.log(racing);Code language: JavaScript (javascript)

Output:

Formula 1

This example concatenates strings into a new string:

let result = concat('JavaScript', ' ', 'String',' ', 'Concatenation');
console.log(result);Code language: JavaScript (javascript)

Output:

JavaScript String ConcatenationCode language: JavaScript (javascript)

The following example concatenates all string elements in an array into a string:

let list = ['JavaScript',' ', 'String',' ', 'Concatenation'];
let result = ''.concat(...list);

console.log(result);Code language: JavaScript (javascript)

Output:

JavaScript String ConcatenationCode language: JavaScript (javascript)

2) Using the + and += operators

The operator + allows you to concatenate two strings. For example:

let lang = 'JavaScript';
let result = lang + ' String';

console.log(result);Code language: JavaScript (javascript)

Output:

JavaScript StringCode language: JavaScript (javascript)

To compose a string piece by piece, you use the += operator:

let className = 'navbar';
className += ' primary-color';
className += ' sticky-bar';

console.log(className);
Code language: JavaScript (javascript)

Output:

According to a performance test on some modern web browsers, the + and += operators perform faster than the concat() method.

3) Using template literals

ES6 introduces the template literals that allow you to perform string interpolation.

The following example shows how to concatenate three strings:

let navbarClass = 'navbar';
let primaryColor = 'primary-color';
let stickyClass = 'sticky-bar';

let className = `${navbarClass} ${primaryColor} ${stickyClass}`;

console.log(className);Code language: JavaScript (javascript)

Output:

navbar primary-color stickyBarCode language: JavaScript (javascript)

In this tutorial, you have learned how to concatenate strings in JavaScript using the concat() method, + and += operator, and template literals.