Pocket’s numbers are exact now, but nobody wants to read 1220. People want Lunch: $12.20. Text in JavaScript is a string, and most of what a user ever sees from your program is a string you built.
You can write a string with single quotes, double quotes or backticks:
\nconst a = 'Coffee';\nconst b = \"Sam's lunch\";\nconst c = `Bus`;\nconsole.log(a, b, c);Single and double quotes behave the same; pick one style and stick to it (this course uses double quotes). Use the other kind when your text contains a quote, as in "Sam's lunch", or escape it with a backslash: 'Sam\\'s lunch'. \\n inside a string is a line break.
Backticks are special, and you will use them most. They make template literals.
\nJoining strings with + gets messy quickly: "Lunch: $" + dollars + " (" + category + ")". It is easy to forget a space or a quote. A template literal lets you write the text once and drop values into it with ${ }:
const label = \"Lunch\";\nconst cents = 1220;\nconst category = \"food\";\n\nconst line = `${label}: $${(cents / 100).toFixed(2)} (${category})`;\nconsole.log(line);Anything inside ${ } is a full JavaScript expression. It is evaluated, turned into a string, and inserted. Here (cents / 100).toFixed(2) divides to get 12.2, and toFixed(2) turns that into the string "12.20" with exactly two decimals. The first $ is a plain dollar sign; only $ followed by { starts an insertion.
Template literals can also span lines, which is handy for multi-line messages:
\nconst report = `Pocket summary\n Spent: $22.00\n Left: $3.00`;\nconsole.log(report);A string is a sequence of characters, and each one has a position called an index, counting from 0. length tells you how many characters there are.
const word = \"Coffee\";\nconsole.log(word.length); // 6\nconsole.log(word[0]); // first character\nconsole.log(word.at(-1)); // last character\nconsole.log(word.slice(0, 3)); // from index 0 up to, not including, 3\nconsole.log(word.slice(3)); // from index 3 to the endword.at(-1) counts from the end, which saves you writing word[word.length - 1].
Strings come with built-in methods, functions you call with a dot. The ones you will use weekly:
\nconst raw = \" Coffee with Sam \";\nconst clean = raw.trim();\n\nconsole.log(clean); // spaces removed from both ends\nconsole.log(clean.toUpperCase());\nconsole.log(clean.includes(\"Sam\")); // true or false\nconsole.log(clean.startsWith(\"Coffee\"));\nconsole.log(clean.replaceAll(\" \", \"-\"));\nconsole.log(\"7\".padStart(3, \"0\")); // \"007\"\nconsole.log(`[${raw}]`); // the original is untouchedThat last line is the key idea: strings are immutable. No method ever changes a string; each one returns a new string. If you want to keep the result, store it.
\n\nCombining methods is common. To capitalise the first letter of a label, take the first character, uppercase it, and add the rest:
\nconst label = \"groceries\";\nconst nice = label[0].toUpperCase() + label.slice(1);\nconsole.log(nice);Two more methods answer “where is it?” rather than “is it there?”. indexOf("Sam") returns the index where the text first appears, or -1 when it is not there at all. And split(" ") cuts a string into pieces wherever it finds the separator and gives you back a list, ["Coffee", "with", "Sam"]. Lists are called arrays, and they get a whole lesson in section 3.
Pocket constantly crosses the border between text and numbers. Amounts are numbers while you calculate and strings when you display them; typed input is a string until you convert it.
\nconst cents = 450;\nconsole.log(String(cents), typeof String(cents)); // number to string\nconsole.log(`${cents}`.length); // a template literal converts too\nconsole.log(Number(\"4.50\") * 100); // string to number\nconsole.log(Number(\" 12 \")); // spaces around digits are ignored\nconsole.log(Number(\"\")); // careful: an empty string becomes 0The last line is a trap worth remembering. An empty text box converts to 0, not NaN, so “the user typed nothing” looks exactly like “the user typed zero”. When you validate forms in section 4, you will check for empty input before converting.
=== compares strings character by character, and it is case-sensitive: "Food" === "food" is false. Users type categories however they like, so normalise before you compare: trim the spaces and pick one case.
const typed = \" Food \";\nconsole.log(typed === \"food\"); // false\nconsole.log(typed.trim().toLowerCase() === \"food\"); // trueYou can also use < and > on strings. They compare character codes one position at a time, which works for simple lowercase words ("apple" < "banana" is true) and goes wrong quickly beyond that: "Zebra" < "apple" is also true, because every uppercase letter has a smaller code than every lowercase one. Section 3 shows the right way to sort text, with localeCompare, which follows the rules of a real language.
Pocket can now hold amounts, calculate with them exactly and print them in a form people can read. What it cannot do yet is react: warn you when you go over budget, or treat food differently from rent. In the next section your program starts making decisions.
\n","toc":[{"id":"sec-1","text":"Writing strings","level":2},{"id":"sec-2","text":"Template literals: values inside text","level":2},{"id":"sec-3","text":"Characters, positions and slices","level":2},{"id":"sec-4","text":"Methods that return new strings","level":2},{"id":"sec-5","text":"Strings and numbers, back and forth","level":2},{"id":"sec-6","text":"Comparing strings","level":2}],"takeaways":["Strings can use single quotes, double quotes or backticks; backticks make template literals, which can insert values with${} and span several lines.","Strings are immutable, so methods like trim() and toUpperCase() return a new string and leave the original unchanged.","Characters are numbered from 0, length counts them, and slice(start, end) copies a piece up to, but not including, end.","Format cents for display with (cents / 100).toFixed(2) or Intl.NumberFormat, and keep the stored amount as a number."],"further":[{"title":"Template literals (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals"},{"title":"String (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"},{"title":"Intl.NumberFormat (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat"}],"quiz":[{"q":"What does this print?
\nlet label = \" lunch \";\nlabel.trim();\nconsole.log(`[${label}]`);[lunch]","why":"trim() returns a new, trimmed string, but nothing stores it, so label still has its spaces."},{"text":"[ lunch ]","why":"Correct. Strings are immutable. Write label = label.trim(); to keep the result."},{"text":"[${label}]","why":"Backticks make a template literal, so ${label} is replaced by the value of label."}],"answer":1},{"q":"const word = "Pocket"; Which expression gives "Poc"?
word.slice(1, 3)","why":"Indexes start at 0, so this starts at “o” and stops before index 3, giving “oc”."},{"text":"word.slice(0, 2)","why":"The end index is excluded, so this gives only “Po”."},{"text":"word[0, 3]","why":"Square brackets read a single character. The comma expression evaluates to 3, so this returns “k”."},{"text":"word.slice(0, 3)","why":"Correct. It copies indexes 0, 1 and 2 and stops before 3."}],"answer":3},{"q":"You need to show 1220 cents as $12.20. Which is right?
"$" + (1220 / 100).toFixed(2)","why":"Correct. Dividing gives 12.2, and toFixed(2) returns the string “12.20” with exactly two decimals."},{"text":""$" + 1220 / 100","why":"This prints “$12.2”, because numbers drop trailing zeros when they become text."},{"text":""$" + 1220.toFixed(2)","why":"That formats the cents, not dollars, and the dot right after an integer literal is a syntax error anyway."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// An expense as it arrived from a messy form\nconst rawLabel = \" coffee with Sam \";\nconst cents = 450;\nconst category = \"FOOD\";\n\n// Build line so it reads exactly: Coffee with Sam: $4.50 (food)\nconst line = rawLabel + \": \" + cents + \" (\" + category + \")\";\nconsole.log(line);\n"},"solution":{"js":"const rawLabel = \" coffee with Sam \";\nconst cents = 450;\nconst category = \"FOOD\";\n\nconst trimmed = rawLabel.trim();\nconst label = trimmed[0].toUpperCase() + trimmed.slice(1);\nconst price = (cents / 100).toFixed(2);\n\nconst line = `${label}: $${price} (${category.toLowerCase()})`;\nconsole.log(line);\n"},"checks":[{"id":"trimmed","test":"return typeof line === 'string' && line === line.trim() && line.startsWith('C');"},{"id":"price","test":"return typeof line === 'string' && line.includes('$4.50');"},{"id":"exact","test":"return line === 'Coffee with Sam: $4.50 (food)';\n"},{"id":"logged","test":"return logs.some((l) => l === 'Coffee with Sam: $4.50 (food)');\n"}],"title":"Format an expense line","prompt":"An expense arrived from a form with messy text. Build the string line so that it reads exactly Coffee with Sam: $4.50 (food), then log it. Use the variables: trim rawLabel and capitalise its first letter, show cents as dollars with two decimals, and lowercase category. A template literal keeps this readable.
const trimmed = rawLabel.trim(); so the first character is the letter c, not a space.","trimmed[0].toUpperCase() + trimmed.slice(1) capitalises the first letter. (cents / 100).toFixed(2) gives "4.50".","Put it together with backticks: `${label}: $${price} (${category.toLowerCase()})`."],"explanation":"Each string method returns a new string, so the solution stores each step under its own name: trimmed, then label. Doing the trim first matters, because in the raw text index 0 is a space. toFixed(2) turns 4.5 into the text "4.50", which is what people expect to see for money. The template literal then reads almost like the output itself; the first $ in $${price} is a literal dollar sign and the second starts the insertion.
line is exactly “Coffee with Sam: $4.50 (food)”","logged":"Logs the line"}},"words":715,"readMinutes":3}