10. Strings up close

Text, as a computer sees it

Here’s a line of a program, as a string:

const src = 'width = 42;';

To you it obviously says “set width to 42”. To JavaScript it’s just eleven characters in a row. In Part III you’ll write a scanner, the first stage of an interpreter, whose whole job is to look at text like this and find the words in it: the name width, the =, the number 42, the ;. To do that, you need to get inside a string: read it one character at a time, ask what kind of character each one is, and cut out pieces. That’s this chapter.

A row of characters

Strings index exactly like arrays:

const s = 'cat 42';

console.log(s.length); // 6
console.log(s[0]);     // c
console.log(s[4]);     // 4  (a string!)
console.log(s[99]);    // undefined

s[4] is the one-character string '4', not the number 4. Asking for an index past the end gives undefined, as with arrays.

There’s one big difference from arrays: you can’t change a string.

let t = 'cat';
t[0] = 'b';
console.log(t); // cat

The assignment simply doesn’t work^[1]. Strings are immutable: once made, a string never changes^[3]. You can still make t hold a different string (t = 'bat'), but the string 'cat' itself stays exactly as it was.

Characters are numbers

charCodeAt(i) turns the tile over and shows the number on the back. String.fromCharCode(n) goes the other way:

console.log('A'.charCodeAt(0)); // 65
console.log('a'.charCodeAt(0)); // 97
console.log('0'.charCodeAt(0)); // 48
console.log(String.fromCharCode(104, 105));
// hi

The useful part is the order. The digits '0' to '9' have the codes 48 to 57, one after another. 'A' to 'Z' are 65 to 90, and 'a' to 'z' are 97 to 122. That turns “is this a digit?” into a comparison:

function isDigit(c) {
  return c >= 48 && c <= 57;
}

const c = '7'.charCodeAt(0); // 55
console.log(isDigit(c)); // true
console.log(c - 48);     // 7

&& means “and”: the result is true only if both sides are true. The last line shows a second trick: subtract 48 (the code of '0') and a digit character’s code becomes the digit’s value.

Cutting a string into pieces

Now put the two ideas together. Here’s the heart of a scanner: a finger i moves along the string, and whenever it finds a run of digits, it cuts the whole run out as one piece.

const s = '42+7';
const parts = [];
let i = 0;
while (i < s.length) {
  const start = i;
  if (isDigit(s.charCodeAt(i))) {
    while (isDigit(s.charCodeAt(i))) i++;
  } else {
    i++;
  }
  parts.push(s.slice(start, i));
}

The cutting is done by slice(start, end). It copies the characters from start up to, but not including, end, and returns them as a new string. Leaving end out means “to the end”, and a negative number counts back from the end.

Strings come with many more ready-made methods. These are the ones you’ll use most:

const s = 'let x = 42;';

s.slice(0, 3);       // 'let'
s.slice(-3);         // '42;'
s.includes('x');     // true
s.startsWith('let'); // true
s.split(' ');
// [ 'let', 'x', '=', '42;' ]
['a', 'b'].join('-'); // 'a-b'

split cuts at every copy of a separator and gives back an array. join is its opposite: it’s an array method that glues the slots together with a separator between them.

const s = 'let x = 42;';

console.log(s.length, s[4]);
console.log(s.charCodeAt(8));
console.log(s.slice(8, 10));
console.log(s.includes('42'));
console.log(s.startsWith('var'));

const words = s.split(' ');
console.log(words);
console.log(words.join('_'));

Building strings

Gluing strings with + gets messy fast. Template literals are strings written between backticks, where ${...} drops in the value of any expression^[4]:

const name = 'x';
const v = 42;

const a = 'Set ' + name + ' to ' + v;
const b = `Set ${name} to ${v}`;
console.log(a === b); // true

And when you don’t know in advance how long the string will be, build it piece by piece: start with an empty string '' and add to it in a loop.

function bar(n) {
  let out = '';
  for (let i = 0; i < n; i++) {
    out += '#';
  }
  return out;
}

console.log(`[${bar(3)}]`); // [###]

out += '#' is short for out = out + '#'. Because strings are immutable, each step makes a new, longer string and points out at it. A common alternative is to push the pieces into an array and join them once at the end.

Your turn

The core exercise is a piece of every scanner: turning the digit characters of a number into an actual number.

function toNumber(s) {
  // your code here
}

console.log(toNumber('472'));

function shift(s, k) {
  // your code here
}

console.log(shift('hal', 1));

What you learned

• A string is a row of characters: str[i] reads one by its index, and str.length counts them. Strings are immutable.
• Every character has a char code. charCodeAt and fromCharCode convert between them, and code ranges identify digits and letters.
• String methods slice, includes, startsWith and split, with the array method join, cut, search and glue strings. They return new values and never change the original.
• Template literals drop values into a string with ${...}, and string building grows a result piece by piece.

Next: what to do when something goes wrong, such as a character your scanner doesn’t recognize.