Escapes, unicode, and emoji pitfalls

Understanding Escapes, unicode, and emoji pitfalls

A backslash inside a string literal is an instruction to the parser, not a character in the finished value: '\n' has length 1, and '\\' is a single backslash. Three numeric escapes name a character by its code: \xHH takes exactly two hex digits and reaches U+00FF, \uHHHH takes exactly four, and \u{...} takes one to six digits and reaches any code point up to U+10FFFF. That exactness is where people get burned, because '\u1F600' is not 😀 but U+1F60 (ὠ) followed by the digit 0 once \u stops after four digits. Escapes the parser does not recognise, like \q, quietly drop the backslash and evaluate to q, so a misspelled escape never raises an error.

Underneath, a JavaScript string is a sequence of 16-bit UTF-16 code units. Code points up to U+FFFF occupy one unit; anything above that is stored as a surrogate pair, one unit from D800-DBFF followed by one from DC00-DFFF. That is why length, str[i], charAt, charCodeAt, slice and substring all measure and cut in code units, while codePointAt, for...of and spread operate on whole code points. Nothing checks that pairs stay intact, so cutting between them yields a lone surrogate: still a legal JavaScript string, but one that renders as a replacement box and makes encodeURIComponent throw URIError.

What a reader calls one character is a grapheme cluster, and it can span many code points: 👩‍💻 is a woman, a zero-width joiner and a computer; 🇯🇵 is two regional indicator letters; 👍🏽 is a thumb plus a skin-tone modifier. The same looseness applies to accents, since é can be the single code point U+00E9 or the letter e followed by combining acute U+0301, and those two strings are not === even though they render identically. normalize('NFC') collapses the decomposed form into the composed one so comparisons and Set deduplication behave, and Intl.Segmenter with granularity 'grapheme' is the only built-in that counts clusters the way a person would.

The practical rule is to name the unit you actually mean before you measure or cut, and to reach for the code-point or grapheme tool as soon as text can come from a user.

console.log('line one\nline two');
console.log('backslash: \\ and quote: \'');
console.log(`escaped interpolation: \${1 + 1}`);

// \xHH, \uHHHH and \u{...} can all spell the same character
console.log('\xE9', '\u00E9', '\u{E9}');

// U+1F600 does not fit in a single UTF-16 code unit
const face = '\u{1F600}';
const pair = '\uD83D\uDE00';

console.log(face, face === pair);
console.log('length:', face.length, 'code points:', [...face].length);
console.log('first code unit:', face.charCodeAt(0).toString(16));
console.log('first code point:', face.codePointAt(0).toString(16));

Worked examples

const msg = 'hi 😀!';
const cut = msg.slice(0, 4);

console.log(msg.length, [...msg].length);
console.log(cut.length, cut.charCodeAt(3).toString(16));
console.log(cut === 'hi \uD83D');
console.log([...msg].slice(0, 4).join(''));

const composed = '\u00E9';     // é as one code point
const decomposed = 'e\u0301';  // e + combining acute accent

console.log(composed, decomposed);
console.log(composed === decomposed);
console.log(composed.length, decomposed.length);
console.log(composed === decomposed.normalize('NFC'));
console.log(composed.indexOf('e'), decomposed.indexOf('e'));

const seg = new Intl.Segmenter('en', { granularity: 'grapheme' });

for (const s of ['👩‍💻', '🇯🇵', '👨‍👩‍👧‍👦']) {
  console.log(s, s.length, [...s].length, [...seg.segment(s)].length);
}

Important notes

Common mistakes

Try it yourself