JavaScript プログラミング講座


符号化について（Encoding API）



・Encoding API について
・「ArrayBuffer」から「文字列」に変換する
・「文字列」から「ArrayBuffer」に変換する

前のページに戻る

　

Encoding API について

　


■Encoding API について


https://encoding.spec.whatwg.org/
　
文字列の符号化に関する機能がまとまっています。
　
仕様書には、主要文字コードの変換手順も記載されています。
　
String 型と ArrayBuffer 型のデータを、相互変換できます。
　

上に戻る

　

「ArrayBuffer」から「文字列」に変換する

　


■ブラウザが TextDecoder クラスをサポートしているか調べる

　
window.TextDecoder が真であるか比較します。
　
　

１．TextDecoder オブジェクトを作成する

　
new 演算子を使って、TextDecoder コンストラクタをインスタンス化します。
　
new TextDecoder( "label" , options ) :TextDecoder
第01引数(略可)String文字コードを指定。デフォルトは "utf-8"
第02引数(略可)TextDecoderOptionsTextDecoderOptions オブジェクトを指定。
戻り値 TextDecoder新しい TextDecoder オブジェクトが得られる。
　
■第01引数（文字コード）
　
変換したい文字コードを指定します。
　
省略した場合、"utf-8" と解釈します。
　
文字コードは、事前に知っている必要があります。
　
自動的に類推される事はありません。
　
文字コードの一例です。
　
ブラウザが対応していない場合、エラーが発生します。
　
文字列 説明
"utf-8" Unicode (UTF-8)
"utf-16"
"utf-16le"		 Unicode (UTF-16、リトルエンディアン)
"utf-16be" Unicode (UTF-16、ビッグエンディアン)
"utf-32" Unicode (UTF-32)
"euc-jp" 日本語（EUC）
"iso-2022-jp" 日本語（JIS）
"shift_jis" 日本語（Shift-JIS）
　
■第02引数（TextDecoderOptions）
　
Object オブジェクトを作成し、以下のプロパティを追加します。
　
プロパティ名型説明デフォルト
fatalBoolean符号化の違反を確認する場合、true を指定false
ignoreBOMBooleanBOM 情報を考慮しない場合、true を指定false
　
■使用例
　
TextDecoder オブジェクトを作成する

// TextDecoder オブジェクトを作成
var text_decoder = new TextDecoder();

// 出力テスト
console.log(text_decoder);
　
TextDecoder オブジェクトを作成する（オプション指定）

// ------------------------------------------------------------
// TextDecoderOptions オブジェクトを用意する
// ------------------------------------------------------------
var text_decoder_options = {
	fatal     : false,	// 符号化の違反を確認するか？（エラーモードの有無）
	ignoreBOM : true	// BOM 情報を考慮しないか？
};


// ------------------------------------------------------------
// TextDecoder オブジェクトを作成
// ------------------------------------------------------------
var text_decoder = new TextDecoder( "utf-8" , text_decoder_options );

// 出力テスト
console.log(text_decoder);
　

２．「ArrayBuffer」から「文字列」にデコードする

　
decode() メソッドを使用します。
　
このメソッドは、同期的に実行されます。
　
分割して、少しずつ複数回実行する事もできます。
　
TextDecoder.decode ( input , options ) :String
第01引数(略可)ArrayBufferViewソースとなるバッファを指定。
第02引数(略可)TextDecodeOptionsTextDecodeOptions オブジェクトを指定。
戻り値 String変換後の文字列が得られる。
　
■第02引数（TextDecodeOptions）
　
Object オブジェクトを作成し、以下のプロパティを追加します。
　
プロパティ名型説明デフォルト
streamBoolean複数回に分けて実行する場合に、true を指定。
（途中で分断された場合、次回に持ち越す）
false
　
■使用例
　
UTF-8 のバイナリをデコードする

// ------------------------------------------------------------
// UTF-8 形式の適当なバイナリを用意
// ------------------------------------------------------------
var ary_u8 = new Uint8Array([ 0xe3,0x81,0x82 , 0xe3,0x81,0x84 , 0xe3,0x81,0x86 ]); // あいう

// ------------------------------------------------------------
// TextDecoder オブジェクトを作成
// ------------------------------------------------------------
var text_decoder = new TextDecoder();

// ------------------------------------------------------------
// 「ArrayBuffer」から「文字列」にデコードする
// ------------------------------------------------------------
var str = text_decoder.decode(ary_u8);

// 出力テスト
console.log(str); // あいう
　
Shift-JIS のバイナリをデコードする

// ------------------------------------------------------------
// Shift-JIS 形式の適当なバイナリを用意
// ------------------------------------------------------------
var ary_u8 = new Uint8Array([ 0x82,0xa0 , 0x82,0xa2 , 0x82,0xa4 ]); // あいう

// ------------------------------------------------------------
// TextDecoder オブジェクトを作成
// ------------------------------------------------------------
var text_decoder = new TextDecoder("shift-jis");

// ------------------------------------------------------------
// 「ArrayBuffer」から「文字列」にデコードする
// ------------------------------------------------------------
var str = text_decoder.decode(ary_u8);

// 出力テスト
console.log(str); // あいう
　
BOM 付き UTF-16BE のバイナリをデコードする

// ------------------------------------------------------------
// BOM 付き UTF-16BE 形式の適当なバイナリを用意
// ------------------------------------------------------------
var ary_u8 = new Uint8Array([ 0xfe,0xff , 0x30,0x42 , 0x30,0x44 , 0x30,0x46 ]); // あいう

