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 ITLook 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 exampleThe 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:
- How to Set a Variable’s Value if it’s Undefined in JavaScript
- Check if variable is Null or Undefined in JavaScript
- Check if a Variable is of type Error in JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R