How To Concatenate A String With A Variable In JavaScript

How To Concatenate A String With A Variable In JavaScript?

There are many ways to concatenate a string with a variable in JavaScript because this is essential knowledge for you to start with JavaScript. In this tutorial we will practice with the method of using template literals and the + operator. Let’s follow along!

Concatenate a string with a variable in JavaScript

Using + operator

This operator has many usages such as converting a string to a number; adding two numbers and returning the result; or even concatenating a string with another variable such as a number or a string. 

Syntax:

x + y

Parameter:

  • split: The pattern that describes where to split.

The overloading of the addition operator, “+”, takes two distinct forms: numeric addition and string combination. If one operand is a string, the other side is also converted to a string, and they are then combined.

let s1 = "Learn Share ";
let s2 = "IT";
let s = s1+s2;
console.log(s);

Output: 

Learn Share IT

Many people believe that string concatenation is similar to the use of template literals or the String.prototype.concat() method; however, this is not accurate.

Using template literals

Template literals are delimited by backtick characters (`). This allows multiple lines to be included in a single string, inserting strings with inline expressions and using a special construct called a tag template.

Syntax:

`This is an inline text with a variable ${exp} concatenated`

Parameter:

  • exp: An expression to insert (such as a variable or calculation) in that position, its value will be converted to a string.

Template literals are delimited by backticks instead of using a single quote or double quote in most single strings. 

let s1 = "Learn Share ";
let s2 = "IT";
let solution1 = `REMEMBER TO USE BACKTICK TO DO THIS: ${s1} ${s2}`;
let solution2 = `REMEMBER TO USE BACKTICK TO DO THIS: ${s1 + s2}`;
console.log(solution1);
console.log(solution2);

The above code tries to concatenate a string with two variables s1 s2 using template literals in two different ways. However, the results have a small difference.

Output:

REMEMBER TO USE BACKTICK TO DO THIS: Learn Share  IT
REMEMBER TO USE BACKTICK TO DO THIS: Learn Share IT

Look at a redundant space before the ‘IT’ word in the first result. This is because, in our example 1, we used two dollar signs to concatenate two variables to a string but forgot to remove space when typing code. This mistake often happens with most programmers as they accidentally leave a space to make their code easy to read, but they change the string by adding additional whitespaces.

Using concat()

Syntax:

concat(str1, str2, …, strN)

Parameter:

  • strN: One or more variables to concatenate to the string that uses the method.

The concat() method combines the string arguments with the calling string and returns a new string:

let s1 = "Learn Share";
let s2 = "IT ";
let s = s1.concat(" ",s2,2022," example");
console.log(s);

Output: 

Learn Share IT 2022 example

The above example uses concat() to combine a string with variable s2 and a number 2022 and even a string “example”. Keep in mind that templates literals and concat() treat the expression as a string, which invokes toString() first. This is different from the + operator (our first method) because it converts the expression to a primitive, which invokes valueOf() first.

Summary

We have learned how to concatenate a string with a variable in JavaScript. We hope you will be successful using our tutorial. Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *