Blog / Javascript

How to join two strings in JavaScript

How to join two strings in JavaScript

There are many ways to join two strings in JavaScript (a process known as concatenation), in this post we will cover all the main ways in which you can, including template literals.

Will MaygerWill Mayger
November 17, 2021
Article

In this post we will be covering how to join two strings in JavaScript with as little technical jargon as possible so you will have everything you need right here without having to look any further!

There are many ways to join two strings in JavaScript. All of them are pretty easy to use, and we will go through each of them in this post.

How to join two strings in JavaScript

Currently one of the most popular methods to join two strings in JavaScript is by using template literals otherwise known as template strings.

Template literals involve the use of the back tick symbol ("``") to create the string and then breaking the template with a dollar symbol and curly braces to insert any variables you like.

Here is an example of using template literals in JavaScript to join two strings together:

// join two strings in javascript example
const stringOne = "Hello";
const stringTwo = "World";

const joinedString = `${stringOne} ${stringTwo}`;
console.log(joinedString); // "Hello World"
How to join two strings in JavaScript solution

This is one of the most modern ways to join two strings in JavaScript and is usually preferred over concatenation.

Using concatenation to join two strings in JavaScript

To join to strings in JavaScript using concatenation all you need to do is make use of the addition operator.

String concatenation is a common way to join two strings together in not only JavaScript but many other programming languages as well.

Here is an example of using concatenation in JavaScript to join two strings:

const stringOne = "Hello";
const stringTwo = "World";

const joinedString = stringOne + " " + stringTwo;
console.log(joinedString); // "Hello World"

As well as simple usage of the addition operator, you can also mix it up a little because of how flexible it is.

Here is an example of concatenation with a string and a variable:

const stringOne = "Hello";
console.log(stringOne + " World"); // "Hello World"

Here is how to redefine a variable using the addition operator and concatenation:

let stringOne = "Hello";
stringOne += " World";
console.log(stringOne); // "Hello World"

A last option of concatenation is to call the function on a string instead of using the addition operator, however this is rarely used so I wouldn’t recommend it unless you have no other choice:

console.log("Hello".concat(" World")); // "Hello World"

How to join two strings in JavaScript in an Array

If you have two strings within an array, there is a simple way in which you can join them together, this also applies to other types as well so can be used for more than just strings.

The Array.prototype.join method allows you to join all elements of an array and convert it into a string, all you need to do is provide the character you want to join them together with.

Here is an example of how to join two strings in JavaScript in an Array with Array.prototype.join:

console.log(["Hello", "World"].join(" ")); // "Hello World"

Summary

There we have how to join two strings in JavaScript, if you want more like this be sure to check out some of my other posts!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Earn more and take your coding career to the next level.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.