String Methods

From a value to a useful message

Text arriving from people is rarely perfectly tidy. A method is an operation attached to a value: name.trim() asks that string for a version without surrounding whitespace. Parentheses call the method; name.length is a property, so it has no parentheses. Use the distinction to read unfamiliar code rather than memorizing every name.

Strings are immutable: these operations return new strings. Keep the result if you need it. trim does not remove spaces between words, and lowercase does not change the original. Chain methods only when each step is clear; temporary variables make debugging easier.

Here are the tools used below:

A yes/no answer is a boolean: true means yes, and false means no. The comparison original.length > cleaned.length asks whether the first length is greater than the second. It produces a boolean too. Tomorrow you will use booleans to make decisions.

Predict the original and the result

Write down which spaces remain. What changes if you remove the assignment to cleaned?

const original = "  Ada Lovelace  ";
const cleaned = original.trim();

console.log(cleaned);
console.log(cleaned.toLowerCase());
console.log(cleaned.includes("Ada"));
console.log(original.length > cleaned.length);

Ada Lovelace
ada lovelace
true
true

Choose the rule before the method

For a display name, preserve the person’s capitalization. For a simple case-insensitive search, compare normalized copies. Do not lowercase all stored text merely to make one comparison easier. A character’s index is its position counted from zero: in "grace", g is at 0, r at 1, and a at 2. slice(0, 3) returns those first three characters, stopping before index 3. It does not modify the source. Calling .toUpperCase() on that result changes the three-letter label to uppercase.

Experiment: try empty text, a single space, and a multiword name. Predict the length after trimming each. For the plain English examples here, length matches the number of characters. Some symbols, such as emoji, can count as more than one unit; we will not use length to count those in this exercise.

Keep the original and name each transformation

String methods return new values. A name like cleaned is a record of a decision: you removed surrounding whitespace, but you have not necessarily changed capitalization or validated the result. Do not assume one cleaning operation performs every other one.

When several methods are chained, the result of one becomes the receiver of the next. Unpack the chain into named steps first. This lets you inspect intermediate values and locate a mistaken assumption, such as searching for lowercase text before converting the string to lowercase.

const raw = "  JavaScript  ";
const trimmed = raw.trim();
const lower = trimmed.toLowerCase();

console.log(raw.length);
console.log(trimmed);
console.log(lower);

14
JavaScript
javascript

The spaces count toward raw.length. The returned lowercase string is separate from both raw and trimmed. A const binding can hold each result because no reassignment is needed.

const topic = "  LOOPS  ";

console.log(topic.includes("loops"));
console.log(topic.trim().toLowerCase().includes("loops"));
console.log("   ".trim().length);

false
true
0

includes is case-sensitive. Trimming and lowercasing deliberately define a comparison policy. A whitespace-only entry becomes empty after trimming, so its original length does not tell you whether a useful topic remains.

Try the rule on new inputs

Try “Loops”, ” loopS ” and “Looping”. Explain which ones contain the exact text “loops” after cleaning. Write the chained expression as three named steps, then rebuild the chain once every intermediate result is clear.

const input = "  grace  ";
// Print Welcome, grace! and GRA.

const input = "  grace  ";
const name = input.trim();

console.log(`Welcome, ${name}!`);
console.log(name.slice(0, 3).toUpperCase());

Welcome, grace!
GRA

Recall without looking

Explain a property versus a method. Show that trimming does not overwrite the original. Then rebuild the label with a different name and no solution open.