How to Concatenate Strings in JavaScript
In this post, we'll learn four different ways to concatenate strings in JavaScript.
The Plus Operator
You can use the +
operator to concatenate strings.
JAVASCRIPTconst firstName = "John";
const lastName = "Doe";
const fullName = firstName + " " + lastName;
console.log(fullName); // John Doe
You can also use the +=
operator, which is the same as the +
operator except it will append the new string to the existing string.
JAVASCRIPTlet sentence = "Apples";
sentence += " are red";
console.log(sentence); // Apples are red
It is safe to use the +=
operator on a variable that is not a string, like undefined
, null
, and objects, because JavaScript will convert the variable to a string if the left-hand side is already a string. This is called type coercion.
JAVASCRIPTlet sentence = "Apples";
sentence += undefined; // Type coercion
console.log(sentence); // Applesundefined
Template Strings
You can use template strings for string interpolation. Template strings allow you to add expressions inside of a string in a cleaner way.
JAVASCRIPTconst firstName = "John";
const greeting = `Hi my name is ${firstName}`;
console.log(greeting); // Hi my name is John
Template strings are generally the recommended way to do string concatenation because they're easier to read and write.
Join() function
You can use the join()
function to create a new string using an existing array by concatenating all of its elements.
JAVASCRIPTconst fruits = ["Banana", "Orange", "Apple", "Mango"];
const fruitList = fruits.join(", ");
console.log(fruitList); // Banana, Orange, Apple, Mango
The join()
function takes an optional parameter that specifies the separator to use between each element. The default separator is a comma (,
).
Here's another example using a slash as a separator:
JAVASCRIPTconst url = ["sabe.io", "blog", "javascript-concat-strings"];
const path = url.join("/");
console.log(path); // sabe.io/blog/javascript-concat-strings
In general, using join()
is the preferred way to concatenate strings because it is more efficient than using the +
operator inside a loop.
Concat() function
You can use the concat()
function to create a new string by concatenating two or more existing strings. Because strings are immutable, the concat()
function returns a new string instead of modifying the existing one.
JAVASCRIPTconst a = "Hi";
const b = "there";
const c = a.concat(b);
console.log(c); // Hithere
Keep in mind that the concat()
function only works with strings since it is a function on the String
object. There's no good reason to use the concat()
unless you have to, but if you do, the common practice is to use it on an empty string to avoid any issues:
JAVASCRIPT"".concat("Hi", "there"); // Hithere
Resources
- How to Install Node on Windows, macOS and Linux
- Getting Started with Solid
- Git Tutorial: Learn how to use Version Control
- How to Serve Static Files with Nginx and Docker
- How to deploy a .NET app using Docker
- How to deploy a PHP app using Docker
- How to deploy an Express app using Docker
- How to deploy a Node app using Docker
- Getting Started with Sass
- Getting Started with Handlebars.js
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up a Local Web Server using Node.js