Help us understand the problem. What is going on with this article?

JavaScriptとHTMLで、Unicodeのサロゲートペアを表示する練習

More than 1 year has passed since last update.

(2015-04-27 の練習メモからこちらに移転)

文字コードの復習をちょっとしてたら、Unicodeのサロゲートペアって今まで気にしたこと無かったことに気が付きました。
ということで、お仕事でも扱うJavaScriptとHTMLで、まずはサロゲートペアを「表示」してみる練習です。(2015-04時点のES5対応迄)

簡単にまとめると以下のようになります。

  • HTMLなら・・・
    • 𠮷𠮟 のような数値文字参照を使って、Unicodeコードポイントをそのまま16進数で表記すればOK.
  • JavaScript(ES5まで)とJSONなら・・・
    • サロゲートペア対象外の文字なら、\u(コードポイント16進数表現) をリテラルとして使える。
    • サロゲートペア対象の文字なら、サロゲートペアに分割し、\u(上位サロゲートの16進数表現)\u(下位サロゲートの16進数表現) とする。
  • ES6での予定(上記jsfiddleには組み込んでません)
    • サロゲートペア対象の文字でも、分割せずにそのまま \u{20BB7} (土吉) と表記できる。
    • String.codePointAt() によりサロゲートペアを分割せずにコードポイントを取り出せる。
    • RegExpで /u フラグが追加され、サロゲートペアを分割せずに1文字として処理できる。

今回は表示しか練習しませんでした。文字数のカウントなど、より実践的なテクニックについては以下の参考URLの一部で詳しく解説されてます。

また、ES6でのUnicodeサポートについては以下を参考にしました。

※hatena id:jser さんからのコメントをきっかけに、ES6でのUnicodeサポートについて追記

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away