Template literals in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of multiline template literal

What is the output of this code?

const message = `Hello\nWorld!`;
console.log(message);

Javascript

const message = `Hello\nWorld!`;
console.log(message);

A Hello\nWorld!

B

Hello
World!

C Hello World!

D Hello\n World!

💡 Hint

Remember that template literals preserve new lines inside backticks.

The string contains a literal backslash followed by n, so console.log prints Hello\nWorld! as is.

❓ Predict Output

intermediate

Embedding expressions in template literals

What will this code output?

const a = 5;
const b = 10;
console.log(`Sum is ${a + b}`);

Javascript

const a = 5;
const b = 10;
console.log(`Sum is ${a + b}`);

A Sum is a + b

B Sum is ${a + b}

C Sum is 15

D Sum is 510

💡 Hint

Expressions inside ${} are evaluated before being inserted.

The expression a + b equals 15, so the output is 'Sum is 15'.

❓ Predict Output

advanced

Tagged template literal output

What is the output of this code?

function tag(strings, ...values) {
  return strings[0] + values.map(v => v * 2).join('') + strings[1];
}
const result = tag`Value: ${3} and ${4}`;
console.log(result);

Javascript

function tag(strings, ...values) {
  return strings[0] + values.map(v => v * 2).join('') + strings[1];
}
const result = tag`Value: ${3} and ${4}`;
console.log(result);

A Value: 68 and

B Value: 6 and 8

C dna 86 :eulaV

D Value: 34 and 8

💡 Hint

Look at how strings and values arrays are combined in the tag function.

strings array is ['Value: ', ' and ', ''], values are [3,4]. The function returns strings[0] + doubled values joined + strings[1]. So 'Value: ' + '6' + '8' + ' and ' results in 'Value: 68 and'.

❓ Predict Output

advanced

Nested template literals output

What will this code print?

const name = 'Alice';
const greeting = `Hello, ${`Ms. ${name}`}`;
console.log(greeting);

Javascript

const name = 'Alice';
const greeting = `Hello, ${`Ms. ${name}`}`;
console.log(greeting);

A Hello, Ms. ${name}

B Hello, Ms. Alice

C Hello, Ms. Alice Alice

D Hello, ${`Ms. ${name}`}

💡 Hint

Template literals can be nested and inner ones are evaluated first.

The inner template `Ms. ${name}` evaluates to 'Ms. Alice', then the outer template inserts that string.

🧠 Conceptual

expert

Why use tagged template literals?

Which of the following is a key reason to use tagged template literals in JavaScript?

A To define variables inside template literals

B To create multi-line strings without backticks

C To evaluate expressions inside strings without ${}

D To automatically escape HTML special characters in user input

💡 Hint

Tagged templates can process and transform template literal parts before output.

Tagged template literals allow custom processing of template strings, such as escaping HTML to prevent injection attacks.