Lesson 07: JavaScript Strings: JS Strings · Template Strings · String Methods · String Search · String Reference

Phase 1 of 15

1. What Is a String?

What Is It?

A string in JavaScript is simply a piece of text. The word "string" comes from the idea of characters (letters, numbers, symbols, spaces) strung together in a sequence · just like beads on a necklace.

Strings are everywhere in programming:

A user's name: "Maria"
An email address: "maria@example.com"
A message: "Your order has been shipped!"
A product title: "iPhone 15 Pro Max"

In real jobs · whether you're a web developer, data analyst, or mobile app builder · you will work with strings every single day.

Why Do Strings Exist?

Computers fundamentally understand only numbers. Strings are the bridge between human-readable language and what the computer processes. Without strings, we couldn't display messages to users, store names in a database, send emails, or show product descriptions on a website.

Key Mental Model

Think of a string like a row of individual boxes, each containing one character:

code

  "Hello"
  ┌───┬───┬───┬───┬───┐
  │ H │ e │ l │ l │ o │
  └───┴───┴───┴───┴───┘
    0   1   2   3   4    ← position numbers (called "indexes")

Each character sits at a numbered position, starting from 0 (not 1). This matters a lot when we learn string methods later.

✏️ Your Task

Practise what you just learned about 1. What Is a String?. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 2 of 15

2. Creating Strings

Using Quotes

