JavaScriptにおけるサロゲートペアとは

JavaScript で文字を扱う場合に注意が必要な事項としてサロゲートペアがあります。サロゲートペアとは 1 つの文字に対して 2 つの文字コードを使って表される文字のことを指します。ここでは JavaScript におけるサロゲートペアについて簡単に解説します。

(2022 年 04 月 10 日公開 / 2022 年 04 月 10 日更新)

サロゲートペアについて
サロゲートペアで使用される文字コード

サロゲートペアについて

JavaScript では内部的に文字を UTF-16 の文字コードで保管します。 UTF-16 でがほとんどの文字を 1 つの文字コードで表すことができますが、 Unicode で扱う文字の数が増えた結果 16 ビットの文字コードですべての文字を対応させることができなくなり一部の文字は 2 つの文字コードを使って表すように拡張が行われました。

このような 2 つの文字コードを使って文字を表す方式について、上位サロゲートと下位サロゲートの組み合わせで文字を表すことからサロゲートペアと呼びます。サロゲート( Surrogate )とは、英語で代理という意味です。

このように JavaScript では文字によっては 2 つの文字コードで表されることがあるため注意が必要です。例えば String オブジェクトの length プロパティは文字の文字コードの数を返すため、サロゲートペアで表される文字は 1 文字で 2 を返します。日本で一般的に使われる文字で該当するものはあまりないはずですが、例えば𪛊のような文字や 😸 のような絵文字が該当します。

let word1 = '青'
console.log(word1.length);
>> 1

let word2 = '𪛊';
console.log(word2.length);
>> 2

let word3 = '😸';
console.log(word3.length);
>> 2

'青' については文字数が 1 ですが、'𪛊'や'😸'については文字は 1 つですが文字数としては 2 つとなります。

サロゲートペアで表される文字が含まれる可能性がある場合は注意してください。

サロゲートペアで使用される文字コード

UTF-16 では文字コードとして 0x0000 から 0xFFFF までの値を使用します。この中の元々使用していなかった 0xD800 から 0xDBFF を上位サロゲート、 0xDC00 から 0xDFFF を下位サロゲートとして使用します。

サロゲートペアを使って表される文字について、 UTF-16 の文字コードを取得する String オブジェクトの charCodeAt メソッドを使用すると、 1 つ目が上位サロゲートの範囲、 2 つ目が下位サロゲートの範囲の文字コードを取得します。

次のサンプルをみてください。

let word = '𪛊';
let code;

code = word.charCodeAt(0);
console.log('0x' + code.toString(16));
>> 0xd869

code = word.charCodeAt(1);
console.log('0x' + code.toString(16));
>> 0xdeca

'𪛊' で使用されている 2 つの文字コードをそれぞれ取得しました。

-- --

JavaScript におけるサロゲートペアについて解説しました。

( Written by Tatsuo Ikura )