A String Is a Row of Code Units: The Picture

Maria's school prints name badges. The printer gives each name one small box per character, and it asks the program how many boxes to print: name.length. "Maria" gets 5 boxes, which looks right. Her friend Mahi types "মাহি" and gets 4 boxes for what reads as two letters. Zara adds a smiley to her name and gets one box too many. The printer is not broken. It counts something, and this lesson finds out exactly what.

What a string is

A string is a value that holds text: a name, a message, a line of input. Module 1 met it as one of the seven primitive types. Inside the engine, a string is a row of small boxes, one after another.

Each box holds one code unit: a number from 0 to 65535 that stands for a piece of text. The boxes are numbered from 0, and the number of a box is its index. The number of boxes is the string's length.

For English letters, digits and most everyday characters, one character is one box. Here is the badge printer's question, asked of three names.

console.log("Maria".length);
console.log("মাহি".length);
console.log("Zara 😀".length);

5
4
7

"Maria" is five boxes. The other two answers are the badge printer's surprises, and the last section of this lesson explains both. So length counts boxes, and for plain English text a box is a letter.

Three ways to write a string

A string in your code is written between quotes. JavaScript has three kinds, and all three make the same type of value.

const name = "Amara";
console.log("She said \"hi\"");
console.log('She said "hi"');
console.log(`Hello, ${name}! You have ${2 + 3} new messages.`);
console.log(`Line one
Line two`);
console.log(typeof `x`);

She said "hi"
She said "hi"
Hello, Amara! You have 5 new messages.
Line one
Line two
string

Double quotes and single quotes work the same way. To put a double quote inside double quotes, write \"; the backslash starts an escape, a pair of characters that stands for one. \n is a line break and \\ is one backslash.

Backticks make a template literal. Inside one, ${...} runs any expression and puts its value into the text. A line break in the code is a line break in the string, too. Lesson 02 teaches template literals in full.

This track writes double quotes, and backticks when the text needs a value inside it. So the three quotes are three spellings of one type, and you pick the one that makes the text easiest to read.

"text"   'text'   `text with ${expression}`

s.length        the number of boxes (code units)
s[i]            the box at index i, as a string of length 1
s.at(i)         the same, and a negative i counts from the end
s.method(...)   a new string (or a number, a boolean, an array); s itself never changes

The boxes and their numbers

Draw the string "Amara" as boxes. The index of each box sits above it, from 0 to 4. Because the first box is box 0, the last box is always length - 1, here 4.

The row under the boxes is a second way to count, from the end. It works with s.at(i), not with square brackets. Now watch the engine answer six questions about the same string.

The last step previewed slice, which copies a range of boxes into a new string. Lesson 02 teaches it with every other method.

Reading one box: s[i] and s.at(i)

Square brackets after a string read one box: s[0] is the first. The answer is itself a string, one box long. s.at(i) does the same, and it also takes a negative index, so s.at(-1) is the last box.

const s = "Amara";
console.log(s[0], s[1], s[4]);
console.log(s[s.length - 1], s.at(-1), s.at(-2));
console.log(s[5], s[-1], s.at(5));
console.log(typeof s[0], s[0].length);

A m a
a a r
undefined undefined undefined
string 1

Line 2 reads the last box twice: once by working out its index, once with at(-1). Line 3 asks for boxes that do not exist. There is no error, only undefined, the value Module 1 called "no value yet".

Note s[-1]: square brackets do not count from the end. They look for a box named "-1", find none, and give undefined. So use s.at(-1) for the last box, and s[i] when you already know the index.

A string never changes

You can read a box, but you cannot change one. A string is immutable: once made, it stays exactly as it is. Writing to a box is not an error in a normal program. It just does nothing.

let word = "kenji";
word[0] = "K";
console.log(word);

const upper = word.toUpperCase();
console.log(word, upper);

word = "K" + word.slice(1);
console.log(word);

kenji
kenji KENJI
Kenji

