Day 1: Mastering JavaScript Template Literals

Rahma Sameh — Wed, 26 Feb 2025 10:00:26 +0000

🚀 Welcome to Day 1 of my 100-day web development challenge!

Today, we’re diving into template literals—one of JavaScript’s most useful features for handling strings dynamically.

What Are Template Literals?

Template literals are a modern way to work with strings in JavaScript. Unlike regular strings, they:

✅ Use backticks () instead of quotes ("" or '').

✅ Support multi-line strings without needing \n.

✅ Allow embedded expressions using ${} (known as string interpolation).

Why Are They Useful?

1️⃣ Easier String Concatenation
Before template literals:

const name = "Rahmeh";
const message = "Hello, " + name + "! Welcome to JavaScript.";
console.log(message);

With template literals:

const name = "Rahmeh";
const message = `Hello, ${name}! Welcome to JavaScript.`;
console.log(message);

✅ Cleaner and more readable!

2️⃣ Multi-Line Strings Without \n
Before:

const oldWay = "Hello!\nWelcome to JavaScript.\n Let's learn together!";
console.log(oldWay);

With template literals:

const newWay = `Hello!
Welcome to JavaScript.
Let's learn together!`;
console.log(newWay);

✅ No need for \n or string concatenation!

3️⃣ Expression Evaluation Inside Strings

const a = 10;
const b = 5;
console.log(`The sum of ${a} and ${b} is ${a + b}.`); 
// Output: The sum of 10 and 5 is 15.

✅ Perform calculations and insert values dynamically.

🚀 Challenge of the Day:
Now that we understand template literals, let's apply them!

💡 Challenge: Write a program that:

🔹 Asks the user for their name and age.

🔹 Calculates how many years until they turn 100.

🔹 Displays a friendly message using template literals.

Example Output:

Hello, Rahmeh! You are 25 years old. You will turn 100 in 75 years.
Starter Code:

const name = prompt("What is your name?");
const age = prompt("How old are you?");
const yearsTo100 = 100 - age;

console.log(`Hello, ${name}! You are ${age} years old. You will turn 100 in ${yearsTo100} years.`);

📝 What’s Next?

✅ Try modifying the program to handle invalid inputs.

✅ Add a simple HTML form instead of prompt().

✅ Experiment with multi-line template literals.

Stay tuned for Day 2, where we explore javaScript conditionals and make this program even smarter!

💬 What’s your favorite use case for template literals?
Drop a comment! 🚀

DEV Community: Rahma Sameh

Day 1: Mastering JavaScript Template Literals