JavaScript - 4

JavaScript - 4: Template Literals

Template literals give you another way to combine text and variables in JavaScript.

Instead of joining many pieces with the + operator, template literals use backticks and let you insert variables directly into a string with ${...}.

Your challenge: Create variables for a name, age, and city, then use one template literal to print a complete sentence.

What is a template literal?

A template literal is a JavaScript string written with backticks instead of regular quotation marks.

A normal string might look like: "Hello!"

A template literal looks like: `Hello!`

The biggest advantage is that template literals make it easy to insert variables directly into text.

Insert a variable with ${...}

Imagine you have: let name = "Alex";

You can place that variable inside a template literal like this: `Hello, ${name}!`

JavaScript replaces ${name} with the value stored in the variable.

The result becomes: Hello, Alex!

Use several variables:

You can insert more than one value into the same template literal.

For example, if you have variables called name, age, and city, all three can appear inside one message.

This is often easier to read than joining many strings with +.

Compare the two approaches:

Using concatenation: "Hello, " + name + ". You are " + age + " years old."

Using a template literal: `Hello, ${name}. You are ${age} years old.`

Both can work, but the template literal is often easier to read when several variables are mixed with text.

Backticks are important:

Template literals must use backticks: `

They are different from single quotation marks: ' and double quotation marks: ".

If you write ${name} inside ordinary quotation marks, JavaScript will treat it as normal text instead of inserting the variable.

Experiment: Change the values stored in name, age, and city.

The sentence should update automatically without changing the template itself.

Template literals can contain calculations too:

The braces can contain simple JavaScript expressions.

For example: `Next year I will be ${age + 1}.`

JavaScript calculates age + 1 first and then inserts the result into the string.

Try another message:

Create a variable called score and print something like: `My score is ${score} points.`

Then try: `If I earn 10 more points, I will have ${score + 10}.`

Template literals can span multiple lines:

Unlike ordinary quoted strings, a template literal can also contain line breaks. You will see this become useful later when working with larger pieces of text and HTML.

Good JavaScript habit: Use template literals when variables need to appear inside a sentence. They often make the code easier to read than long chains of + operators.

let name = "Alex";
let age = 25;
let city = "Berlin";

console.log(`Hello, my name is ${name}. I am ${age} years old and I live in ${city}.`);