Strings and Text

Strings and Text | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 30 MIN OF ACTIVE PRACTICE

Learn Strings and Text step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Use template literals for readable interpolation
Normalize text only according to a stated rule
Insert untrusted text with textContent
Build a formatter that cleans a learner name and produces a clear progress sentence.

DEEP EXPLANATION

Build the complete mental model

Build the mental model

Single quotes, double quotes, and template literals all create strings. Template literals are most valuable when a result combines text with several expressions or spans lines. Interpolation evaluates each expression and converts the result to text. Keep calculations outside a long template when naming them would make the rule easier to test and translate. Before writing more syntax, name the values involved in Strings and Text, who creates them, and which result or effect the program promises. Trace the smallest example by hand and identify any browser or runtime API separately from the language feature. A useful mental model should predict a changed input, not merely describe the demonstration after it runs.

Use the API deliberately

String methods return new values because strings are immutable. trim removes surrounding whitespace; includes answers whether a substring occurs; startsWith and endsWith express boundary checks; slice selects a range; and replace or replaceAll creates edited text. Case conversion can support a simple comparison, but locale-aware searching and human names need more care than lowercasing everything. During implementation, keep the template literal rule in a focused function or event boundary with explicit inputs. Choose names that reveal the domain, keep calculation separate from document, console, storage, or network effects, and prefer the narrowest API that expresses the problem. Compare this design with one reasonable alternative and explain why the selected construct makes ownership or control flow clearer.

Handle boundaries and tradeoffs

Text is not HTML. A learner name may contain angle brackets without being markup. Use textContent when displaying untrusted text and reserve HTML parsing for trusted, deliberately constructed content. JavaScript strings use UTF-16, so length and numeric indexing operate on code units. For user-perceived characters, Intl.Segmenter can be more appropriate than naïve indexing. Verification for Strings and Text must cover an ordinary case, an empty or missing case, invalid input, and the most important threshold. Predict each result before running it, then locate the first value that violates the contract when reality differs. Record the corrected case as a repeatable check and explain which product behavior should occur instead of allowing undefined, NaN, stale data, or silent failure to spread.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Primary worked example

Trace this Strings and Text example from validated input to returned value or visible effect before editing it.

function welcome(name, completed, total) {
  const cleanName = String(name).trim();
  if (!cleanName) throw new TypeError("Name is required");
  return `Welcome, ${cleanName}! You completed ${completed} of ${total} lessons.`;
}
console.log(welcome("  Salma  ", 4, 10));

Example 2: Second worked example

This variation changes the shape of the problem so you can compare the underlying template literal contract instead of copying one solution.

function containsTopic(title, query) {
  const normalizedTitle = title.trim().toLocaleLowerCase();
  const normalizedQuery = query.trim().toLocaleLowerCase();
  return normalizedQuery !== "" && normalizedTitle.includes(normalizedQuery);
}
console.log(containsTopic("Async JavaScript", "  SCRIPT "));

How to trace this lesson

Write down the exact inputs used by Strings and Text.
Predict each returned value and observable effect before running the example.
Mark the first boundary where invalid or missing data could enter.
Verify the ordinary, empty, invalid, and threshold cases independently.

Common mistakes and corrections

Assuming string length always equals the number of visible characters fails for some emoji and combined Unicode characters.: Make the template literal rule explicit and cover it with a focused example.
Changing several parts of the example before explaining the original result.: Make one change at a time and compare it with a written prediction.
Testing only the demonstration's happy path.: Add missing, invalid, empty, and boundary inputs that exercise the stated contract.

PRACTICE LADDER

Move from recognition to independent work

1
Use template literals for readable interpolation
2
Normalize text only according to a stated rule
3
Insert untrusted text with textContent
4
Build a formatter that cleans a learner name and produces a clear progress sentence.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Core rule

Applied boundary

RUNNABLE EXAMPLE

Change one assumption at a time

Predict the output, run the example, then change one input and one boundary in the Strings and Text example. Explain every changed result before continuing.

function welcome(name, completed, total) {
  const cleanName = String(name).trim();
  if (!cleanName) throw new TypeError("Name is required");
  return `Welcome, ${cleanName}! You completed ${completed} of ${total} lessons.`;
}
console.log(welcome("  Salma  ", 4, 10));

function welcome(name, completed, total) {
  const cleanName = String(name).trim();
  if (!cleanName) throw new TypeError("Name is required");
  return `Welcome, ${cleanName}! You completed ${completed} of ${total} lessons.`;
}
console.log(welcome("  Salma  ", 4, 10));

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const message = "Welcome, " + name + " you have " + done / total * 100 + "%";

Reveal repair and explanation

const percent = Math.round((done / total) * 100);
const message = `Welcome, ${name}. You have completed ${percent}%.`;

A named calculation and a template literal make precedence and punctuation visible.

INDEPENDENT LAB

Build without copying the example

Build a formatter that cleans a learner name and produces a clear progress sentence.

// Define small functions before composing the complete solution.
// Build a formatter that cleans a learner name and produces a clear progress sentence.

// Define small functions before composing the complete solution.
// Build a formatter that cleans a learner name and produces a clear progress sentence.

Press Run to execute your code.

Self-review checklist Use template literals for readable interpolation Normalize text only according to a stated rule Insert untrusted text with textContentWhat did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Which DOM property displays untrusted input as plain text? textContent innerHTML outerHTML

2. Which evidence best demonstrates mastery of Strings and Text? A prediction, boundary tests, and an explained result A copied snippet with no changes One successful happy-path run

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering