JS Sketchbooksee JavaScript think ✏️
← back to phase 1

1.6 — Strings

Strings are the type your users actually see: names, messages, button labels, error texts. And here’s the picture that unlocks everything about them: a string isn’t a blob — it’s a train of characters, each with a numbered seat. Once you see the train, lengths, positions and cutting pieces out all become obvious.

watch it happen
let name = "Ada";
console.log(name.length);
console.log(name[0]);
console.log("Hi, " + name + "!");
console.log(`Hi, ${name}!`);

"Ada" looks like one thing, but the machine stores it as three cars: A, d, a — coupled in order, each with a seat number underneath. Even the quotes aren’t stored; they were just the wrapper.

"Ada" — a train of charactersA0d1a2
under the hood

The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”

A fact that will save you a debugging session someday: strings are immutable — the train can never be modified in place. (Here the train picture reaches its limit: real train cars can be uncoupled and swapped. A string never allows it.) You cannot swap car 0 of "Ada" to make "Bda". Every string operation — uppercasing, trimming, gluing — builds a brand-new train and leaves the original untouched. So name.toUpperCase() hands you "ADA" as a new string. name itself still points at "Ada" until you reassign it.

Strings come with a rich toolbox attached, all reachable with the dot — recognize the pattern string, dot, tool, no need to memorize the list today.

.toUpperCase() and .toLowerCase() build a new train with every letter recased.

.trim() strips spaces from the ends — form input’s best friend, since users love adding stray spaces.

.includes("da") asks “is this bit aboard, anywhere in the train?” — true or false.

.slice(0, 2) copies out cars 0 up to but not including 2, giving you "Ad".

Why three kinds of quotes? "double" and 'single' are identical — pick one, stay consistent.

Backticks `…` are the upgrade: they allow ${expression} slots. Anything inside is evaluated first — the rule from lesson 0.3 — so `Total: ${2 + 3}` becomes "Total: 5".

Backtick strings can also span multiple lines with a real line break inside them — no + gluing needed:

`Line one Line two` is one single string containing an actual newline.

💼 On the job — for an automation tester this is everyday work: `Expected ${expected} but got ${actual}` is the shape of every good failure message.

your turn

⌨️ glue a full name

Two halves of a name live in two variables. Produce the full name — without ever typing it yourself.

requirements:

  • firstName holds "Ada"; lastName holds "Lovelace".
  • Exactly ONE console.log, and the full name must be built from the two variables — the text "Ada Lovelace" may not appear in your code.
  • Check the expected output closely: there’s a space between the names. It has to come from somewhere.

when you press RUN, the console must show exactly:

Ada Lovelace

✏️ Quick check 1

Type exactly what prints:

let word = "QA";
console.log(word[1]);

✏️ Quick check 2

Type exactly what the console shows for console.log("5" + "5"):

✏️ Quick check 3

Type the exact string that `Score: ${10 * 2}` produces — every character:

teach it back

🗣️ Now teach it back

Explain to a friend: what is a string really (use the train picture), why does counting start at 0, and what makes backtick strings special?

Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.

a few sentences, minimum — you’ve got this
to remember
A string = a train of characters with numbered seats — starting at 0. Last car = length − 1.
Strings are immutable: every operation builds a NEW string. name.toUpperCase() doesn’t change name.
Backticks + ${…} slots = template literals: the slot is evaluated and filled in. The professional way to build text.