Characters Are a Lie: Understanding Grapheme Clusters「1文字」は嘘: 書記素クラスタを理解する

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.

この文字列は何文字でしょうか: 👨‍👩‍👧‍👦

多くの人は「1文字」と答えます。しかし JavaScript に聞くと、数え方によって3つの異なる答えが返ります:

家族絵文字は7つのコードポイントで構成: 4つの人物絵文字を3つのゼロ幅接合子（ZWJ）で結合。UTF-16 では U+FFFF 超の絵文字は各2ユニット（サロゲートペア）のため、.length は 11。

3つのカウントの違いは Unicode を正しく扱う基本です:

👍🏽 は2コードポイント: 👍 (U+1F44D) + 肌色修飾子 🏽 (U+1F3FD)。各 U+FFFF 超で UTF-16 では各2ユニット。しかし見た目は1文字 = 1書記素クラスタ。

国旗絵文字は地域インジケータ記号のペアで1書記素クラスタを形成:

3つの国旗ですが "🇯🇵🇺🇸🇬🇧".length は 12。Intl.Segmenter だけが正しく3書記素クラスタを識別。

café は Unicode で2通りの表現が可能:

画面上は同一で4書記素クラスタ。しかしコードポイント数（4 vs 5）と .length は異なる。

文字カウントの間違いは実際のバグを引き起こします:

• 文字列の切り詰め: .length / 2 で切るとサロゲートペアが分断され U+FFFD に。
• カーソル移動: 「1文字」移動は書記素クラスタ全体をスキップすべき。
• 入力バリデーション: 「最大10文字」は書記素クラスタで数えるべき。
• 文字列反転: [...str].reverse().join("") は ZWJ シーケンスや国旗絵文字を壊す。

Intl.Segmenter（2024年以降の全モダンブラウザで利用可能）は書記素クラスタ境界で正しく分割:

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

const text = "👨‍👩‍👧‍👦🇯🇵café";
const segments = [...segmenter.segment(text)];
console.log(segments.length); // 6（正解！）

// 比較:
console.log(text.length);      // 18（UTF-16 ユニット）
console.log([...text].length); // 12（コードポイント）

このツールは Intl.Segmenter を内部で使用。グリッドの各セルが1書記素クラスタを表し、クリックで内部構造を確認できます。