Strings & Template Literals

Code examples

Example 1 — A living string with a calculation inside

const name = "Ahmed";
const item = "Masala Chai";
const price = 250;

const message = `Hello ${name}, your ${item} costs Rs ${price}. Two cups will cost Rs ${price * 2}.`;
console.log(message);

const note = `Order ready.
Please collect it from the counter.`;
console.log(note);

What it does: Every ${ } slot is filled when the string is built: the name, the item, the price — and the last slot even multiplies price * 2 on the spot. The second string simply runs over two lines inside the backticks; the Enter key press is part of the text, with no \n anywhere.

What you will see: the console prints Hello Ahmed, your Masala Chai costs Rs 250. Two cups will cost Rs 500. and then the note on two separate lines: Order ready. and Please collect it from the counter.

Example 2 — Length, index and a password check

const drink = "Chai";
console.log(drink.length);
console.log(drink[0]);
console.log(drink[3]);

const password = "abc123";
if (password.length < 8) {
  console.log("Password too short");
} else {
  console.log("Password length OK");
}

const typed = "CHAI";
const saved = "chai";
console.log(typed.toLowerCase() === saved.toLowerCase());
console.log(saved.includes("ha"));

What it does: length counts characters and the index reads one box at a time, starting from zero — this is exactly how a real sign-up page checks a password: shorter than 8 characters means too short. The last lines show the case trick in action: typed and saved only match after both are lowercased, and includes checks whether one piece of text sits inside another.

What you will see: the console prints 4, then C, then i, then Password too short (because abc123 has only 6 characters), then true, then true.

Example 3 — Slice, split, and a receipt from one template

const text = "Masala Chai";
console.log(text.slice(0, 6));
console.log(text.split(" ")[1]);

const product = { name: "Masala Chai", price: 250, qty: 2 };
const receipt = `===== RECEIPT =====
Item: ${product.name}
Qty: ${product.qty}
Total: Rs ${product.price * product.qty}`;
console.log(receipt);

What it does: slice(0, 6) cuts out the first six characters, and split(" ") chops the text at the space into an array, so index 1 is the second word. Then the finale: one template literal turns a product object into a full receipt card — the multi-line layout, the values and the total calculation all live inside a single string.

What you will see: the console prints Masala, then Chai, then the receipt exactly like this: a line ===== RECEIPT =====, then Item: Masala Chai, then Qty: 2, then Total: Rs 500.