By the end of this lesson
Transform text deliberately and distinguish code units from code points.
Before you start
- Node.js 24 with a terminal and plain-text editor; the browser-only lesson is labelled separately.
- Complete lesson 4 or be comfortable with its examples.
Three words to know
- Template literal
- Text inside backticks, with ${expression} placeholders.
- UTF-16 code unit
- The unit counted by JavaScript string.length.
- Code point
- One Unicode value; not necessarily a complete user-perceived character.
1. Build a readable message
Template literals make values in a message visible. String methods return new strings because primitive strings are immutable. Preserve the original when exact spelling or whitespace is meaningful.
const raw = " JavaScript ";
const cleaned = raw.trim().toLowerCase();
console.log(`Language: ${cleaned}`);
console.log(raw === cleaned);
What you should see · example output
Language: javascript false
2. Positions and slices
Indexing starts at zero. slice(start, end) excludes end. startsWith and endsWith inspect text only; they do not establish file existence or valid contents. Slicing operates on UTF-16 units and can split a surrogate pair.
const name = "tasks.json";
console.log(name[0]);
console.log(name.slice(0, 5));
console.log(name.endsWith(".json"));
What you should see · example output
t tasks true
3. Define the length you mean
Spreading a string into an array iterates code points. That handles an emoji represented by a surrogate pair, but a visible character can still contain several code points, such as a letter plus a combining mark. Choose a rule and document it instead of calling all these counts characters without explanation.
const icon = "😀";
console.log(icon.length);
console.log([...icon].length);
What you should see · example output
2 1
YOUR TURN
A small check before you continue
The final project limits a title to 100 code points. Is that always the same as 100 visible characters?
Show a suggested answer
No. Combining marks and multi-code-point emoji can form one visible character. The project states a code-point limit rather than promising a grapheme count.
Sources and scope
Documentation and examples reviewed 2026-10-18. Provider screens, package versions and output wording can differ. Examples show expected outcomes; they are not a claim that OpenViST connected to your server or verified your setup.