Strings

Before you start, set up a new project folder named day03 exactly as you set up day01 in 1.2: open the folder in VS Code, run npm init -y and npm install --save-dev typescript in its terminal, and type the same tsconfig.json. Every program today goes in that folder.

Almost every program shows text to a person: a greeting, a total, a label on a receipt. On Day 1 you learned that a piece of text in quotes is a string, with the type string, and that console.log shows it without the quotes. Today is all about strings: how to write them, how to build them from other values, and how to pull pieces out of them.

Start with a puzzle. The quotes mark where a string starts and ends. So how do you write a string that contains a quote, such as the sign She said "hi"?

The first answer is that TypeScript accepts two kinds of quotes. A string can go inside double quotes ("Lima") or single quotes ('Lima'); both make exactly the same string. A string must end with the same kind of quote it started with, so the other kind can sit inside it as an ordinary character.

const city = "Lima";
const country = 'Peru';
console.log(city, country);
console.log("It's open");
console.log('She said "hi"');

Lima Peru
It's open
She said "hi"

Line 2 uses single quotes and makes the same kind of value as line 1: both are strings, and neither shows its quotes. Line 4 is in double quotes, so the apostrophe in It's is just a character. Line 5 is in single quotes, so the double quotes inside are just characters. This course writes strings in double quotes, and uses single quotes only for text that contains double quotes.

const message = 'It's raining';
console.log(message);

apostrophe-broken.ts:1:21 - error TS1005: ',' expected.
apostrophe-broken.ts:1:23 - error TS1005: ',' expected.
apostrophe-broken.ts:1:30 - error TS1005: ',' expected.
apostrophe-broken.ts:1:32 - error TS1002: Unterminated string literal.

What if the text contains both kinds of quotes, or a character you cannot type into a string at all, such as a line break? For those, a string can hold escape characters: a backslash \ followed by a letter or symbol, which together stand for one special character. The backslash tells the checker, “the next character does not have its usual meaning.”

console.log("She said \"hi\"");
console.log('It\'s open');
console.log("Line one\nLine two");
console.log("Name:\tAna");
console.log("C:\\day03\\notes.txt");

She said "hi"
It's open
Line one
Line two
Name:	Ana
C:\day03\notes.txt

console.log("Tea\nCoffee");
console.log("A\\nB");
console.log('Say "yes"');
console.log("Don\'t\tstop");

Tea
Coffee
A\nB
Say "yes"
Don't	stop

A program often has the pieces of a message in separate variables: a first name in one, a last name in another. On Day 1, console.log put several values on one line with spaces between them. But that only shows the values; it does not make one string you can store, and it always puts in exactly one space. To build a new string out of pieces, you join them.

You already know + adds numbers. Between two strings, + does something different: it glues them together, end to end, into one new string. Joining strings this way is called concatenation. "Hot" + "dog" is "Hotdog", with no space, because + adds exactly the characters it is given and nothing else.

const firstName = "Ana";
const lastName = "Lee";
const fullName = firstName + " " + lastName;
console.log(fullName);
console.log("Hello, " + fullName + "!");
console.log(firstName + lastName);

Ana Lee
Hello, Ana Lee!
AnaLee

Now vary the types: put a number on one side of +. The rule is: if either side of + is a string, + joins, and the other side is first turned into text the way String() from Day 2 would turn it. Only when both sides are numbers does + add. And as Day 2 taught, operators on the same row of the precedence table are applied left to right, one pair at a time, so the rule is applied to each + in turn.

console.log("5" + 1);
console.log(5 + 1);
console.log(1 + 2 + "3");
console.log("1" + 2 + 3);
console.log("Total: " + 2 + 3);
console.log("Total: " + (2 + 3));
console.log(typeof ("5" + 1));

51
6
33
123
Total: 23
Total: 5
string

So "5" + 1 is "51", not 6: the quotes make "5" text, and text plus anything is more text. Lines 3 and 4 have the same three values in a different order and give different answers, because the first + decides whether the running result is a number or a string. Line 5 is the classic bug: a label followed by a calculation. Put the calculation in parentheses, as on line 6.

