【JavaScript】サロゲートペア文字列を正しく扱う方法｜for-of・スプレッド構文・Array.from・正規表現uフラグ

この記事で学べること

• サロゲートペアとは何か（UTF-16の仕組み）
• 通常のforループで文字化けする原因
• for-ofループで1文字ずつ正しく取得する方法
• スプレッド構文（[...str]）で文字配列に変換する方法
• Array.fromでサロゲートペア対応の配列を作る方法
• 正規表現のuフラグでUnicode文字にマッチさせる方法
• codePointAt / String.fromCodePointでコードポイントを扱う方法
• サロゲートペアを考慮した文字数カウントの実装

注意：.lengthはコードユニット数を返すため、サロゲートペア文字は2とカウントされます。見た目の文字数とは一致しません。

const str = "A😀B";

console.log(str.length);  // 4（見た目は3文字なのに4）

// forループ → サロゲートペアが分割される
for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

実行結果

A
ufffd  ← サロゲートペアの前半
ufffd  ← サロゲートペアの後半
B

const str = "A😀B";

for (const char of str) {
  console.log(char);
}

実行結果

A
😀
B

const text = "Hello😀World🎉!";
const emojis = [];

for (const char of text) {
  // コードポイントがBMP外（U+10000以上）なら絵文字の可能性
  if (char.codePointAt(0) > 0xFFFF) {
    emojis.push(char);
  }
}

console.log(emojis);

実行結果

["😀", "🎉"]

const str = "𠮷野家";

// split("") → サロゲートペアが壊れる
console.log(str.split(""));
// ["\uD842", "\uDFB7", "野", "家"]

// [...str] → 正しく分割される
console.log([...str]);
// ["𠮷", "野", "家"]

ポイント：str.split("")の代わりに[...str]を使えば、サロゲートペアを壊さずに文字配列を作成できます。

const str = "Hello😀";

// NG: split("").reverse() → 絵文字が壊れる
const bad = str.split("").reverse().join("");
console.log(bad);   // ??olleH（文字化け）

// OK: スプレッド構文で分割してから反転
const good = [...str].reverse().join("");
console.log(good);  // 😀olleH

const str = "𠮷野家";

// 文字配列に変換
const chars = Array.from(str);
console.log(chars);  // ["𠮷", "野", "家"]

// マッピング関数付き：各文字のコードポイントを取得
const codePoints = Array.from(str, c => c.codePointAt(0).toString(16));
console.log(codePoints);  // ["20bb7", "91ce", "5bb6"]

const str = "Hello😀🎉";

// NG: lengthはコードユニット数
console.log(str.length);         // 9（5 + 2 + 2）

// OK: スプレッド構文
console.log([...str].length);    // 7

// OK: Array.from
console.log(Array.from(str).length); // 7

const str = "👨‍👩‍👧‍👦Hello";  // 家族絵文字 + Hello

console.log(str.length);        // 16（コードユニット数）
console.log([...str].length);   // 12（コードポイント数）

// Intl.Segmenter → 見た目通りの文字数
const segmenter = new Intl.Segmenter("ja", { granularity: "grapheme" });
const segments = [...segmenter.segment(str)];
console.log(segments.length);   // 6（👨‍👩‍👧‍👦 + H + e + l + l + o）

ポイント：SNSの文字数カウントなど、ユーザー体感と一致させたい場合はIntl.Segmenterが最も正確です。Chrome 87+、Firefox 104+、Safari 15.4+で対応しています。

const str = "A😀B🎉C";

// uフラグなし → .はサロゲートペアの片方にマッチ
console.log(str.match(/./g));
// ["A", "\uD83D", "\uDE00", "B", "\uD83C", "\uDF89", "C"]

// uフラグあり → .がサロゲートペアも1文字として扱う
console.log(str.match(/./gu));
// ["A", "😀", "B", "🎉", "C"]

const str = "Hello😀 こんにちは🎉 123";

// 絵文字を抽出
console.log(str.match(/\p{Emoji_Presentation}/gu));
// ["😀", "🎉"]

// 漢字・ひらがな・カタカナを抽出
console.log(str.match(/\p{Script=Hiragana}/gu));
// ["こ", "ん", "に", "ち", "は"]

注意：\p{}はuフラグが必須です。uフラグなしで使用するとSyntaxErrorが発生します。

const str = "😀";

// charCodeAt → サロゲートペアの前半だけ
console.log(str.charCodeAt(0).toString(16));  // d83d

// codePointAt → 正しいコードポイント
console.log(str.codePointAt(0).toString(16)); // 1f600

// fromCharCode → サロゲートペアを手動で計算する必要がある
console.log(String.fromCharCode(0xD83D, 0xDE00)); // 😀

// fromCodePoint → コードポイントを直接指定
console.log(String.fromCodePoint(0x1F600));        // 😀
console.log(String.fromCodePoint(0x20BB7));        // 𠮷

あわせて読みたい

• 【JavaScript】文字列から任意の1文字を取得する方法
• 【JavaScript】文字列を逆順に並び替える方法
• 【JavaScript】文字列のバイト数を取得する方法2選
• 【JavaScript】文字列からASCIIコードに変換する3つの方法
• 【JavaScript】Unicodeコードポイントから文字列を生成する方法
• 【JavaScript】文字列内の特定文字の出現回数をカウントする方法
• 【JavaScript】文字列を1文字ずつ表示する方法
• 【JavaScript】match()メソッドで文字列パターンを簡単に検索する方法
• 【JavaScript】replace() で文字列を置換する方法
• JavaScriptでの文字列結合