How many characters are in this string: 👨‍👩‍👧‍👦?

Most people answer “one” — it looks like a single family emoji. But ask JavaScript, and you get three different answers:

The family emoji is composed of 7 code points: four person/child emoji joined by three Zero Width Joiners (ZWJ). In UTF-16, each emoji above U+FFFF takes two code units (a surrogate pair), giving .length a count of 11.

Understanding the three counts is fundamental to working with Unicode correctly:

👍🏽 is two code points: 👍 (U+1F44D) + skin tone modifier 🏽 (U+1F3FD). Each is above U+FFFF, so each takes two UTF-16 code units. But it renders as one grapheme cluster.

Flag emoji are pairs of Regional Indicator symbols forming one grapheme cluster:

Three flags, but "🇯🇵🇺🇸🇬🇧".length returns 12. Only Intl.Segmenter correctly identifies 3 grapheme clusters.

The string café can be encoded two ways in Unicode:

Both look identical — 4 grapheme clusters. But code point count differs (4 vs 5), and so does .length.

Getting character counting wrong causes real bugs:

• String truncation: Cutting at .length / 2 can split a surrogate pair, producing U+FFFD.
• Cursor movement: Should skip the entire grapheme cluster, not individual code points.
• Input validation: “Max 10 characters” should count grapheme clusters, not .length.
• String reversal: [...str].reverse().join("") breaks ZWJ sequences and flag emoji.

Intl.Segmenter (available in all modern browsers since 2024) correctly segments text by grapheme cluster boundaries:

const segmenter = new Intl.Segmenter(undefined, {
  granularity: "grapheme"
});

const text = "👨‍👩‍👧‍👦🇯🇵café";
const segments = [...segmenter.segment(text)];
console.log(segments.length); // 6 (correct!)

// Compare:
console.log(text.length);      // 18 (UTF-16 units)
console.log([...text].length); // 12 (code points)

This tool uses Intl.Segmenter internally. Each cell in the grid represents one grapheme cluster — click any cell to see its internal structure.