こんにちは、フロントエンドエンジニアの峯です。
今回は、文字コードのつくりについて調べる機会があったので、絵文字などの少し特殊なつくりをしている文字について紹介します。
目次
単純に数えられない文字
JavaScritpのlengthプロパティで、絵文字の文字数をカウントした際、返り値は2となります。
これについて、何故そうなってしまうのか文字コードの歴史を学ぶ事で少し理解することができましたのでご紹介します。
const soccerBall = '⚽️';
console.log(soccerBall.length);
// > 2
絵文字シーケンス
.lengthプロパティは16bitを１文字として表されるので、サッカーボール絵文字は32bitということがわかります。
32bitで構成されていることを確認するために、encodeURIComponent()関数でエスケープしてみます。
const soccerBall = '⚽️';
console.log(encodeURIComponent(soccerBall));
// > %E2%9A%BD%EF%B8%8F
サッカーボールの絵文字は、%E2%9A%BDというサッカーボール絵文字を意味するコードポイントと、%EF%B8%8Fという要素を持たないコードポイントで構成されています。
機種依存などによって表現が異なる絵文字はこうした複数のコードポイントの組み合わせで表現されています。
サロゲート文字
文字コードの歴史は深く、要望が増えていくたびにより多くの文字を表現できるように工夫されてきたようです。
その中の一つにサロゲート文字という拡張手法が登場しました。
やっている事はUnicodeの16bitコード２つを組み合わせで表現する手法です。
結論
絵文字のみではなく、漢字も含まれるサロゲート文字などの特殊文字を網羅した開発を行うのは現状はかなり厳しい印象です。
文字カウントや許容文字の制御を行う場合はどこまで制御するのか明確化して部分的に対応するのがベストではないでしょうか。
おわりに
文字コード事情はかなり複雑でこれらを完全に理解するのは時間がかかりそうです。
今回個人的に謎だった部分が明らかになったので、専門書などでもう少し詳しく調べてみようかなと思うきっかけになりました。