JavaScriptの文字コード絡みの忘却録

投稿日 2019/04/04 更新日 2020/02/12

型と文字コード

型 文字コード 補足
String UTF-16 DOMString
Blob - StringはUTF-8に変換される
ソースコード - Webでは、UTF-8BOMなしが一般的

UTF-8/UTF-16への変換

// String(UTF-16) -> String(UTF-8)
var text = "文字列";
var utf8 = unescape(encodeURIComponent(text));

// String(UTF-8) -> String(UTF-16)
var utf16 = decodeURIComponent(escape(utf8))

BASE64への変換

// String(UTF-16) -> String(UTF-8) -> BASE64
var text = "文字列";
var b64 = btoa(unescape(encodeURIComponent(text)));

// BASE64 -> String(UTF-8) -> String(UTF-16)
var str = decodeURIComponent(escape(atob(b64)));

ArrayBufferへの変換

// String(UTF-16) -> String(UTF-8) -> ArrayBuffer(UTF-8)
var text = "文字列";
var utf8 = unescape(encodeURIComponent(text));
var array = Uint8Array.from(utf8.split(''), c => c.charCodeAt(0));

// String(UTF-16) -> ArrayBuffer(UTF-16)
var text = '文字列';
var array = Uint16Array.from(text.split(''), c => c.charCodeAt(0));

Blobへの変換

// String(UTF-16) -> Blob(UTF-8N)
var bom = new Uint8Array([/*0xEF, 0xBB, 0xBF*/]);
var text = '文字列';
var blob = new Blob([bom, text], {"type": "text/plain"});

// String(UTF-16) -> ArrayBuffer(UTF-16) -> Blob(UTF-16LF)
var bom = new Uint8Array([0xFF, 0xFE]);
var text = '文字列';
var array = Uint16Array.from(text.split(''), c => c.charCodeAt(0));
var blob = new Blob([bom, array], {"type": "text/plain"});

複数バイト文字の文字列長

var emoji = "😉😉😉"
console.log(emoji.length);            // 6
console.log(Array.from(emoji).length);// 3
console.log([...emoji].length);       // 3

※スプレッド構文：[...iterableObj]
※絵文字だけでなく、韓国語やタイ語などでも同様の現象が発生する

ソースコードの文字コード

Web関連のソースコードの文字コードは、UTF-8BOMなしが一般的です。

BOMありだと処理できないシステムがあるため、UTF-8BOMなしなんだとか。（文字化けとかが起こる）

ただし、Microsoft ExcelでCSVファイルを扱う場合は、UTF-8BOMありにしないと、Shift-JIS扱いされて文字化けします。

URLエンコード（パーセントエンコーディング）

URIで使用できない文字を使う際に行われるエンコードです。URL関連などで使用されます。

var url0 = 'https://.../バグ取りの日々.html';
var url1 = encodeURIComponent(url0);
console.log(url1);            // https%3A%2F%2F...%2F%E3%83%90%E3%82%B0%E5%8F%96%E3%82%8A%E3%81%AE%E6%97%A5%E3%80%85.html

var url2 = decodeURIComponent(url1);
console.log(url2);            // https://.../バグ取りの日々.html

※「encodeURI」と「encodeURIComponent」の違いは、#$&+,/:;=?@を含めてエンコードするか否かです
※「application/x-www-form-urlencoded」では、半角スペース（%20）が「+」に変換される

Punycode

日本語ドメインなどに使用されている文字符号化方式です。

HTML特殊文字

HTMLには、特別に変換された文字が存在します。&や。などです。次に変換処理の参考リンクを示します。

参考