Why does the type checker allow a string plus a number at all, when Day 2 showed it rejects ageText * 2? Because joining a number into a message is something programs do all the time, and the result is always a sensible string. The checker knows the rule too: it gives "5" + 1 the type string. But the other arithmetic operators have no meaning for text, so the checker still rejects them:

const stock = "5";
console.log(stock - 1);

minus-text.ts:2:13 - error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

This is Day 2’s TS2362, pointing at stock (column 13). Fix it with Number(stock) - 1, or delete the file, before your next check.

const adultTickets = "3";
const childTickets = 2;
console.log("Tickets:", adultTickets + childTickets);
console.log("Tickets:", Number(adultTickets) + childTickets);

Tickets: 32
Tickets: 5

const apples = 4;
const pears = 6;
console.log("Fruit: " + apples + pears);
console.log(apples + pears + " pieces of fruit");
console.log("Fruit: " + (apples + pears));
console.log("2" + "2");

Fruit: 46
10 pieces of fruit
Fruit: 10
22

Concatenation works, but a long message built with + is hard to read and easy to get wrong. Look at line 4 of this program: every space has to be inside a string, and each + has to be in the right place.

const item = "muffin";
const price = 2.5;
const quantity = 4;
console.log("Order: " + quantity + " x " + item + " = " + quantity * price);
console.log(`Order: ${quantity} x ${item} = ${quantity * price}`);
console.log(`Each ${item} costs ${price}.`);
console.log(`Next order: ${quantity + 1} items`);

Order: 4 x muffin = 10
Order: 4 x muffin = 10
Each muffin costs 2.5.
Next order: 5 items