Line 2 tried to change box 0, and the string ignored it. toUpperCase() did not change word either. It made a new string, "KENJI", and returned it, and the program kept it in upper.

The last change worked because it built a new string and stored it in word. That is allowed: word is a let, so it may hold a different string. The old "kenji" was never touched. So let and const decide whether a name can point at a new value, and immutability means the string itself never changes.

Every string method works this way: it returns a new value and leaves the original alone. Strict mode is a stricter setting of the language, and the modules of Module 11 turn it on. In strict mode, the write on line 2 stops the program with a TypeError, which lesson 06 shows.

When length is not the number of letters

Back to the badge printer. A box holds a number from 0 to 65535, and most of the world's letters fit in one box. Two things do not work the way a reader expects.

• Bangla vowel signs are boxes of their own. মা is the letter ম followed by the vowel sign া. Unicode, the standard that numbers every character, stores the sign as its own character. A reader sees one letter, and the string holds two boxes.
• An emoji often needs two boxes. Unicode now numbers more characters than fit in 65535. A character past that limit, such as 😀, is stored as two boxes called a surrogate pair. Each half means nothing alone.

The way JavaScript stores text in these boxes is called UTF-16. The widget below shows "মাহি 😀" box by box, with what a reader sees drawn underneath.

Each character has a Unicode number, its code point. The emoji is one code point stored in two boxes. [...s] spreads a string into a list of its code points, and Module 7 teaches that spread form for lists. So [...s].length counts the emoji once.

const s = "মাহি 😀";
console.log(s.length);
console.log([...s].length);
console.log(JSON.stringify(s[5]), JSON.stringify(s.slice(5)));

7
6
"\ud83d" "😀"

JSON.stringify writes a value as code, so the lone half shows up as its number, \ud83d, instead of a broken symbol. Three counts, three answers: 7 boxes, 6 code points, 4 characters a reader sees.

For this track's problems, length is the count the statement means unless it says otherwise. Counting what a reader sees takes a tool from lesson 05. So when a string may hold Bangla or emoji, never call length "the number of letters".

const word = "Zara";
console.log(word.length);
console.log(word[0], word[3]);
console.log(word.at(-1), word.at(-4));
console.log(word[4]);

4
Z a
a Z
undefined

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

const name = next();
out.push(`Name:   ${name}`);
out.push(`Boxes:  ${name.length}`);
out.push(`First:  ${name[0]}`);
out.push(`Last:   ${name.at(-1)}`);
out.push(`Loud:   ${name.toUpperCase()}`);
out.push(`Still:  ${name}`);

console.log(out.join("\n"));

Name:   Amara
Boxes:  5
First:  A
Last:   a
Loud:   AMARA
Still:  Amara

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

const n = nextInt();
for (let i = 0; i < n; i++) {
  const name = next();
  const boxes = name.length;
  const points = [...name].length;
  let line = `${name}: ${boxes} boxes, ${points} code points`;
  if (boxes !== points) {
    line += ", check the badge";
  }
  out.push(line);
}

console.log(out.join("\n"));

Maria: 5 boxes, 5 code points
মাহি: 4 boxes, 4 code points
Zara😀: 6 boxes, 5 code points, check the badge
Kenji: 5 boxes, 5 code points

const name = "Bob";
console.log(name[name.length]);
console.log(name[name.length - 1]);

undefined
b

let title = "hello";
title[0] = "H";
console.log(title);

hello

let city = "dhaka";
city.toUpperCase();
console.log(city);

dhaka

const code = "BD-1207";
console.log(code[-1]);
console.log(code.at(-1));

undefined
7

console.log("Zara"[4]);
console.log("Zara".at(-5));
console.log("Zara".length - 1);

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const lines = input.split("\n");
let at = 0;
const next = () => lines[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out
// Read n, then n lines. Per line: code units, then code points.

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

Next, lesson 02 takes every string method one by one, with its output and its cost, and shows the full table of character codes.