[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
38
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

文字列をUTF-8のArrayBufferに変換

Last updated at Posted at 2012-10-25

Blobコンストラクタに文字列を渡すと自動的にUTF-8に変換されることを利用(この動作は仕様)。

ブラウザ内

function str2bytes(str, callback) {
  var fr = new FileReader();
  fr.onloadend = function() {
    callback(fr.result);
  };
  fr.readAsArrayBuffer(new Blob([str]));
}

Worker内ではFileReaderSyncが使えるのでcallback関数はなくてもいい。

function str2bytes(str) {
  return new FileReaderSync().readAsArrayBuffer(new Blob([str]));
}

BlobコンストラクタはIE10, Chrome, Firefoxでサポート。
Safariは?
Operaは12.02では未サポート

未サポートのブラウザでは昔ながらの方法で変換する必要がある(ググればたくさん出てくる)。

パフォーマンス的には短い文字列のときは昔ながらの方法のほうが速い。
長い文字列のときはBlobコンストラクタを使ったほうが速い。


追記:

一応JSでの実装を載せておきます。String -> Arrayライクにアクセスできるオブジェクトということで。

昔ながらの実装

function unicode2utf8_array(str){
    var n = str.length,
        idx = -1,
        bytes = [],
        i, j, c;
    
    for(i = 0; i < n; ++i){
        c = str.charCodeAt(i);
        if(c <= 0x7F){
            bytes[++idx] = c;
        } else if(c <= 0x7FF){
            bytes[++idx] = 0xC0 | (c >>> 6);
            bytes[++idx] = 0x80 | (c & 0x3F);
        } else if(c <= 0xFFFF){
            bytes[++idx] = 0xE0 | (c >>> 12);
            bytes[++idx] = 0x80 | ((c >>> 6) & 0x3F);
            bytes[++idx] = 0x80 | (c & 0x3F);
        } else {
            bytes[++idx] = 0xF0 | (c >>> 18);
            bytes[++idx] = 0x80 | ((c >>> 12) & 0x3F);
            bytes[++idx] = 0x80 | ((c >>> 6) & 0x3F);
            bytes[++idx] = 0x80 | (c & 0x3F);
        }
    }
    return bytes;
}

TypedArrayを使った高速な実装

function unicode2utf8_uint8array(str){
    var n = str.length,
        idx = -1,
        byteLength = 512,
        bytes = new Uint8Array(byteLength),
        i, c, _bytes;
    
    for(i = 0; i < n; ++i){
        c = str.charCodeAt(i);
        if(c <= 0x7F){
            bytes[++idx] = c;
        } else if(c <= 0x7FF){
            bytes[++idx] = 0xC0 | (c >>> 6);
            bytes[++idx] = 0x80 | (c & 0x3F);
        } else if(c <= 0xFFFF){
            bytes[++idx] = 0xE0 | (c >>> 12);
            bytes[++idx] = 0x80 | ((c >>> 6) & 0x3F);
            bytes[++idx] = 0x80 | (c & 0x3F);
        } else {
            bytes[++idx] = 0xF0 | (c >>> 18);
            bytes[++idx] = 0x80 | ((c >>> 12) & 0x3F);
            bytes[++idx] = 0x80 | ((c >>> 6) & 0x3F);
            bytes[++idx] = 0x80 | (c & 0x3F);
        }
        //倍々でメモリを確保していく
        if(byteLength - idx <= 4){
            _bytes = bytes;
            byteLength *= 2;
            bytes = new Uint8Array(byteLength);
            bytes.set(_bytes);
        }
    }
    return bytes.subarray(0, ++idx);
}

パフォーマンス

結論:Uint8Arrayを使うとかなり速い。


追記2:

そういえばJavaScriptはシングルスレッドだったなぁっ(作業領域を共通化)てのと、コピーを返したほうが後々便利かなということで結果的に以下のような形に。

あともうひとつ、もしもtwitterのように文字列の最大の長さが決まっている場合は、領域を再確保する部分は省略しても構いません。とりあえず文字列の長さの4倍とっておけば大丈夫です。twitterの場合だったら var bytes = new Uint8Array(140 * 4); とかですか。 if 一つが無いぶん速くなるでしょう。

var unicode2utf8_uint8array = (function(){

//作業用の領域を確保
var _bytes = new Uint8Array(512);

return function(str){
    var n = str.length,
        idx = -1,
        bytes = _bytes, //ローカルに参照を渡す
        byteLength = bytes.byteLength,
        i, c;
    
    for(i = 0; i < n; ++i){
        c = str.charCodeAt(i);
        if(c <= 0x7F){
            bytes[++idx] = c;
        } else if(c <= 0x7FF){
            bytes[++idx] = 0xC0 | (c >>> 6);
            bytes[++idx] = 0x80 | (c & 0x3F);
        } else if(c <= 0xFFFF){
            bytes[++idx] = 0xE0 | (c >>> 12);
            bytes[++idx] = 0x80 | ((c >>> 6) & 0x3F);
            bytes[++idx] = 0x80 | (c & 0x3F);
        } else {
            bytes[++idx] = 0xF0 | (c >>> 18);
            bytes[++idx] = 0x80 | ((c >>> 12) & 0x3F);
            bytes[++idx] = 0x80 | ((c >>> 6) & 0x3F);
            bytes[++idx] = 0x80 | (c & 0x3F);
        }
        //倍々でメモリを確保していく
        if(byteLength - idx <= 4){
            byteLength *= 2;
            _bytes = new Uint8Array(byteLength);
            _bytes.set(bytes);
            bytes = _bytes;
        }
    }
    //コピーを返す
    return new Uint8Array(bytes.subarray(0, ++idx));
};

}();
38
39
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?