Skip to content
WANCODE
BM

Strings and Templates

13 minBeginnerHTML · CSS · JS

In this lesson

  • Write strings with single quotes, double quotes and backticks
  • Build text with template literals instead of +
  • Clean and inspect text with trim, toLowerCase, toUpperCase, includes, slice and length

The big idea

Most of what a website shows is text built by code: greetings, prices, error messages. Template literals make that text easy to build, and string methods clean up whatever users type.

Three kinds of quotes

JavaScript
const a = "Jom makan!";          // double quotes
const b = 'Jom makan!';          // single quotes — exactly the same
const c = "It's lunch time";     // use " " when the text has an apostrophe
const d = 'She said "sedap"';    // use ' ' when the text has double quotes
const e = `Jom makan!`;          // backticks: a template literal (see below)

Single and double quotes behave identically — just be consistent. The backtick key is usually at the top-left of the keyboard, under Esc.

Joining text: + vs template literals

Concatenation with +

JavaScript
const item = "roti canai";
const qty = 2;
const msg = "You ordered " + qty + " " + item + ".";
// easy to forget a space: "You ordered 2roti canai."

Template literal

JavaScript
const item = "roti canai";
const qty = 2;
const msg = `You ordered ${qty} ${item}.`;
// reads like the final sentence

Inside backticks, ${ } drops in the value of any expression — a variable, maths, even a method call.

JavaScript
const price = 1.8;
console.log(`2 roti canai = RM${(price * 2).toFixed(2)}`); // 2 roti canai = RM3.60

Everyday string tools

JavaScript
const city = "  Kota Kinabalu ";

city.length;                // 16  — counts every character, spaces too
city.trim();                // "Kota Kinabalu" — removes spaces at both ends
city.trim().toUpperCase();  // "KOTA KINABALU"
city.toLowerCase();         // "  kota kinabalu "
city.includes("Kina");      // true  — case-sensitive!
city.includes("kina");      // false

const word = "Kinabalu";
word.slice(0, 4);           // "Kina" — from index 0 up to (not including) 4
word.slice(4);              // "balu" — from index 4 to the end
word.slice(-3);             // "alu"  — the last 3 characters

Positions in a string are called indexes, and they start at 0: in "Kinabalu", K is index 0 and i is index 1. slice(start, end) includes start but stops before end.

Methods don't change the original

Strings can't be changed in place. name.trim() returns a new trimmed string — name itself stays the same. Store the result: const clean = name.trim();

You can chain methods: email.trim().toLowerCase() trims first, then lowercases the result. Each step hands its new string to the next.

Look at the card in the preview: the spacing is a mess. Rewrite message as a template literal (backticks with ${ }) so the card says Hi siti! You have 120 points. — no extra spaces around the name, and a space before points.

Don't edit firstName: real users type messy things, so clean it with code (trim).

Checks

  • message reads "Hi siti! You have 120 points."
  • message is a template literal
  • firstName still has its messy spaces
  • The card shows the message

Check understanding

Q1

const n = 3; — which line prints I ate 3 roti?

Q2

let city = " Ipoh "; city.trim(); — what is city now?

Q3

What is "Melaka".slice(0, 3)?

What you learned

  • Strings go in "double" or 'single' quotes, or backticks for template literals.
  • Template literals drop values in with ${ } and are easier to read than + chains.
  • trim, toLowerCase, toUpperCase, includes and slice return new values; length counts characters. Indexes start at 0.
Preview

Console output from your code appears here.

Step 1 of 3