Using JavaScript Template Literals [Tutorial]

How to use JavaScript Template Literals?

JavaScript template literals are a way to create strings that include expressions that are evaluated at runtime. They are enclosed by backticks (`) instead of single or double quotes. Expressions inside template literals are enclosed by ${}, for example:

let x = 5;
let y = 10;
console.log(`The sum of ${x} and ${y} is ${x + y}.`);

This would output: "The sum of 5 and 10 is 15."

Template literals also support multiline strings, for example:

console.log(`This is a
multiline string.`);

This would output:

This is a
multiline string.

 

Embed variables and values using template literals

The syntax for template literals uses backticks (`) instead of single or double quotes. Within the backticks, you can use placeholders in the form of ${expression} to include the value of an expression or variable within the string.

Here is an example of how we can embed two variables with certain values inside a string by using template literals

let platform = "GoLinuxCloud";
let language = "JavaScript";
let alert = `Welcome to ${platform}, the place to learn ${language} easily.`;
console.log(alert);

Output

Welcome to GoLinuxCloud, the place to learn JavaScript easily.

 

Embed expression using template literals

As stated earlier, we can embed expressions within template literals. This provides dynamism to the output or string value we log to the console. An example can be changing the string value if the age is below 18 or below 30 or below 45. Let’s illustrate this as below

function name(age) {
    if (age <= 18) return "teen";
    if (age > 18 && age <= 30) return "young adult";
    if (age > 30 && age <= 45) return "adult";
    return "elder";
}

console.log(`Hi ${name(27)}, welcome to PayDay`);
console.log(`${23 + 45 * 1.8} is your number for today`);

Output

Hi young adult, welcome to PayDay
104 is your number for today

There are many ways to use template literals and you can use them in combination with functions, loops, and other control structures to create dynamic and powerful strings.

 

Create multi-line strings using template literals

In addition to being able to include expressions and variables, template literals also support multiline strings without the need for concatenation or line continuation characters.

let message = `Hello Everyone,
my name is Deepak, and I love JavaScript.
Also, I'm a writer and technical person.`
console.log(message);

Output

Hello Everyone,
my name is Deepak, and I love JavaScript.
Also, I'm a writer and technical person.

 

Tagged Templates

Another important feature of template literals is Tagged templates, which allows us to define a function that will be called with the template string as the first argument and the evaluated expressions as the following arguments. For example:

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
}

let name = "Dayo";
let age = 28;

tag`Hello, my name is ${name} and I am ${age} years old.`;

Output

[ 'Hello, my name is ', ' and I am ', ' years old.' ]
[ 'Dayo', 28 ]

As we can see, the function tag receives two arguments, the first one is an array with the pieces of the template string, and the following arguments are the evaluated expressions.

 

Summary

Template literals are a powerful feature of JavaScript that can help you create more readable, dynamic, and expressive strings. They are easy to use, and you can combine them with other features such as tagged templates to create more advanced and reusable string-processing logic.

 

References

Template literals (Template strings) - JavaScript | MDN (mozilla.org)