// ------------------------------------------------------------
// TextDecoderOptions オブジェクトを用意する
// ------------------------------------------------------------
var text_decoder_options = {
	ignoreBOM : false	// BOM 情報を考慮しないか？
};

// ------------------------------------------------------------
// TextDecoder オブジェクトを作成
// ------------------------------------------------------------
var text_decoder = new TextDecoder("utf-16be" , text_decoder_options);

// ------------------------------------------------------------
// 「ArrayBuffer」から「文字列」にデコードする
// ------------------------------------------------------------
var str = text_decoder.decode(ary_u8);

// 出力テスト
console.log(str); // あいう
console.log(str.length); // 3
　
複数回に分けてデコードする

// ------------------------------------------------------------
// UTF-8 形式の適当なバイナリを用意
// ------------------------------------------------------------
var ary_u8 = new Uint8Array([ 0xe3,0x81,0x82 , 0xe3,0x81,0x84 , 0xe3,0x81,0x86 ]); // あいう

// ------------------------------------------------------------
// バイナリを分割
// ------------------------------------------------------------
var ary_buffer = ary_u8.buffer;
var ary0 = new Uint8Array( ary_buffer , 0 , 2 ); // 0,1
var ary1 = new Uint8Array( ary_buffer , 2 , 3 ); // 2,3,4
var ary2 = new Uint8Array( ary_buffer , 5 , 4 ); // 5,6,7,8

// ------------------------------------------------------------
// TextDecoder オブジェクトを作成
// ------------------------------------------------------------
var text_decoder = new TextDecoder();

// ------------------------------------------------------------
// TextDecodeOptions オブジェクトを用意する
// ------------------------------------------------------------
var text_decode_options = {
	stream : true	// 複数回に分けて実行するか？
};

// ------------------------------------------------------------
// 「ArrayBuffer」から「文字列」にデコードする（複数回実行）
// ------------------------------------------------------------
var str = "";
str += text_decoder.decode( ary0 , text_decode_options );
str += text_decoder.decode( ary1 , text_decode_options );
str += text_decoder.decode( ary2 , text_decode_options );

// 出力テスト
console.log(str); // あいう
　

■ TextDecoder クラスのプロパティについて

　
以下の、読み取り専用のプロパティがあります。
　
プロパティ名型説明
encodingString文字コードを取得する
fatalBoolean符号化の違反を確認するか？（エラーモードの有無）
ignoreBOMBooleanBOM 情報を考慮しないか？
　

上に戻る

　

「文字列」から「ArrayBuffer」に変換する

　


■ブラウザが TextEncoder クラスをサポートしているか調べる

　
window.TextEncoder が真であるか比較します。
　
　

１．TextEncoder オブジェクトを作成する

　
new 演算子を使って、TextEncoder コンストラクタをインスタンス化します。
　
new TextEncoder( "label" ) :TextEncoder
第01引数(略可)String文字コードを指定。デフォルトは "utf-8"
戻り値 TextEncoder新しい TextEncoder オブジェクトが得られる。
　
■第01引数（文字コード）
　
変換したい文字コードを指定します。
　
省略した場合、"utf-8" 形式が採用されます。
　
文字コードの一例です。
　
ブラウザが対応していない場合、エラーが発生します。
　
エンコードは、Unicode 関連のみ対応しています。
　
文字列 説明
"utf-8" Unicode (UTF-8)
"utf-16"
"utf-16le"		 Unicode (UTF-16、リトルエンディアン)
"utf-16be" Unicode (UTF-16、ビッグエンディアン)
　
■使用例
　
TextEncoder オブジェクトを作成する

// TextEncoder オブジェクトを作成
var text_encoder = new TextEncoder();

// 出力テスト
console.log(text_encoder);
　

２．「文字列」から「ArrayBuffer」にエンコードする

　
encode() メソッドを使用します。
　
このメソッドは、同期的に実行されます。
　
TextEncoder.encode ( "input" ) :Uint8Array
第01引数(略可)Stringソースとなる文字列を指定。
戻り値 Uint8Array新しい Uint8Array オブジェクトが得られる。
　
■使用例
　
エンコードして、UTF-8 形式のバイナリを生成する

// ------------------------------------------------------------
// 適当な文字列を用意
// ------------------------------------------------------------
var str = "あいう";

// ------------------------------------------------------------
// TextEncoder オブジェクトを作成
// ------------------------------------------------------------
var text_encoder = new TextEncoder();

// ------------------------------------------------------------
// 「文字列」から「ArrayBuffer」にエンコードする
// ------------------------------------------------------------
var ary_u8 = text_encoder.encode(str);

// 出力テスト
console.log(ary_u8); // [ 0xe3,0x81,0x82 , 0xe3,0x81,0x84 , 0xe3,0x81,0x86 ]
　
エンコードして、UTF-16LE 形式のバイナリを生成する

// ------------------------------------------------------------
// 適当な文字列を用意
// ------------------------------------------------------------
var str = "あいう";

// ------------------------------------------------------------
// TextEncoder オブジェクトを作成
// ------------------------------------------------------------
var text_encoder = new TextEncoder( "utf-16" );

// ------------------------------------------------------------
// 「文字列」から「ArrayBuffer」にエンコードする
// ------------------------------------------------------------
var ary_u8 = text_encoder.encode(str);

// 出力テスト
console.log(ary_u8); // [ 0x42,0x30 , 0x44,0x30 , 0x46,0x30 ]
　

■ TextEncoder クラスのプロパティについて

　
以下の、読み取り専用のプロパティがあります。
　
プロパティ名型説明
encodingString文字コードを取得する
　

上に戻る

　
前のページに戻る