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

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

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

• http://jsfiddle.net/msakamoto_sf/xp9mzzxb/

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

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

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

• HTML Document Representation
  • http://www.w3.org/TR/html4/charset.html
  • "5.3 Character references" で数値文字参照や文字実体参照の記法が解説されてます。
• Grammar and types - JavaScript | MDN
  • https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types
  • "Unicode"のところで、Unicode エスケープシーケンスについて解説されてます。
• サロゲートペア入門：CodeZine
  • http://codezine.jp/article/detail/1592
• JavaScript Stringでサロゲートペアを扱う - teppeis blog
  • http://teppeis.hatenablog.com/entry/2014/01/surrogate-pair-in-javascript
  • JSでの文字数カウントでサロゲートペアを考慮したやり方について解説されてます。
• JavaScriptでのサロゲートペア文字列のメモ - Qiita
  • http://qiita.com/YusukeHirao/items/2f0fb8d5bbb981101be0
  • これもJSでの文字数処理での実践的なテクニックについて解説されてます。ES5とES6とで異なってくる？
• JSONのエスケープ | yohgaki's blog
  • http://blog.ohgaki.net/json-escape
  • JSONでのエスケープについて詳細に解説されてます。PHPでの注意点も詳しいです。

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

• lukehoban/es6features
  • https://github.com/lukehoban/es6features#unicode
• Mozilla における ECMAScript 6 のサポート - JavaScript | MDN
  • https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla
• ECMAScript 6 compatibility table
  • http://kangax.github.io/compat-table/es6/

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