A JavaScript string is written inside quotes. You can use double quotes, single quotes, or backticks (we'll cover backticks in Template Strings).

javascript

let text = "John Doe";        // Double quotes
let carName1 = "Volvo XC60";  // Double quotes
let carName2 = 'Volvo XC60';  // Single quotes — same result

Output: Both carName1 and carName2 store exactly the same text: Volvo XC60

Important Note · No Difference Between Single and Double Quotes

Single quotes and double quotes work exactly the same way in JavaScript. The only time it matters which one you pick is when your string contains a quote character.

Quotes Inside Quotes

What happens if your string contains a quote? You mix them:

javascript

let answer1 = "It's alright";           // single quote inside double quotes ✅
let answer2 = "He is called 'Johnny'";  // single quotes inside double quotes ✅
let answer3 = 'He is called "Johnny"';  // double quotes inside single quotes ✅

Expected Output:

code

It's alright
He is called 'Johnny'
He is called "Johnny"

🤔 Thinking question: What would happen if you tried: let x = 'It's alright';? Answer: JavaScript would get confused and stop reading the string at the second apostrophe. You'd get an error!

Real-World Example

javascript

let productName = "Nike Air Max";
let tagline = 'Just Do It';
let review = "The shoes are 'amazing' and very comfortable.";

console.log(productName);  // Nike Air Max
console.log(tagline);      // Just Do It
console.log(review);       // The shoes are 'amazing' and very comfortable.

✏️ Your Task

Practise what you just learned about 2. Creating Strings. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 3 of 15

3. String Length

What Is Length?

Every string has a length · the total number of characters in it, including spaces and punctuation.

JavaScript gives us a built-in property called .length to find this number instantly.

Property vs Method: A property is like a label on a box · you just read it. A method is like pressing a button on a machine · it does an action. .length is a property (no parentheses needed).

Syntax

javascript

let myString = "Hello";
let size = myString.length;
console.log(size);  // 5

Step-by-Step Breakdown

javascript

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;
console.log(length);  // 26

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" · we create a string with 26 letters
text.length · JavaScript counts each character
length now holds the number 26
console.log(length) · prints 26 to the screen

More Examples

javascript

let name = "Alice";
console.log(name.length);        // 5

let sentence = "Hello World";
console.log(sentence.length);    // 11  (space counts!)

let empty = "";
console.log(empty.length);       // 0

Real-World Use

In real jobs, you use .length to:

Validate forms: "Password must be at least 8 characters" → if (password.length < 8)
Limit tweet/message length: "You have 280 characters remaining" → 280 - text.length
Check if a field is empty: if (username.length === 0) { alert("Please enter a name"); }

✏️ Your Task

Practise what you just learned about 3. String Length. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 4 of 15

4. Escape Characters

The Problem

What happens when your string must contain the same quote character that wraps it?

javascript

// ❌ This causes an ERROR:
let text = "We are the so-called "Vikings" from the north.";
// JavaScript sees the string end at the second " before Vikings

JavaScript reads: string starts at ", then ends at " right before Vikings. Everything after is broken code.

The Solution · Backslash `\`

The backslash (\) is an escape character. It tells JavaScript: "the next character is NOT special · treat it as plain text."

Think of it like a shield: \" means "this double quote is just text, not the end of the string."

The Three Most Important Escape Sequences

Code	Result	Description
`\"`	`"`	Insert a double quote inside a double-quoted string
`\'`	`'`	Insert a single quote inside a single-quoted string
`\\`	`\`	Insert an actual backslash character

Examples

javascript

// Insert double quotes inside a string:
let text1 = "We are the so-called \"Vikings\" from the north.";
console.log(text1);
// Output: We are the so-called "Vikings" from the north.

// Insert single quote inside a string:
let text2 = 'It\'s alright.';
console.log(text2);
// Output: It's alright.

// Insert a backslash:
let text3 = "The character \\ is called backslash.";
console.log(text3);
// Output: The character \ is called backslash.

Other Escape Sequences

JavaScript also supports these escape codes (originally designed for printers and typewriters, but useful in some environments):

Code	Result
`\n`	New Line (move to the next line)
`\t`	Tab (horizontal space)
`\r`	Carriage Return
`\b`	Backspace
`\f`	Form Feed
`\v`	Vertical Tab

javascript

let message = "Line 1\nLine 2\nLine 3";
console.log(message);
// Output:
// Line 1
// Line 2
// Line 3

let formatted = "Name:\tAlice\nAge:\t25";
console.log(formatted);
// Output:
// Name:   Alice
// Age:    25

⚠️ Common Beginner Mistake: Forgetting the backslash when a string contains a quote. Always use \" or \' when needed · or switch your quote style.

✏️ Your Task

Practise what you just learned about 4. Escape Characters. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 5 of 15

5. Breaking Long Lines

Why Break Lines?

Programmers aim to keep code lines short (typically under 80 · 100 characters) for readability. Long lines are hard to read and maintain.

Method 1 · Break After an Operator

You can safely break a statement after any operator (=, +, etc.):

javascript

document.getElementById("demo").innerHTML =
"Hello Dolly!";
// Output on screen: Hello Dolly!

Method 2 · String Concatenation (Joining with `+`)

Use the + operator to join two string pieces together across lines:

javascript

document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
// Output: Hello Dolly!

What does + do with strings? It joins (concatenates) them. "Hello " + "World" becomes "Hello World".

javascript

// Simple concatenation example:
let firstName = "Ada";
let lastName = "Lovelace";
let fullName = firstName + " " + lastName;
console.log(fullName);  // Ada Lovelace

✏️ Your Task

Practise what you just learned about 5. Breaking Long Lines. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 6 of 15

6. Strings as Objects

The Normal Way (Recommended)

Normally, strings are primitive values · simple and fast:

javascript

let x = "John";  // primitive string ✅

The Object Way (Avoid This!)

You can also create strings using the new String() keyword, which turns the string into an object:

javascript

let y = new String("John");  // string object ❌ (avoid)

Why Avoid String Objects?

Slower: Objects take more memory and are slower to process.
Unexpected comparisons: This is the biggest trap:

javascript

let x = "John";
let y = new String("John");

console.log(x == y);   // true  (values are equal)
console.log(x === y);  // false (different types! one is string, one is object)

Why? The == operator compares just the value. The === operator compares both the value AND the type. Since x is a primitive string and y is an object, === says they're NOT equal.

javascript

// Two String objects compared:
let a = new String("John");
let b = new String("John");

console.log(a == b);   // false
console.log(a === b);  // false

Why does comparing two objects return false? Because in JavaScript, two different objects are never equal to each other, even if they contain the same content. They are two separate boxes in memory.

✅ Rule: Always create strings as primitive values (with quotes). Never use new String().

✏️ Your Task

Practise what you just learned about 6. Strings as Objects. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 7 of 15

7. Template Strings (Template Literals)

What Are Template Strings?

Template strings (also called template literals) are a modern, powerful way to write strings. They were introduced in ES6 (2016).

Instead of regular quotes, you wrap them in backticks (the key above Tab on your keyboard):

code

` This is a template string `

Feature 1 · Quotes Inside Freely

With backticks, you can use single AND double quotes inside without any escaping:

javascript

let text = `He's often called "Johnny"`;
console.log(text);
// Output: He's often called "Johnny"

Feature 2 · Multi-line Strings

With regular strings, you can't just press Enter inside quotes. With template strings, you can:

javascript

// ❌ Regular string — can't span lines like this:
// let poem = "Roses are red,
// Violets are blue";  // ERROR

// ✅ Template string — works perfectly:
let poem = `Roses are red,
Violets are blue,
JavaScript is great,
And so are you!`;

console.log(poem);
// Output:
// Roses are red,
// Violets are blue,
// JavaScript is great,
// And so are you!

Feature 3 · String Interpolation (Embedding Variables)

This is the most powerful feature. Instead of joining strings with +, you embed variables directly inside the string using ${ }:

Syntax: ` Hello ${variableName}! `

javascript

// The OLD way with + (concatenation):
let name = "Alice";
let age = 30;
let message = "Hello, " + name + "! You are " + age + " years old.";

// The MODERN way with template strings:
let messageNew = `Hello, ${name}! You are ${age} years old.`;

console.log(messageNew);
// Output: Hello, Alice! You are 30 years old.

Inside ${ }, you can put any valid JavaScript expression · variables, calculations, function calls, etc.

Feature 4 · Expressions Inside `${ }`

You're not limited to just variable names:

javascript

let price = 49.99;
let quantity = 3;
let tax = 0.08;

let receipt = `
Item Price: $${price}
Quantity:   ${quantity}
Subtotal:   $${price * quantity}
Tax (8%):   $${(price * quantity * tax).toFixed(2)}
Total:      $${(price * quantity * (1 + tax)).toFixed(2)}
`;

console.log(receipt);
// Output:
// Item Price: $49.99
// Quantity:   3
// Subtotal:   $149.97
// Tax (8%):   $12.00
// Total:      $161.97

Real-World Use

Template strings are used constantly in web development for building HTML dynamically:

javascript

let user = "Maria";
let score = 95;

// Building an HTML card with a template string:
let card = `
  <div class="student-card">
    <h2>${user}</h2>
    <p>Score: ${score}/100</p>
    <p>Grade: ${score >= 90 ? "A" : "B"}</p>
  </div>
`;

console.log(card);
// Output: A complete HTML block ready to insert into a webpage

✏️ Your Task

Practise what you just learned about 7. Template Strings (Template Literals). Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 8 of 15

8. String Methods · Extracting Text

String methods are built-in tools that perform actions on strings. Think of them like commands: "Hey string, do THIS."

Method 1 · `charAt(index)`

Returns the character at a specific position (index). Remember: counting starts at 0.

javascript

let text = "Hello";
console.log(text.charAt(0));  // H
console.log(text.charAt(1));  // e
console.log(text.charAt(4));  // o

javascript

// Real-world: Get the first letter of a name to create initials
let name = "Johnson";
let initial = name.charAt(0);
console.log(initial);  // J

Method 2 · `charCodeAt(index)`

Returns the Unicode number (a standard numeric code) of the character at a given position. Useful for comparing characters or doing character-based validation.

javascript

let text = "ABC";
console.log(text.charCodeAt(0));  // 65  (code for 'A')
console.log(text.charCodeAt(1));  // 66  (code for 'B')
console.log(text.charCodeAt(2));  // 67  (code for 'C')

Lowercase a = 97, uppercase A = 65. This is why JavaScript is case-sensitive.

Method 3 · `at(index)` (Modern)

Similar to charAt() but also accepts negative indexes to count from the end:

javascript

let text = "Hello World";
console.log(text.at(0));   // H  (first character)
console.log(text.at(-1));  // d  (last character)
console.log(text.at(-5));  // W  (5th from end)

✅ Use at(-1) instead of text[text.length - 1] · much cleaner!

Method 4 · Bracket Notation `[index]`

You can access characters like array items using square brackets:

javascript

let text = "Hello";
console.log(text[0]);  // H
console.log(text[4]);  // o

⚠️ Note: If the index doesn't exist, charAt() returns "" (empty string), but text[index] returns undefined.

Method 5 · `slice(start, end)`

Cuts out a portion of a string from start to (but NOT including) end. This is the most commonly used extraction method.

javascript

let text = "Apple, Banana, Cherry";
//          0123456789...

console.log(text.slice(7, 13));   // Banana
console.log(text.slice(0, 5));    // Apple
console.log(text.slice(15));      // Cherry  (no end = go to end of string)
console.log(text.slice(-6));      // Cherry  (negative = count from end)

Step-by-step for text.slice(7, 13):

Start at index 7 (letter B)
Stop before index 13 (space after a)
Result: Banana

javascript

// Real-world: Extract domain from email
let email = "alice@gmail.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain);  // gmail.com

Method 6 · `substring(start, end)`

Very similar to slice(), but does NOT accept negative indexes (negatives are treated as 0):

javascript

let text = "Hello World";
console.log(text.substring(0, 5));   // Hello
console.log(text.substring(6, 11));  // World
console.log(text.substring(6));      // World

When to use which? Use slice() when you might need negative indexes. Use substring() when you know only non-negative positions.

✏️ Your Task

Practise what you just learned about 8. String Methods · Extracting Text. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 9 of 15

9. String Methods · Changing Case

`toUpperCase()`

Converts all characters to uppercase:

javascript

let text = "hello world";
let upper = text.toUpperCase();
console.log(upper);  // HELLO WORLD

`toLowerCase()`

Converts all characters to lowercase:

javascript

let text = "HELLO WORLD";
let lower = text.toLowerCase();
console.log(lower);  // hello world

Real-World Use

javascript

// Case-insensitive comparison (very common in login systems):
let userInput = "ALICE";
let storedName = "alice";

if (userInput.toLowerCase() === storedName.toLowerCase()) {
  console.log("Names match!");  // Names match!
}

javascript

// Standardize product names before saving to database:
let rawInput = "   NIKE AIR MAX   ";
let cleaned = rawInput.trim().toLowerCase();
console.log(cleaned);  // "nike air max"

✏️ Your Task

Practise what you just learned about 9. String Methods · Changing Case. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 10 of 15

10. Padding and Trimming

`trim()`

Removes whitespace (spaces, tabs, newlines) from both ends of a string. Does NOT remove spaces in the middle.

javascript

let text = "   Hello World   ";
let trimmed = text.trim();
console.log(trimmed);          // "Hello World"
console.log(trimmed.length);   // 11  (vs 17 before trimming)

`trimStart()` and `trimEnd()`

Remove whitespace from only one side:

javascript

let text = "   Hello   ";
console.log(text.trimStart());  // "Hello   "
console.log(text.trimEnd());    // "   Hello"

Real-World Use

javascript

// Users often accidentally type spaces in forms:
let emailInput = "  user@example.com  ";
let cleanEmail = emailInput.trim().toLowerCase();
console.log(cleanEmail);  // "user@example.com"

`padStart(length, padChar)` and `padEnd(length, padChar)`

Pad (fill) a string on the left or right with a character until it reaches a desired length:

javascript

let num = "5";
console.log(num.padStart(3, "0"));  // "005"
console.log(num.padEnd(3, "0"));    // "500"

Step-by-step for "5".padStart(3, "0"):

Target length: 3
Current length: 1
Need 2 more characters → add "0" twice on the LEFT
Result: "005"

javascript

// Real-world: Format order numbers
let orderId = "47";
let formatted = orderId.padStart(6, "0");
console.log(formatted);  // "000047"

// Format time display (3 → 03 minutes):
let minutes = "3";
console.log(minutes.padStart(2, "0"));  // "03"

✏️ Your Task

Practise what you just learned about 10. Padding and Trimming. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 11 of 15

11. Replacing Content

`replace(searchValue, newValue)`

Finds the first occurrence of a value and replaces it:

javascript

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
console.log(newText);  // Please visit W3Schools!
console.log(text);     // Please visit Microsoft!  (original unchanged!)

⚠️ Important: String methods do NOT modify the original string. They always return a new string. Strings in JavaScript are immutable (cannot be changed in place).

javascript

// Only replaces the FIRST match:
let text = "cat cat cat";
let result = text.replace("cat", "dog");
console.log(result);  // "dog cat cat"

`replaceAll(searchValue, newValue)`

Replaces all occurrences:

javascript

let text = "cat cat cat";
let result = text.replaceAll("cat", "dog");
console.log(result);  // "dog dog dog"

Case-Insensitive Replace with Regular Expression

By default, replace() is case-sensitive. Use /pattern/i (a regular expression with the i flag meaning "ignore case") for case-insensitive replacement:

javascript

let text = "Please visit Microsoft!";
let newText = text.replace(/microsoft/i, "W3Schools");
console.log(newText);  // Please visit W3Schools!

Regular Expression: A special pattern for searching text. We'll explore these more in the search section. For now, just know that /word/i means "find word ignoring case."

javascript

// Real-world: Sanitize user input
let comment = "This is really GREAT great Great!";
let sanitized = comment.replaceAll(/great/gi, "good");
console.log(sanitized);  // "This is really good good good!"
// (g = global/all occurrences, i = case-insensitive)

✏️ Your Task

Practise what you just learned about 11. Replacing Content. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 12 of 15

12. Concatenation and Splitting

`concat(string1, string2, ...)`

Joins two or more strings together (an alternative to +):

javascript

let first = "Hello";
let second = "World";
let result = first.concat(" ", second);
console.log(result);  // Hello World

Modern JavaScript prefers template strings or + over .concat(), but you may see it in older code.

`split(separator)`

Splits a string into an array (a list) of smaller strings, based on a separator character:

javascript

let text = "apple,banana,cherry";
let fruits = text.split(",");
console.log(fruits);         // ["apple", "banana", "cherry"]
console.log(fruits[0]);      // "apple"
console.log(fruits.length);  // 3

Step-by-step:

text.split(",") → finds every comma
Cuts the string at each comma
Returns an array of the pieces

javascript

// Split by space to get individual words:
let sentence = "The quick brown fox";
let words = sentence.split(" ");
console.log(words);   // ["The", "quick", "brown", "fox"]
console.log(words.length);  // 4

// Split every character:
let word = "Hello";
let letters = word.split("");
console.log(letters);  // ["H", "e", "l", "l", "o"]

Real-World Use

javascript

// Parse a CSV (comma-separated values) line from a spreadsheet:
let csvLine = "Alice,28,Engineer,Lagos";
let fields = csvLine.split(",");
let name = fields[0];    // "Alice"
let age = fields[1];     // "28"
let job = fields[2];     // "Engineer"
let city = fields[3];    // "Lagos"

console.log(`${name} is a ${age}-year-old ${job} from ${city}.`);
// Output: Alice is a 28-year-old Engineer from Lagos.

✏️ Your Task

Practise what you just learned about 12. Concatenation and Splitting. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 13 of 15

13. String Search Methods

Method 1 · `indexOf(searchValue, startFrom)`

Finds the position (index) of the first occurrence of a value inside a string. Returns -1 if not found.

javascript

let text = "Please locate where 'locate' occurs!";
console.log(text.indexOf("locate"));   // 7
console.log(text.indexOf("locate", 8)); // 21  (start searching from position 8)
console.log(text.indexOf("xyz"));       // -1  (not found)

Checking if something exists:

javascript

let email = "alice@gmail.com";
if (email.indexOf("@") !== -1) {
  console.log("Valid email format!");
} else {
  console.log("Missing @");
}
// Output: Valid email format!

Method 2 · `lastIndexOf(searchValue)`

Like indexOf() but finds the last occurrence:

javascript

let text = "Please locate where 'locate' occurs!";
console.log(text.lastIndexOf("locate"));  // 21

Method 3 · `includes(searchValue, startFrom)`

Returns true if the string contains the value, false otherwise. Cleaner than checking indexOf() !== -1:

javascript

let text = "Hello World JavaScript";
console.log(text.includes("World"));       // true
console.log(text.includes("Python"));      // false
console.log(text.includes("world"));       // false (case-sensitive!)

javascript

// Real-world: Check if a product is in a category list
let categories = "electronics,phones,tablets,laptops";
if (categories.includes("phones")) {
  console.log("This is a phone!");
}
// Output: This is a phone!

Method 4 · `startsWith(searchValue, startFrom)`

Checks if a string starts with a specific value:

javascript

let text = "Hello World";
console.log(text.startsWith("Hello"));   // true
console.log(text.startsWith("World"));   // false
console.log(text.startsWith("World", 6)); // true (start checking from index 6)

javascript

// Real-world: Check if a URL is secure
let url = "https://mybank.com";
if (url.startsWith("https")) {
  console.log("Secure connection!");
} else {
  console.log("Warning: Not secure!");
}
// Output: Secure connection!

Method 5 · `endsWith(searchValue, length)`

Checks if a string ends with a specific value:

javascript

let text = "Hello World";
console.log(text.endsWith("World"));   // true
console.log(text.endsWith("Hello"));   // false
console.log(text.endsWith("Hello", 5)); // true (only check first 5 chars)

javascript

// Real-world: Validate file extensions
let fileName = "report2024.pdf";
if (fileName.endsWith(".pdf")) {
  console.log("This is a PDF file.");
}
// Output: This is a PDF file.

Method 6 · `search(regexp)`

Searches for a pattern (regular expression or string) and returns the position of the first match, or -1:

javascript

let text = "Please locate where 'locate' occurs!";
console.log(text.search("locate"));    // 7
console.log(text.search(/locate/));    // 7
console.log(text.search(/LOCATE/i));   // 7 (case-insensitive with /i flag)

Difference from indexOf(): search() supports regular expressions (patterns), while indexOf() only works with plain strings.

Method 7 · `match(regexp)`

Returns an array of all matches found:

javascript

let text = "The rain in Spain stays mainly in the plain";
let result = text.match(/ain/g);  // /g = global (find all)
console.log(result);
// Output: ["ain", "ain", "ain", "ain"]
// Found in: r-ain, Sp-ain, m-ain-ly, pl-ain

javascript

// Case-insensitive global search:
let text2 = "Hello HELLO hello";
let matches = text2.match(/hello/gi);
console.log(matches);  // ["Hello", "HELLO", "hello"]
console.log(matches.length);  // 3

Method 8 · `matchAll(regexp)`

Returns an iterator with all matches including detailed information. Must use the g flag:

javascript

let text = "cat bat sat";
let iterator = text.matchAll(/[a-z]at/g);  // matches any letter + "at"

for (let match of iterator) {
  console.log(match[0], "at position", match.index);
}
// Output:
// cat at position 0
// bat at position 4
// sat at position 8

✏️ Your Task

Practise what you just learned about 13. String Search Methods. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 14 of 15

14. String Reference · Quick Lookup Table

Here is a complete reference of all JavaScript String methods:

Method	Description	Example Output
`charAt(n)`	Character at position n	`"Hello".charAt(1)` → `"e"`
`charCodeAt(n)`	Unicode of char at n	`"A".charCodeAt(0)` → `65`
`at(n)`	Char at n (allows negatives)	`"Hello".at(-1)` → `"o"`
`concat(str)`	Join strings	`"Hi".concat(" There")` → `"Hi There"`
`endsWith(str)`	Ends with?	`"file.pdf".endsWith(".pdf")` → `true`
`includes(str)`	Contains?	`"Hello".includes("ell")` → `true`
`indexOf(str)`	First position of str	`"Hello".indexOf("l")` → `2`
`lastIndexOf(str)`	Last position of str	`"Hello".lastIndexOf("l")` → `3`
`length`	Character count	`"Hello".length` → `5`
`match(regexp)`	Array of matches	`"aabaa".match(/a/g)` → `["a","a","a","a"]`
`matchAll(regexp)`	Iterator of all matches	(see example above)
`padEnd(n, ch)`	Pad end to length n	`"5".padEnd(3,"0")` → `"500"`
`padStart(n, ch)`	Pad start to length n	`"5".padStart(3,"0")` → `"005"`
`repeat(n)`	Repeat n times	`"ab".repeat(3)` → `"ababab"`
`replace(a, b)`	Replace first a with b	`"cat".replace("c","b")` → `"bat"`
`replaceAll(a, b)`	Replace all a with b	`"aa".replaceAll("a","b")` → `"bb"`
`search(regexp)`	Position of first match	`"Hello".search(/l/)` → `2`
`slice(s, e)`	Extract from s to e	`"Hello".slice(1,4)` → `"ell"`
`split(sep)`	Split into array	`"a,b".split(",")` → `["a","b"]`
`startsWith(str)`	Starts with?	`"Hello".startsWith("He")` → `true`
`substring(s, e)`	Extract from s to e	`"Hello".substring(1,4)` → `"ell"`
`toLowerCase()`	All lowercase	`"HI".toLowerCase()` → `"hi"`
`toUpperCase()`	All uppercase	`"hi".toUpperCase()` → `"HI"`
`trim()`	Remove surrounding spaces	`" hi ".trim()` → `"hi"`
`trimEnd()`	Remove trailing spaces	`" hi ".trimEnd()` → `" hi"`
`trimStart()`	Remove leading spaces	`" hi ".trimStart()` → `"hi "`
`valueOf()`	Primitive value of string	`"Hello".valueOf()` → `"Hello"`
`fromCharCode(code)`	Char from Unicode code	`String.fromCharCode(65)` → `"A"`

✏️ Your Task

Practise what you just learned about 14. String Reference · Quick Lookup Table. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 15 of 15

15. Applied Exercises

🏋️ Exercise 1 · User Profile Formatter

Objective: Practice basic string creation, .length, and template literals.

Real-world Scenario: You're building a social media app. When a user registers, their profile data must be cleaned up and formatted.

Warm-up Mini-Example First:

javascript

let city = "  Lagos  ";
let cleanCity = city.trim();
console.log(`City: ${cleanCity}`);  // City: Lagos

Your Exercise:

Given this raw input data from a form:

javascript

let rawFirstName = "  alice  ";
let rawLastName = "  WONDER  ";
let rawEmail = "  ALICE@EMAIL.COM  ";
let rawAge = "25";

Step-by-step Instructions:

Clean each field using .trim() to remove surrounding spaces
Format the name: first letter uppercase, rest lowercase (Hint: use toUpperCase(), toLowerCase(), charAt(), and slice())
Make the email all lowercase
Build a profile string using a template literal

Hints:

To capitalize: name.charAt(0).toUpperCase() + name.slice(1).toLowerCase()
Template strings let you embed expressions directly

Expected Output:

code

=== User Profile ===
Name: Alice Wonder
Email: alice@email.com
Age: 25
Username length: 5

Self-Check Questions:

What does .trim() return if the string has no spaces?
What happens if you call .charAt(0) on an empty string?
Why do we use .toLowerCase() on emails?

🏋️ Exercise 2 · Password Strength Checker

Objective: Practice .length, .includes(), and conditional logic.

Real-world Scenario: A banking app needs to check if a user's password is strong enough before accepting it.

Warm-up Mini-Example:

javascript

let pass = "hello123";
console.log(pass.length >= 8);         // true
console.log(pass.includes("@"));       // false

Your Exercise:

Write a password checker that evaluates the following:

javascript

let password = "MyPass@2024";

Step-by-step Instructions:

Check length: must be at least 8 characters
Check for uppercase: does it contain any uppercase letter? (Hint: password !== password.toLowerCase())
Check for number: does it contain a digit? (Hint: password.match(/[0-9]/))
Check for special character: does it include @, #, $, or !?
Display a strength rating: Weak, Medium, or Strong

Expected Output for "MyPass@2024":

code

Password Analysis for: MyPass@2024
Length (11): ✅ Long enough
Has uppercase: ✅ Yes
Has number: ✅ Yes
Has special char (@): ✅ Yes
Strength: STRONG

What-If Challenge: What if the password was "hello"? Predict the output before running.

🏋️ Exercise 3 · Receipt Builder with Template Strings

Objective: Practice template strings, expressions in ${ }, and string formatting.

Real-world Scenario: A restaurant POS (point-of-sale) system needs to print receipts.

Warm-up Mini-Example:

javascript

let item = "Coffee";
let price = 3.5;
console.log(`${item.padEnd(15, ".")} $${price.toFixed(2)}`);
// Output: Coffee......... $3.50

Your Exercise:

javascript

let restaurantName = "The Golden Spoon";
let items = [
  { name: "Jollof Rice", price: 2500, qty: 2 },
  { name: "Grilled Chicken", price: 3500, qty: 1 },
  { name: "Fruit Juice", price: 800, qty: 3 }
];
let vatRate = 0.075;

Step-by-step Instructions:

Calculate each item's subtotal (price × qty)
Sum all subtotals for total before tax
Calculate VAT (7.5%)
Calculate grand total
Format a complete receipt using template strings and .toFixed(2)

Expected Output:

code

=============================
      THE GOLDEN SPOON
=============================
Jollof Rice x2      ₦5,000.00
Grilled Chicken x1  ₦3,500.00
Fruit Juice x3      ₦2,400.00
-----------------------------
Subtotal:           ₦10,900.00
VAT (7.5%):           ₦817.50
-----------------------------
GRAND TOTAL:        ₦11,717.50
=============================

✏️ Your Task

Practise what you just learned about 15. Applied Exercises. Open your editor, type the examples above by hand, modify them, and observe what changes.

🏗️ Build It — Mini Project

🎓 Project Overview

You will build a Student Report Card Generator · a realistic program that takes student data, processes it using string methods, and produces a formatted report card.

What you'll practice: All string concepts from this tutorial · creation, template literals, .toUpperCase(), .padStart(), .padEnd(), .repeat(), .includes(), .slice(), and more.

Stage 1 · Setup & Core Data

Illustrative Preview:

starter.html

let name = "Adeola";
console.log(`Student: ${name.toUpperCase()}`);
// Output: Student: ADEOLA

Lesson 07 complete! 🎉

You covered:

✅ 1. What Is a String?
✅ 2. Creating Strings
✅ 3. String Length
✅ 4. Escape Characters
✅ 5. Breaking Long Lines
✅ 6. Strings as Objects
✅ 7. Template Strings (Template Literals)
✅ 8. String Methods · Extracting Text

← Lesson 06 Lesson 08 →

JavaScript Strings: JS Strings · Template Strings · String Methods · String Search · String Reference

👋 Welcome to Lesson 07

What Is It?

Why Do Strings Exist?

Key Mental Model

Using Quotes

Important Note · No Difference Between Single and Double Quotes

Quotes Inside Quotes

Real-World Example

What Is Length?

Syntax

Step-by-Step Breakdown

More Examples

Real-World Use

The Problem

The Solution · Backslash \

The Three Most Important Escape Sequences

Examples

Other Escape Sequences

Why Break Lines?

Method 1 · Break After an Operator

Method 2 · String Concatenation (Joining with +)

The Normal Way (Recommended)

The Object Way (Avoid This!)

Why Avoid String Objects?

What Are Template Strings?

Feature 1 · Quotes Inside Freely

Feature 2 · Multi-line Strings

Feature 3 · String Interpolation (Embedding Variables)

Feature 4 · Expressions Inside ${ }

Real-World Use

Method 1 · charAt(index)

Method 2 · charCodeAt(index)

Method 3 · at(index) (Modern)

Method 4 · Bracket Notation [index]

Method 5 · slice(start, end)

Method 6 · substring(start, end)

toUpperCase()

toLowerCase()

Real-World Use

trim()

trimStart() and trimEnd()

Real-World Use

padStart(length, padChar) and padEnd(length, padChar)

replace(searchValue, newValue)

replaceAll(searchValue, newValue)

Case-Insensitive Replace with Regular Expression

concat(string1, string2, ...)

split(separator)

Real-World Use

Method 1 · indexOf(searchValue, startFrom)

Method 2 · lastIndexOf(searchValue)

Method 3 · includes(searchValue, startFrom)

Method 4 · startsWith(searchValue, startFrom)

Method 5 · endsWith(searchValue, length)

Method 6 · search(regexp)

Method 7 · match(regexp)

Method 8 · matchAll(regexp)

🏋️ Exercise 1 · User Profile Formatter

🏋️ Exercise 2 · Password Strength Checker

🏋️ Exercise 3 · Receipt Builder with Template Strings

🎓 Project Overview

Stage 1 · Setup & Core Data

Lesson 07 complete! 🎉

The Solution · Backslash `\`

Method 2 · String Concatenation (Joining with `+`)

Feature 4 · Expressions Inside `${ }`

Method 1 · `charAt(index)`

Method 2 · `charCodeAt(index)`

Method 3 · `at(index)` (Modern)

Method 4 · Bracket Notation `[index]`

Method 5 · `slice(start, end)`

Method 6 · `substring(start, end)`

`toUpperCase()`

`toLowerCase()`

`trim()`

`trimStart()` and `trimEnd()`

`padStart(length, padChar)` and `padEnd(length, padChar)`

`replace(searchValue, newValue)`

`replaceAll(searchValue, newValue)`

`concat(string1, string2, ...)`

`split(separator)`

Method 1 · `indexOf(searchValue, startFrom)`

Method 2 · `lastIndexOf(searchValue)`

Method 3 · `includes(searchValue, startFrom)`

Method 4 · `startsWith(searchValue, startFrom)`

Method 5 · `endsWith(searchValue, length)`

Method 6 · `search(regexp)`

Method 7 · `match(regexp)`

Method 8 · `matchAll(regexp)`