We learned about variables and strings in the lessons before. We have also learned how we can add two strings together using the + operator. The process of adding two or more strings or expressions together is called Concatenation. There are multiple ways to do JavaScript concatenation.
Note: Also check out our JavaScript 👉 JavaScript Data Types lesson.
Concatenation in JavaScript ➕
Example: Concatenate two or more strings together
console.log("Hello, I am learning "+"JavaScript"); //Output: Hello, I am learning JavaScript
//Using variables
var firstname = "Isaac", lastname = "Newton";
var fullname = firstname +" "+ lastname;
console.log(fullname); //Output: Isaac Newton
Output
Hello, I am learning JavaScript
Isaac Newton
In the same way, we can also concatenate strings with JavaScript Variables. We can also concatenate strings with expressions while they are being evaluated.
Example
var age = 18;
console.log("My age is " + age); //Output: My age is 18
var a = 1, b = 5;
console.log("The sum is " + (a + b)); //Output: The sum is 6. Here, (a + b) is an expression that is being added to the string while it is being evaluated (calculated)
Output
My age is 18
The sum is 6
Interpolation using Template Literals ⚡
If there are a lot of variables that has to be concatenated together then using the old method might be time consuming and your code might be difficult to read. For a better way to perform JavaScript concatenation, we use template literals.
Example: Using the old method 😫
//Using normal interpolation
var name = 'John Wick', age = 40, height = '6ft', car = 'Chevy';
//Adding each variable using + might be time consuming and overall code would be difficult to read
console.log("His name is " + name +". His age might be around " + age +" and height is probably about " + height +". He drives around in a cool vintage " + car +".");
Output
His name is John Wick. His age might be around 40 and height is probably about 6ft. He drives around in a cool vintage Chevy.
To make it more efficient, in ES6 (which is the newer version of JavaScript released around 2015), a new feature was introduced called Template Literals. We will learn more about ES6 in our next lesson JavaScript ES6.
Interpolation is the process of evaluating a string literal that contains one or more placeholders and returning a result by replacing the placeholders with their respective values.
The template literals are denoted by ` ` i.e. backticks. They are enclosed in it. Inside those backticks, we put placeholders that are denoted by ${expression} where expression can be a variable or an expression.
Example: Using Template Literals 🤯
//Using Template Literals
var name = 'John Wick', age = 40, height = '6ft', car = 'Chevy';
//Here, the value of the name variable i.e. 'John Wick' replaces the placeholder ${name}. It is true for all the variables inside the backticks ` `.
console.log(`His name is ${name}. His age might be around ${age} and height is probably about ${height}. He drives around in a cool vintage ${car}.`);
Output
His name is John Wick. His age might be around 40 and height is probably about 6ft. He drives around in a cool vintage Chevy.
As you can see, if there are a lot of variables to be added in the resulting string, we can use Template Literals to save time and make our code much more readable & efficient. If we had used the + operator using the old way, there would be a high chance of making a mistake of forgetting to add a variable and not to mention, our code would be difficult to read 😉.