published: 20 Aug 2022
2 min read
4 ways to concatenate strings in JavaScript
String concatenation is a common task in any programming language. There are 4 ways to combine strings in JavaScript.
In this article, we'll look at all these methods to perform string concatenation in JavaScript.
concat() Method
JavaScript String object has a built-in concat() method. As the name suggests, this method joins or merges two or more strings.
The concat() method doesn't modify the string in place. Instead, it creates and returns a new string containing the text of the joined strings.
const name = 'Atta';
const country = '🇵🇰';
const str = 'My name is '.concat(name, ', and I\'m from ', country);
console.log(str);
// My name is Atta, and I'm from 🇵🇰
If the parameters are not of the type string, they are automatically converted to string values before concatenating.
const str = 'The price is $'.concat(45.99);
console.log(str);
// The price is $45.99
The + Operator
The same + operator that we used to add two numbers can also be used to combine two strings:
const name = 'Atta';
const country = '🇵🇰';
const str = name + ' ' + country;
console.log(str);
// Atta 🇵🇰
The above method creates a brand new string. To mutate the existing string, you could use the shorthand += operator:
const name = 'Atta';
const country = '🇵🇰';
let str = name;
str += ' ';
str += country;
console.log(str);
// Atta 🇵🇰
The assignment operators (+, +=) perform faster on modern JavaScript engines, so there is no need to use the concat() method.
However, if you prefer readability over performance, use template literals (explained below).
Template Literals
Template literals provides a modern way to work with strings in JavaScript. They are primarily string literals with embedded expressions. You can use string interpolation, multi-line strings, and tagged expressions with them.
const name = 'Atta';
const country = '🇵🇰';
const str = 'My name is ${name}, and I'm from ${country}';
console.log(str);
// My name is Atta, and I'm from 🇵🇰
I personally use template literals in JavaScript (and even in Node.js) to combine strings. Because they're more readable with no awkward backslashes to escape quotes, no empty spaces, and no more plus operators. You write exactly how you want your string to appear.
join() Method
The join() method concatenates all elements in an array and returns a new string:
const str = ['Atta', ' ', '🇵🇰'].join('');
console.log(str);
// Atta 🇵🇰
The first parameter of the join() method is the separator. If skipped, a comma (,) is used as a default separator:
const str = ['Atta', '🇵🇰'].join();
console.log(str);
// Atta,🇵🇰
You can pass in any separator you want to combine strings:
const str = ['Atta', '🇵🇰'].join(' ');
console.log(str);
// Atta 🇵🇰
Are we missing something? Help us improve this article. Reach out to us.
4 ways to concatenate strings in JavaScript
String concatenation is a common task in any programming language. There are 4 ways to combine strings in JavaScript.
In this article, we'll look at all these methods to perform string concatenation in JavaScript.
concat() Method
JavaScript String object has a built-in concat() method. As the name suggests, this method joins or merges two or more strings.
The concat() method doesn't modify the string in place. Instead, it creates and returns a new string containing the text of the joined strings.
const name = 'Atta';
const country = '🇵🇰';
const str = 'My name is '.concat(name, ', and I\'m from ', country);
console.log(str);
// My name is Atta, and I'm from 🇵🇰
If the parameters are not of the type string, they are automatically converted to string values before concatenating.
const str = 'The price is $'.concat(45.99);
console.log(str);
// The price is $45.99
The + Operator
The same + operator that we used to add two numbers can also be used to combine two strings:
const name = 'Atta';
const country = '🇵🇰';
const str = name + ' ' + country;
console.log(str);
// Atta 🇵🇰
The above method creates a brand new string. To mutate the existing string, you could use the shorthand += operator:
const name = 'Atta';
const country = '🇵🇰';
let str = name;
str += ' ';
str += country;
console.log(str);
// Atta 🇵🇰
The assignment operators (+, +=) perform faster on modern JavaScript engines, so there is no need to use the concat() method.
However, if you prefer readability over performance, use template literals (explained below).
Template Literals
Template literals provides a modern way to work with strings in JavaScript. They are primarily string literals with embedded expressions. You can use string interpolation, multi-line strings, and tagged expressions with them.
const name = 'Atta';
const country = '🇵🇰';
const str = 'My name is ${name}, and I'm from ${country}';
console.log(str);
// My name is Atta, and I'm from 🇵🇰
I personally use template literals in JavaScript (and even in Node.js) to combine strings. Because they're more readable with no awkward backslashes to escape quotes, no empty spaces, and no more plus operators. You write exactly how you want your string to appear.
join() Method
The join() method concatenates all elements in an array and returns a new string:
const str = ['Atta', ' ', '🇵🇰'].join('');
console.log(str);
// Atta 🇵🇰
The first parameter of the join() method is the separator. If skipped, a comma (,) is used as a default separator:
const str = ['Atta', '🇵🇰'].join();
console.log(str);
// Atta,🇵🇰
You can pass in any separator you want to combine strings:
const str = ['Atta', '🇵🇰'].join(' ');
console.log(str);
// Atta 🇵🇰
Are you looking for other code tips?
JS Nooby
Javascript connoisseur
