Build a Readable Report String
Build a Readable Report String
A template literal uses backticks and embeds expression values with dollar-brace placeholders. It lets a report combine a name and mark without a chain of string concatenations.
Before this topic, review Remove a Chosen Element if its terms are unfamiliar.
What you’ll learn
- Explain build a readable report string through the school example.
- Trace the shown operations and distinguish their result from displayed output.
- Make the practice change and explain its consequence: The embedded expression reads the edited mark when the string is evaluated.
Work through the school example
This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.
JavaScript · school.js · complete example
const name = "Diya";
const marks = 72;
console.log(`${name}: ${marks}`);
Expected output
Diya: 72Introduction to JavaScript Template Literals
In the traditional days of JavaScript, string handling involved messy concatenation, lots of + signs, and cluttered readability. Enter ES6 template literals – a modern, elegant way to embed expressions, variables, and even functions directly inside strings using backticks ` `.
Let’s walk through the powerful features of template literals step-by-step with clean examples and real-world inspiration.
Basic Syntax of Template Literals
Template literals use backticks instead of single or double quotes. They allow embedded expressions using the ${...} syntax.
const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting);
Hello, Alice!
Why Template Literals Are Better
- Improved readability
- Easy multi-line support
- Embed any valid JavaScript expression
- Great for dynamic HTML generation
Multiline Strings Without Escaping
No more \n or ugly hacks. Just write the way you think it should appear.
const poem = `
Roses are red,
Violets are blue,
ES6 is awesome,
And so are you.
`;
console.log(poem);
Roses are red,
Violets are blue,
ES6 is awesome,
And so are you.
Embedding Expressions
Any valid JavaScript expression can be evaluated inside ${}. This includes arithmetic, ternary operators, or even function calls.
const a = 5;
const b = 10;
console.log(`The sum of a and b is ${a + b}.`);
The sum of a and b is 15.
Using Functions Inside Template Literals
You can execute functions inline, making it highly dynamic.
function toUpper(str) {
return str.toUpperCase();
}
const language = "JavaScript";
console.log(`Welcome to ${toUpper(language)} tutorial!`);
Welcome to JAVASCRIPT tutorial!
Nested Template Literals
You can combine logic and structure like a pro. Nesting templates can simplify HTML generation.
const user = {
name: "Eve",
role: "Admin"
};
const message = `
<div>
<h2>Hello, ${user.name}!</h2>
<p>Role: ${user.role}</p>
</div>
`;
console.log(message);
<div>
<h2>Hello, Eve!</h2>
<p>Role: Admin</p>
</div>
Tagged Template Literals – Advanced Control
A tagged template allows you to parse the template literal with a function. Useful for escaping HTML, localization, or custom formatting.
function highlight(strings, ...values) {
return strings.reduce((acc, str, i) => acc + str + (values[i] ? "<strong>" + values[i] + "</strong>" : ""), "");
}
const lang = "JavaScript";
const output = highlight`Learning ${lang} is fun!`;
console.log(output);
Learning <strong>JavaScript</strong> is fun!
Dynamic HTML Generation Example
Template literals are perfect for generating HTML in JavaScript applications:
const items = ["Apple", "Banana", "Cherry"];
const html = `
<ul>
${items.map(item => `<li>${item}</li>`).join("")}
</ul>
`;
console.log(html);
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
Use Case: Email Template with Placeholder Data
Build email content dynamically:
const user = { name: "David", product: "Smartwatch" };
const email = `
Hi ${user.name},
Thank you for purchasing the ${user.product}. We hope you love it!
Cheers,
The Team
`;
console.log(email);
Hi David,
Thank you for purchasing the Smartwatch. We hope you love it!
Cheers,
The Team
Summary
Template literals are one of the most impactful features of modern JavaScript. They allow you to:
- Write cleaner, readable strings
- Embed values and expressions directly into strings
- Create dynamic, maintainable content for UI, emails, logs, and more
- Leverage tagging for advanced processing and security (like escaping HTML)
Once you get used to backticks and ${}, you'll never want to go back to old-school string concatenation again. Let your strings breathe — the modern way.
Recognize the important boundary
Template text is not automatically safe HTML. Insert user text with textContent instead of treating it as markup.
Try a small variation
JavaScript · original source for practice
const name = "Diya";
const marks = 72;
console.log(`${name}: ${marks}`);
Your task: Replace marks = 72 with marks = 80. Predict the result before running the edited program.
The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.
Worked answer and reasoning
The embedded expression reads the edited mark when the string is evaluated.
JavaScript · complete worked variation
const name = "Diya";
const marks = 80;
console.log(`${name}: ${marks}`);
Expected output
Diya: 80Predict the original program
JavaScript · original program for this question
const name = "Diya";
const marks = 72;
console.log(`${name}: ${marks}`);
Keep the useful idea
A template literal uses backticks and embeds expression values with dollar-brace placeholders. It lets a report combine a name and mark without a chain of string concatenations.
Check your variation against this explanation: The embedded expression reads the edited mark when the string is evaluated.
Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.
Reaching the recap and completing the quizzes are separate milestones.