Line 5 makes exactly the same text in a much more readable way. It is a template literal: a string written between backticks ` instead of quotes. (On many keyboards the backtick key is at the top left, next to the 1 key.) Inside a template literal, you can write ${expression}, called a placeholder: when the line runs, the program works out the expression, turns the result into text, and puts it in the string at that spot. Everything outside the placeholders is copied exactly, spaces included.

`text ${expression} more text`

Read line 5 the way the program works through it. ${quantity} becomes 4, ${item} becomes muffin, and ${quantity * price} is worked out to 10 before it is put in. Line 6 uses a placeholder inside a sentence, and line 7 shows that a placeholder can hold a calculation: ${quantity + 1} is 5. Inside a placeholder, the expression is worked out on its own before it is put in, so ${quantity + 1} adds two numbers without the extra parentheses 3.2 needed. A template literal is still a string: its type is string.

Now vary one more thing: press Enter inside a template literal. Unlike quotes, backticks can span several lines, and every line break and every space between the backticks becomes part of the string. A string that spans several lines like this is a multi-line string.

const show = "Robot Dance";
const time = "7:30";
const poster = `${show}
Tonight at ${time}
  Tickets at the door`;
console.log(poster);

Robot Dance
Tonight at 7:30
  Tickets at the door

A template literal has one more advantage: the type checker reads the expressions in its placeholders, just like any other code. A typo there is caught before anything runs:

const total = 12;
console.log(`Total: ${totl}`);

template-typo.ts:2:23 - error TS2552: Cannot find name 'totl'. Did you mean 'total'?

Column 23 is where totl starts, inside the placeholder. Fix the spelling, or delete the file, before your next check.

const total = 12;
console.log("Total: ${total}");
console.log(`Total: ${total}`);

Total: ${total}
Total: 12

const width = 3;
const height = 4;
console.log(`${width} x ${height}`);
console.log(`Area: ${width * height}`);
console.log(`${width} + ${height} = ${width + height}`);
console.log("Perimeter: ${2 * (width + height)}");

3 x 4
Area: 12
3 + 4 = 7
Perimeter: ${2 * (width + height)}

To print someone’s initials, a program needs the first letter of their name. To check a password is long enough, it needs to know how many characters it has. Both questions are about the characters inside a string.

A string is a sequence of characters, one after another, in order. Each character has a numbered position called its index. The first character’s index is 0, the next is 1, and so on. Think of the index as “how many characters come before this one”: nothing comes before the first character, so its index is 0. Here are the indexes in "Hopper":

Three tools read this sequence:

• text.length is the number of characters in text. "Hopper".length is 6. Every character counts: spaces, punctuation, and each escape such as \n (one character, as 3.1 showed). length is a property: a value that belongs to another value, read with a dot and no parentheses, just as console.log reads log from console.
• text[i] gives the character at index i, as a string of length 1. The square brackets [ ] do the indexing. Since counting starts at 0, the last index is always text.length - 1.
• text.at(i) also gives the character at index i, but it accepts negative indexes, which count from the end: at(-1) is the last character, at(-2) the one before it. at is a method: a function that belongs to a value, called with a dot and parentheses, such as word.at(-1). You have used one already: Day 1’s "=".repeat(12) called the string method repeat. The value in the parentheses is the method’s argument, as with console.log.

const word = "Hopper";
console.log(word.length);
console.log(word[0]);
console.log(word[3]);
console.log(word[word.length - 1]);
console.log(word.at(-1));
console.log(word.at(-2));
console.log(word[6]);
console.log(word[-1]);

6
H
p
r
r
e
undefined
undefined

Now vary it: what does the type checker think of word[6]? It treats word[i] as a string for every i, because it does not work out which positions exist. So a mistake with the index slips past npx tsc and only shows up when the program runs:

const word = "Hopper";
const last = word[word.length];
console.log("Last letter:", last);
console.log(last.length);

npx tsc reports no errors for this file, but node index-too-far.ts shows:

Last letter: undefined
TypeError: Cannot read properties of undefined (reading 'length')

word.length is 6, so line 2 asks for word[6], one past the end, and last holds undefined. Line 3 shows it. Line 4 asks for last.length, and undefined has no properties at all, so Node stops with a runtime error, as on Day 1 (the full report also shows the file, line 4, and a caret). This is an off-by-one error: being one away from the right number, here because the last index is length - 1, not length.

at is different. The checker knows at can run off the end, so it gives its result the type string | undefined, read “a string or undefined.” (Hover over last in VS Code to see it. This is a preview of Day 9, which teaches types like this.) The checker then refuses to let you use the result as if it were certainly a string:

const word = "Hopper";
const last = word.at(-1);
console.log(last.length);

at-possibly-undefined.ts:3:13 - error TS18048: 'last' is possibly 'undefined'.

The message is exact: last might be undefined, and undefined has no length. Day 9 shows how to deal with it. Until then, use at’s result where any value is fine, such as in console.log or a template literal, and use square brackets when you need to call something on the character. Fix or delete this file before your next check.

const city = "Lima, Peru";
console.log(city.length);
console.log(city[4]);
console.log(city[city.length - 2]);
console.log(city.at(-4));
console.log(city[10]);

10
,
r
P
undefined

Indexing gives one character. Often you need a longer piece of a string: the year from a date like "2026-10-16", or a file’s name without its .txt. A part of a string is called a substring.

The method slice(start, end) gives a new string holding the characters from index start up to, but not including, index end. Leave out end, and the slice runs to the end of the string. Like at, slice accepts negative indexes, which count from the end.

Why is end left out of the slice? Because it makes the numbers easy to work with. end - start is exactly the number of characters you get, so slice(0, 4) gives 4 characters. And a slice that ends at i fits perfectly against one that starts at i: text.slice(0, i) + text.slice(i) is always the whole text again, with no character lost or doubled.

const date = "2026-10-16";
const year = date.slice(0, 4);
const month = date.slice(5, 7);
const day = date.slice(8);
console.log(year, month, day);
console.log(date.slice(-5));

2026 10 16
10-16

Now vary the numbers, to see what slice does at the edges. To make an empty string visible, the program puts square brackets around the result in a template literal; an empty string is a string with no characters at all, written "", with length 0.

const word = "Hopper";
console.log(word.slice(0, 3));
console.log(word.slice(3));
console.log(word.slice(0, 3) + word.slice(3));
console.log(word.slice(-3));
console.log(`[${word.slice(2, 2)}]`);
console.log(`[${word.slice(4, 1)}]`);
console.log(word.slice(0, 100));

Hop
per
Hopper
per
[]
[]
Hopper

• Lines 2–4: slice(0, 3) and slice(3) meet at index 3, and joined they rebuild "Hopper".
• Line 5: slice(-3) is the last three characters.
• Line 6: start and end are the same, so no characters are taken: an empty string.
• Line 7: when start comes after end, slice gives an empty string too; it never runs backward.
• Line 8: an end past the last index just stops at the end of the string. slice never gives an error and never gives undefined.

const date = "2026-10-16";
console.log(`[${date.slice(5, 2)}]`);
console.log(`[${date.slice(5, 6)}]`);
console.log(`[${date.slice(5, 7)}]`);

[]
[1]
[10]

const fileName = "notes.txt";
console.log(fileName.slice(0, 5));
console.log(fileName.slice(6));
console.log(fileName.slice(-3));
console.log(fileName.slice(0, -4));
console.log(fileName.slice(2, 4));

notes
txt
txt
notes
te

Text that people type is messy. One person types their email as Ana.Lee@Example.COM, another adds a stray space at the end. To a program, "Ana" and "ana" are different strings, and so are "ana" and "ana ". Before using typed text, programs usually clean it up. Three string methods do the most common cleaning:

• toUpperCase() gives a copy of the string with every letter changed to a capital letter.
• toLowerCase() gives a copy with every letter changed to a small letter.
• trim() gives a copy with the whitespace removed from both ends. Whitespace means characters you cannot see: spaces, tabs, and newlines. Whitespace in the middle is kept.

None of them needs an argument, but the parentheses are still required: they are what makes the method run.

const typed = "  Ana.Lee@Example.COM  ";
const email = typed.trim().toLowerCase();
console.log(`[${typed}]`);
console.log(`[${email}]`);
console.log(typed.length, email.length);

[  Ana.Lee@Example.COM  ]
[ana.lee@example.com]
23 19

Now vary the text, to see exactly what each method touches:

const title = "  the Hobbit  ";
console.log(`[${title.trim()}]`);
console.log(`[${title.toUpperCase()}]`);
console.log("Room 12b".toUpperCase());
console.log(`[${"  two  words  ".trim()}]`);
console.log("Line\n".trim().length);

[the Hobbit]
[  THE HOBBIT  ]
ROOM 12B
[two  words]
4

toUpperCase changes only letters: the spaces stay on line 3, and the digits on line 4 are unchanged. Line 5 shows that trim keeps the two spaces between the words. On line 6, the newline at the end is whitespace too, so "Line\n".trim() is "Line", 4 characters.

const title = "the hobbit";
console.log(title.toUpperCase);
console.log(title.toUpperCase());

[Function: toUpperCase]
THE HOBBIT

const title = "the hobbit";
console.log(title.length());

length-call.ts:2:19 - error TS2349: This expression is not callable.
  Type 'Number' has no call signatures.

const code = "  ab-12 ";
console.log(`[${code.toUpperCase()}]`);
console.log(code.trim().toUpperCase().length);
console.log(code.trim()[0].toUpperCase());

[  AB-12 ]
5
A

Suppose a program stores "hello" and you want "Jello". The natural idea is to replace the first character, the way you would correct a letter on paper:

let greeting = "hello";
greeting[0] = "J";
console.log(greeting);

change-letter.ts:2:1 - error TS2542: Index signature in type 'String' only permits reading.

The checker rejects line 2. An index signature is the checker’s name for reaching parts of a value with square brackets, as in greeting[0], and “only permits reading” means you may read greeting[0] but never assign to it. Notice that greeting is a let variable, so the variable may change. What may not change is the string. Fix or delete this file before your next check.

This is a rule of JavaScript itself: strings are immutable, which means a string can never be changed after it is made. No method and no assignment can change the characters of an existing string. Every tool you have met today (slice, toUpperCase, trim, and the rest) leaves the original alone and gives back a new string.

Why design strings this way? Because a string you have stored is then guaranteed to stay the same. If one part of a program could change the characters of a string, every other line using that string would see the change, which makes bugs very hard to trace. With immutable strings, a const name always means the same text.

So how do you get "Jello"? Build a new string from pieces of the old one, and store the new string in the variable:

let greeting = "hello";
greeting = "J" + greeting.slice(1);
console.log(greeting);

Jello

Line 2 works out the right side first, as Day 2 taught: greeting.slice(1) is "ello", and "J" + "ello" is a new string, "Jello". Then the assignment stores the new string in greeting. The variable changed, from one string to another; the string "hello" never did.

const nickname = "ana";
const loud = nickname.toUpperCase();
console.log(nickname, loud);

ana ANA

const nickname = "ana";
nickname.toUpperCase();
console.log(nickname);

ana

const title = "matilda";
title[0] = title[0].toUpperCase();
console.log(title);

capitalize-title.ts:2:1 - error TS2542: Index signature in type 'String' only permits reading.

const title = "matilda";
const capitalized = title[0].toUpperCase() + title.slice(1);
console.log(capitalized);

Matilda

Is there an @ in this email address? Where is the space in this full name? Does this file name start with IMG? Each is a question about what a string contains, and three methods answer them:

• indexOf(text) gives the index where text first appears in the string, or -1 if it does not appear at all. -1 is used because no character can be at index -1 when counting from the start, so it cannot be mistaken for a real position.
• includes(text) gives true if text appears anywhere in the string, and false if not.
• startsWith(text) gives true if the string begins with text. (A matching method, endsWith, checks the end.)

true and false are Day 2’s booleans. All three methods are case-sensitive, as names are in code: "A" and "a" are different characters, so searching for "Ana" does not find "ana".

const fullName = "Ada Lovelace";
const space = fullName.indexOf(" ");
const first = fullName.slice(0, space);
const last = fullName.slice(space + 1);
console.log(space);
console.log(first);
console.log(last);

3
Ada
Lovelace

Now vary what you search for:

const email = "ana.lee@example.com";
console.log(email.includes("@"));
console.log(email.indexOf("@"));
console.log(email.indexOf("."));
console.log(email.indexOf("#"));
console.log(email.startsWith("ana"));
console.log(email.startsWith("Ana"));
console.log(email.includes("Example"));

true
7
3
-1
true
false
false

indexOf("@") is 7: a n a . l e e fill indexes 0 to 6. indexOf(".") is 3, the first dot, even though there is another one later. "#" does not appear, so line 5 shows -1. Lines 7 and 8 show case-sensitivity: the address starts with ana, not Ana, and contains example, not Example.

Sometimes you want to ask whether two strings are exactly the same. The operator === does that: a === b gives true when a and b have exactly the same characters in the same order, and false otherwise. (This is a preview of Day 4, which teaches comparisons fully.) Case counts here too:

const word = "Level";
const lower = word.toLowerCase();
console.log(lower === "level");
console.log(lower === "Level");
console.log(word.toUpperCase() === "LEVEL");

true
false
true

lower is "level", so line 3 is true and line 4 is false: a capital L is a different character. Line 5 compares the capital copy, "LEVEL", with "LEVEL". Changing both strings to the same case before comparing is the usual way to ignore case.

const fullName = "Cher";
const space = fullName.indexOf(" ");
console.log(space);
console.log(fullName.slice(0, space));
console.log(fullName.slice(space + 1));

-1
Che
Cher

const song = "banana boat";
console.log(song.indexOf("a"));
console.log(song.indexOf("boat"));
console.log(song.indexOf("Boat"));
console.log(song.includes("nan"));
console.log(song.startsWith("boat"));
console.log(song.slice(song.indexOf(" ") + 1));

1
7
-1
true
false
boat

Some changes are about the text inside a string: a phone number written with dashes that should use spaces, a word to swap for another. Others are about layout: a row of dashes under a heading, or numbers lined up in a column. Four methods handle these, and like every string method, each gives back a new string.

• replace(old, new) gives a copy with the first match of old replaced by new.
• replaceAll(old, new) gives a copy with every match replaced.
• repeat(count) gives the string repeated count times, as on Day 1.
• padStart(width, fill) adds copies of fill to the start until the string is width characters long. Leave out fill, and it pads with spaces. A string already width long or longer is unchanged.

const phone = "555-123-4567";
console.log(phone.replace("-", " "));
console.log(phone.replaceAll("-", " "));
console.log(phone.replaceAll("-", ""));
console.log(phone.replace("123", "999"));
console.log(phone.replace("888", "999"));
console.log(phone);

555 123-4567
555 123 4567
5551234567
555-999-4567
555-123-4567
555-123-4567

Now the layout tools. To line numbers up on their right edge, as on a receipt or a scoreboard, pad each one to the same width:

const anaScore = 92;
const benScore = 7;
const kimScore = 100;
console.log("-".repeat(9));
console.log("Ana" + String(anaScore).padStart(6));
console.log("Ben" + String(benScore).padStart(6));
console.log("Kim" + String(kimScore).padStart(6));
console.log("-".repeat(9));
console.log(String(benScore).padStart(3, "0"));
console.log("Hopper".padStart(3));

---------
Ana    92
Ben     7
Kim   100
---------
007
Hopper

padStart is a string method, so each score is first turned into text with Day 2’s String(). String(92) is "92", two characters, so padStart(6) adds four spaces in front; "7" gets five and "100" gets three. Every padded score is six characters wide, so the right edges line up. Line 10 pads with "0" instead of spaces, the usual way to make a code like 007. Line 11 shows that a string already longer than the width is left as it is; padStart never cuts a string short.

const total = 4 * 2.5;
console.log(total.padStart(8));

pad-number.ts:2:19 - error TS2339: Property 'padStart' does not exist on type 'number'.

const sign = "Cats and cats and CATS";
console.log(sign.replace("cats", "dogs"));
console.log(sign.replaceAll("cats", "dogs"));
console.log(sign.toLowerCase().replaceAll("cats", "dogs"));
console.log("ab".repeat(3));
console.log("42".padStart(5, "*"));

Cats and dogs and CATS
Cats and dogs and CATS
dogs and dogs and dogs
ababab
***42

A sentence is made of words separated by spaces. A line from a spreadsheet file is made of values separated by commas, like pens,4,1.25. To work with each piece, you need to cut the string apart at its separators.

The method split(separator) does that: it cuts the string at every place separator appears, drops the separators, and gives back the pieces. Splitting with the empty string "" cuts between every character.

The pieces come back in a new kind of value: an array, one value that holds several values in order. Node shows an array in square brackets, with each string in single quotes, like [ 'Ada', 'Lovelace' ]. The checker’s type for it is string[], read “an array of strings.” Arrays get a full day of their own, Day 6; today you only need to read one and use two things with it.

const fullName = "Ada King Lovelace";
const csvLine = "pens,4,1.25";
console.log(fullName.split(" "));
console.log(csvLine.split(","));
console.log("abc".split(""));
console.log(fullName.split(" ").length);

[ 'Ada', 'King', 'Lovelace' ]
[ 'pens', '4', '1.25' ]
[ 'a', 'b', 'c' ]
3

Now vary it by putting the pieces back together. This is a preview of Day 6: an array has a reverse() method, which turns the order of its pieces around, and a join(separator) method, which glues the pieces into one string with separator between each pair. Chained after split(""), they reverse a string:

const word = "stressed";
const reversed = word.split("").reverse().join("");
console.log(reversed);
console.log("2026-10-16".split("-").join("/"));
console.log("one two three".split(" ").join(""));

desserts
2026/10/16
onetwothree

Joining with "" puts nothing between the pieces. Line 4 splits a date at its dashes and joins the pieces with slashes. Line 5 splits at the spaces and joins with nothing, which removes the spaces.

const sentence = "Strings  are fun";
console.log(sentence.split(" "));
console.log(sentence.split(" ").length);

[ 'Strings', '', 'are', 'fun' ]
4

const tags = "red,green,,blue";
console.log(tags.split(","));
console.log(tags.split(",").length);
console.log("level".split("").reverse().join(""));
console.log("a-b-c".split("-").join(" + "));

[ 'red', 'green', '', 'blue' ]
4
level
a + b + c

Day 2 rounded money with Math.round(x * 100) / 100. That gives the right number, but not always the right look: a price of 4.5 shows as 4.5, and a receipt should show 4.50. Rounding gives a number; what you need for display is text with exactly two decimal places.

Numbers have a method for exactly this. toFixed(digits) gives a string showing the number rounded to digits places after the decimal point, adding zeros if needed. toFixed(0) rounds to a whole number. You call it on a number the same way you call a string method on a string: price.toFixed(2).

const price = 4.5;
const share = 10 / 3;
const total = 0.1 + 0.2;
console.log(price.toFixed(2));
console.log(share.toFixed(2));
console.log(total.toFixed(2));
console.log(share.toFixed(0));
console.log(typeof price.toFixed(2));
console.log(`Price: $${price.toFixed(2)}`);

4.50
3.33
0.30
3
string
Price: $4.50

Now vary the numbers: try values that sit exactly halfway on paper.

const fee = 1.005;
const tax = 2.345;
console.log(fee.toFixed(2));
console.log(tax.toFixed(2));
console.log(fee.toFixed(20));

1.00
2.35
1.00499999999999989342

On paper, 1.005 rounds up to 1.01, but line 3 shows 1.00. Day 2 explains why: 1.005 cannot be stored exactly in binary, and line 5 asks for 20 decimal places to reveal the value actually stored, which is a tiny bit less than 1.005. toFixed rounds the stored value correctly, so it rounds down. 2.345 happens to be stored a tiny bit above, so it rounds up. For everyday prices this almost never matters, but it explains a result that looks like a rounding mistake.

const price = 4.5;
const priceText = price.toFixed(2);
console.log(priceText + 1);

4.501

const price = 4.5;
const priceText = price.toFixed(2);
console.log(priceText * 2);

fixed-times.ts:3:13 - error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

const price = 4.5;
console.log((price + 1).toFixed(2));
console.log((price * 2).toFixed(2));

5.50
9.00

const cost = 7;
const rate = 0.0825;
const tax = cost * rate;
console.log(cost.toFixed(2));
console.log(tax.toFixed(2));
console.log((cost + tax).toFixed(2));
console.log(`$${cost.toFixed(1)}`);

7.00
0.58
7.58
$7.0

A library makes a member card from the name a person typed on a sign-up sheet. The typed name is messy, with stray spaces and odd capitals, so the program cleans it, takes it apart, and builds three new strings from the pieces. Before you type it, make sure npx tsc is clean in your day03 folder: fix or delete any broken file from today.

const typedName = "  grace HOPPER ";
const memberNumber = 42;
const yearlyFee = 12.5;

const cleanName = typedName.trim().toLowerCase();
const space = cleanName.indexOf(" ");
const first = cleanName.slice(0, space);
const last = cleanName.slice(space + 1);

const firstCapital = first[0].toUpperCase() + first.slice(1);
const lastCapital = last[0].toUpperCase() + last.slice(1);
const username = first[0] + last + String(memberNumber);
const cardNumber = String(memberNumber).padStart(6, "0");

console.log(`Member: ${firstCapital} ${lastCapital}
Username: ${username}
Card: ${cardNumber}
Fee: $${yearlyFee.toFixed(2)}`);

npx tsc reports no errors, and node member-card.ts shows:

Member: Grace Hopper
Username: ghopper42
Card: 000042
Fee: $12.50

Follow the values in the order the lines run:

Lines 15–18 are one multi-line template literal (3.3), so one console.log shows four lines. Its placeholders put in the names, the username, and the card number, and yearlyFee.toFixed(2) turns 12.5 into "12.50" (3.11), after an ordinary $. Every name is a const: the cleaning never changes typedName; each step makes a new string (3.7). Try another typed name, such as " ADA lovelace", and only the values change.

One thing the program assumes: the name contains a space. With a one-word name, space is -1, and the slices go wrong as in 3.8. Day 4 gives you the tools to check.

Today’s messages and silent surprises in one place. The first group comes from npx tsc; the second shows no message at all.

• A string goes in double or single quotes, and escape characters (\", \', \\, \n, \t) put in characters that quotes cannot. A template literal in backticks can span lines and holds ${expression} placeholders.
• + with a string concatenates: if either side is a string, the other is turned into text, so "5" + 1 is "51". Each + is applied left to right, so put a calculation inside a message in parentheses. Other arithmetic on a string is a type error.
• Indexes start at 0. length counts the characters, text[i] and text.at(i) read one (with at(-1) the last), and slice(start, end) takes a substring up to, but not including, end. A position past the end gives undefined.
• Strings are immutable: every method gives back a new string, so store or use the result. toUpperCase, toLowerCase, trim, replace, replaceAll, repeat, and padStart change text and layout; indexOf (-1 when not found), includes, and startsWith search it; split cuts it into an array.
• number.toFixed(digits) turns a number into a string with exactly that many decimal places. Calculate with numbers first, and format only what you show.

Do these in your day03 folder. First make sure npx tsc prints nothing there: if any broken file from today is still in the folder (such as apostrophe-broken.ts, change-letter.ts, or the question’s capitalize-title.ts), fix it or delete it. Then type each program yourself, check it with npx tsc, run it with node, and only then open the answer. Change the starting values and run them again to test your program.

const fullName = "ada lovelace";
const space = fullName.indexOf(" ");
const firstInitial = fullName[0].toUpperCase();
const lastInitial = fullName[space + 1].toUpperCase();
console.log(`Initials: ${firstInitial}.${lastInitial}.`);

Initials: A.L.

const word = "Racecar";
const lower = word.toLowerCase();
const reversed = lower.split("").reverse().join("");
console.log(`Reversed: ${reversed}`);
console.log(`Palindrome: ${lower === reversed}`);

Reversed: racecar
Palindrome: true

const item = "Notebook";
const price = 3.5;
const lineWidth = 20;
const priceText = "$" + price.toFixed(2);
const line = item + priceText.padStart(lineWidth - item.length);
console.log(line);
console.log("-".repeat(lineWidth));

Notebook       $3.50
--------------------

const city = "san francisco";
const space = city.indexOf(" ");
const short = city[0].toUpperCase() + city[space + 1].toUpperCase();
console.log(short);
console.log(`${city.slice(space + 1)} has ${city.length - space - 1} letters`);
console.log(city.replace("san", "SAN").at(-1));

SF
francisco has 9 letters
o

const quantity = 3 + 4;
console.log("Qty:" + quantity.padStart(4));

quantity-pad.ts:2:31 - error TS2339: Property 'padStart' does not exist on type 'number'.

const quantity = 3 + 4;
console.log("Qty:" + String(quantity).padStart(4));

Qty:   7

const email = "Kim.Park@School.example";
const at = email.indexOf("@");
const user = email.slice(0, at).toLowerCase();
const domain = email.slice(at + 1).toLowerCase();
console.log(user.replaceAll(".", " "));
console.log(domain);
console.log(email.length - domain.length);

kim park
school.example
9

const roomCode = "B" + 2 * 7;
const floor = roomCode.slice(1, 2);
console.log(roomCode, floor + 1);

const roomCode = "B" + 2 * 7;
const floor = roomCode.slice(1, 2);
console.log(roomCode, Number(floor) + 1);

B14 2

let pet = "cat";
pet.toUpperCase();
pet = pet.replace("c", "b");
pet.repeat(2);
console.log(pet);

console.log("a\tb".length);
console.log("a\\tb".length);
console.log(`a
b`.length);
console.log("".length);

3
4
3
0

MDN’s guide explains strings and template literals in more depth, and its reference lists every string method, including some not covered today, such as endsWith and padEnd: MDN: Text formatting and MDN: String (see the instance methods list).

Check each statement. If the answer is “not yet,” reread the linked subsection.

• I can write a string that contains quotes, new lines, and tabs. Reread
• I can predict what + does when one side is a string, and explain why "5" + 1 is "51". Reread
• I can build a message with a template literal, including one that spans lines. Reread
• I can read any character with an index or at(), and find a string's length. Reread
• I can take a substring with slice and say exactly which characters it includes. Reread
• I can clean up text with trim, toUpperCase, and toLowerCase, and chain methods. Reread
• I can explain what immutable means and store a method's result. Reread
• I can search a string with indexOf, includes, and startsWith. Reread
• I can use replace, replaceAll, repeat, and padStart. Reread
• I can split a string into pieces and reverse a string. Reread
• I can format a number with toFixed and explain why the result is a string. Reread