javascriptで文字コード変換
概要
javascriptの文字列はUTF-16で String#charCodeAt(i) で取得出来る数値は2byte(0x0000から0xffff)になる。 escape("あ") は UTF-16がそのままエスケープされ "%u3042" になるが encodeURI("あ"),encodeURIComponent("あ") などではUTF-8に変換されて "%E3%81%82" になる。
var str = "文字列をUTF-8に";
var utf8str = unescape(encodeURIComponent(str));
var utf16str = decodeURIComponent(escape(utf8str));
if (str == utf16str) {alert(true);} //=> true
とすることで UTF-16<=>UTF-8 の変換は出来るが、その他の文字コードは変換テーブルを用意する必要がある。 Shift_JIS(MS932), EUC-JP, UTF-8, JIS(iso-2022-jp)に対応したライブラリを2つ見つけたので検証する。
- Encoding.js - Converts character encoding. http://polygon-planet-log.blogspot.jp/2012/04/javascript.html
- Escape Codec Library: ecl.js (Ver.041208) http://www.junoe.jp/downloads/itoh/enc_js.shtml または http://www.vector.co.jp/soft/other/java/se342855.html
また、検証を進める中でecl.jsのJIS漢字テーブルを使った文字コード変換ライブラリを自作してしまったのでこれも合わせて検証する。文字列を一度数値配列にしてから変換するのでecl_array.jsとした。
- ecl_array.js https://github.com/wealandwoe/ecl_array.js
(2014-09-19追記)さらに
- inexorabletash/text-encoding - Polyfill for the Encoding Living Standard's API. https://github.com/inexorabletash/text-encoding
というライブラリについて検証を追加した
検証
各ライブラリの特徴
ecl.jsは各文字コードへURLエスケープする為のライブラリであって、直接文字コード変換する機能はない。 よって UNICODE(Javascript文字列) から SJIS へ変換する場合は
var str = "UNICODE文字列をシフトJISへ";
var sjis = UnescapeUnicode(EscapeSJIS(str));
var str2 = UnescapeSJIS(EscapeUnicode(sjis));
if (str==str2){alert("true");} //=> true
のようにする必要がある。
Javascript文字列→SJISに変換してURLエスケープ→URLアンエスケープ(SJIS文字列)
このエスケープ・アンエスケープ処理を挟んでいる分ecl.jsは不利である。
encoding.jsの文字コード変換は配列を渡し配列で返るので文字列から配列に変換する関数は別途用意する必要がある。
// 文字列を配列に変換
var str2array = function(str) {
var array = [],i,il=str.length;
for(i=0;i<il;i++) array.push(str.charCodeAt(i));
return array;
};
var str = "あいうえお",
array = str2array( str ),
sjis_array = Encoding.convert(array, "SJIS", "UNICODE"),
sjis = Encoding.codeToString( sjis_array ); // 配列から文字列変換する関数は用意されている
alert(sjis);
text-encodingは日本語以外の様々なエンコーディングにも対応している。Encoding Living Standard( https://encoding.spec.whatwg.org/ )に沿った実装がされているようだ。以下のように使う。
var encoder = new TextEncoder("utf-8"), // utf-8のエンコーダ(文字列→Uint8Array変換)を作成
u8array = encoder.encode("あいうえお"), // => Uint8Array[240, 128, 128, 128, 240, 128, 128, 128, 240, 128, 128, 128, 240, 128, 128, 128, 240, 128, 128, 128]
decoder = new TextDecoder("utf-8"), // utf-8のデコーダ(Uint8Array→文字列)を作成
decodedText = decoder.decode(u8array); // => "あいうえお"
alert(decodedText);
//utf-8,utf-16以外のencodeにはオプションが必要
new TextEncoder("sjis", {NONSTANDARD_allowLegacyEncoding:true}).encode("ほげ"); // => Uint8Array[130, 216, 130, 176]
//decodeはOK
new TextDecoder("euc-jp").decode(new Uint8Array([164,226,164,178])); // => "もげ"
ちなみにTextEncoderおよびTextDecoderクラスはFirefoxでは実装済みなのでtext-encodingは不要。
ただしFirefoxのTextEncoderはエンコーディングにutf-8,utf-16le,utf-16be以外を指定するとエラーになる。
詳しくはMDNを参照 https://developer.mozilla.org/ja/docs/Web/API/TextEncoder
ファイルサイズはecl.jsが22KBとコンパクトなのに対し, encoding.jsは262KB js minifyしても212KBと少し大きい。
text-encodingは対応する文字コードが多いのでサイズも大きく600KB以上。
ecl.jsのJIS漢字テーブル(JCT11280)は独特な圧縮がされている上、全体的にサイズを小さくしようと凝縮された書き方がされている。はっきり言うと読みにくい、がjavascriptの文法の勉強になった。
encoding.jsはUTF8-JISの変換・逆変換テーブルがありこれが数値の配列で書かれているのでサイズが大きいがとてもわかりやすい。
自作のecl.jsベースの文字コード変換ライブラリecl_array.jsは、ecl.jsが1つのエスケープ関数で行っている処理(javascript文字列=Unicodeから各文字コードへ変換しエスケープする)をインターセプトして数値の配列で取り出すように設計した。文字コードはecl.jsで扱えるSJIS,EUCJP,JIS7,JIS8,UTF8,UTF7,UTF16LEに加えUTF16BE,MUTF7(modified utf-7),Base64を追加した。
var str = "あいうえお";
// 文字列を16bit数値の列に変換
var array = ECL.charset.Unicode.parse(str); //=> [12354, 12356, 12358, 12360, 12362]
ECL.convert_array(array, "SJIS"); //=> [130, 160, 130, 162, 130, 164, 130, 166, 130, 168]
ECL.convert_array(array, "EUCJP"); //=> [164, 162, 164, 164, 164, 166, 164, 168, 164, 170]
// 配列からJS文字列(Unicode)に戻す場合は ECL.charset.Unicode.stringify( array )
ECL.charset.Unicode.stringify( array ); //=> "あいうえお"
// UTF-8文字列からSJIS文字列へ
var utf8str = unescape(encodeURIComponent("あいうえお"));
var sjisstr = ECL.convert(utf8str, 'SJIS', 'UTF8');
sjisstr == "\x82\xA0\x82\xA2\x82\xA4\x82\xA6\x82\xA8"; //=> true
/*
例: ecl_array.js と CryptoJS を使いSJISテキストの暗号文・Base64・SHA1ハッシュを作る
CryptoJS : https://code.google.com/p/crypto-js/
*/
var msg = "あいうえお";
var sjis = ECL.convert(msg, 'SJIS');
var sjis_wordarray = CryptoJS.enc.Latin1.parse( sjis ); // CryptoJSではWordArrayオブジェクトを作りデータをやりとりするのが楽
var encrypted = CryptoJS.AES.encrypt(sjis_wordarray, "Secret Passphrase"); //=> [object]
var base64 = sjis_wordarray.toString(CryptoJS.enc.Base64); //=> "gqCCooKkgqaCqA=="
var sha1 = CryptoJS.SHA1(sjis_wordarray).toString(CryptoJS.enc.Hex); //=> "2c332e42c55ba9293827672e85f16f1cda65518e"
実験
4KBのテキストを1000回文字コード変換した時の処理秒数(ms) U : UNICODE, S : SJIS, 8 : UTF8, E : EUC-JP, J : JIS
| ライブラリ | U->U | U->S | U->8 | U->E | U->J |
|---|---|---|---|---|---|
| encoding.js | 495 | 336 | 507 | 503 | |
| ecl.js | 1551 | 1483 | 1549 | 1756 | |
| ecl_array.js | 616 | 289 | 599 | 624 | |
| native | 344 |
| ライブラリ | S->U | S->S | S->8 | S->E | S->J |
|---|---|---|---|---|---|
| encoding.js | 278 | 203 | 214 | 229 | |
| ecl.js | 1516 | 2860 | 2829 | 3213 | |
| ecl_array.js | 294 | 310 | 624 | 661 |
| ライブラリ | 8->U | 8->S | 8->8 | 8->E | 8->J |
|---|---|---|---|---|---|
| encoding.js | 195 | 338 | 347 | 345 | |
| ecl.js | 1810 | 3329 | 3269 | 3298 | |
| ecl_array.js | 314 | 616 | 607 | 638 | |
| native | 323 |
| ライブラリ | E->U | E->S | E->8 | E->E | E->J |
|---|---|---|---|---|---|
| encoding.js | 255 | 223 | 213 | 230 | |
| ecl.js | 2444 | 3826 | 3741 | 4008 | |
| ecl_array.js | 288 | 609 | 304 | 634 |
| ライブラリ | J->U | J->S | J->8 | J->E | J->J |
|---|---|---|---|---|---|
| encoding.js | 277 | 217 | 247 | 209 | |
| ecl.js | 1786 | 3165 | 2981 | 3111 | |
| ecl_array.js | 547 | 902 | 616 | 853 |
- nativeは unescape(encodeURIComponent(str))とdecodeURIComponent(escape(utf8str))のこと
- 同文字コードへの変換(無変換)はスルーしているので変換速度には影響しない。
- ほぼ全てにおいて encoding.js ＞ ecl_array.js ＞ ecl.js の順に速いという結果になった。
- ecl.js はURLエスケープ、アンエスケープの影響で3～10倍程度遅い
- ecl_array.js は UNICODEが絡む変換はそこそこ速いが、他はencoding.jsより2倍程度遅い。
- encoding.jsは各文字コード間を直接変換しているが、ecl_array.jsは一度UNICODE配列にしているのでUNICODEが絡まない変換が遅いと思われる。
- (2014-03-12追記) その後ecl_array.jsに手を入れ変換速度はencoding.jsと同程度になった
- (2014-09-19追記) text-encodingは未検証。少し試した限りではかなり(50倍ほど)遅かった。
4KBのテキストを1000回文字変換+URLエスケープ/アンエスケープした時の処理秒数(ms)
| ライブラリ | esc U | esc S | esc 8 | esc E | esc J | unesc U | unesc S | unesc 8 | unesc E | unesc J |
|---|---|---|---|---|---|---|---|---|---|---|
| encoding.js | 180 | 1524 | 1512 | 1194 | 1227 | 287 | 406 | 419 | 388 | 716 |
| ecl.js | 689 | 1133 | 1389 | 1123 | 1366 | 461 | 649 | 948 | 1656 | 964 |
| ecl_array.js | 476 | 934 | 775 | 949 | 940 | 248 | 281 | 313 | 286 | 575 |
| native | 118 | 306 |
- JS文字列→UTF-8エスケープならばnativeが最速
- ecl.js のエスケープは遅い。ecl_array.js はエスケープ・アンエスケープ処理を変更したら速くなった(正規表現による置換をやめた)
- encoding.jsもアンエスケープは速い。ただUNICODEエスケープは内部でencodeURIComponentを使用しているためUTF-8へ変換されている
考察
text-encodingはサイズが大きく変換も遅いが対応する文字コードが多く便利。
日本語の文字コード変換をしたい場合は encoding.js か ecl_array.js を使うのがよいだろう。
Firefox19以降限定なら外部ライブラリなしでTextEncoder/TextDecoderが使える。
ecl.jsは昔からある有名なライブラリだがこのコンパクトさが素晴らしい。JIS漢字11280字34KB程をASCII印字可能文字とデコーダ含めて13KBに納めている。エンコーダが無くJIS X 0213等への対応が出来ないのが残念。