JavaScript進行UTF-8編碼與解碼

標籤：使用   char   有一個   logs   return   方便   二進位   中文   多個   

JavaScript本身可通過charCodeAt方法得到一個字元的Unicode編碼，並通過fromCharCode方法將Unicode編碼轉換成對應字元。

但charCodeAt方法得到的應該是一個16位的整數，每個字元佔用兩位元組。在網路上傳輸一般採用UTF-8編碼，JavaScript本身沒有提供此類方法。不過有一個簡便的辦法來實現UTF-8的編碼與解碼。

Web要求URL的查詢字串採用UTF-8編碼，對於一些特殊字元或者中文等，會編碼成多個位元組，變成%加相應16進位碼的形式。比如：漢字 中 將會被編碼為%E4%B8%AD。

為此JavaScript提供了encodeURIComponent與decodeURIComponent方法組合來對查詢字串進行編碼與解碼。利用這一點，我們可以將encodeURIComponent方法編碼後的字串進行處理，最終得到對應的位元組數組。代碼如下：

function encodeUtf8(text) {    const code = encodeURIComponent(text);    const bytes = [];    for (var i = 0; i < code.length; i++) {        const c = code.charAt(i);        if (c === ‘%‘) {            const hex = code.charAt(i + 1) + code.charAt(i + 2);            const hexVal = parseInt(hex, 16);            bytes.push(hexVal);            i += 2;        } else bytes.push(c.charCodeAt(0));    }    return bytes;}

這個方法的作用是得到某一個字串對應UTF-8編碼的位元組序列，可在服務端語言，如C#中通過 System.Text.Encoding.UTF8.GetString(bytes) 方法將位元組序列解碼為相應的字串。

而對應的，將以UTF-8編碼的位元組序列解碼為String的JavaScript方法為：

function decodeUtf8(bytes) {    var encoded = "";    for (var i = 0; i < bytes.length; i++) {        encoded += ‘%‘ + bytes[i].toString(16);    }    return decodeURIComponent(encoded);}

該方法將每一位元組都轉換成%加16進位數位表示形式，再通過decodeURIComponent方法解碼，即可得到相應的字串。使用樣本如下：

var array = encodeUtf8(‘ab熱cd!‘);console.log(array);     // 列印 [97, 98, 231, 131, 173, 99, 100, 33] var content = decodeUtf8(array);console.log(content);   // 列印 ab熱cd!

對應的C#使用樣本如下：

var bytes = System.Text.Encoding.UTF8.GetBytes("ab熱cd!");// 以下迴圈將列印 97 98 231 131 173 99 100 33foreach (var b in bytes)    Console.Write(b + " ");Console.Write("\n");var content = System.Text.Encoding.UTF8.GetString(bytes);Console.WriteLine(content);  // 列印 ab熱cd!

通過以上方法組合，即可通過websocket在前端與後端之間以二進位的形式交換資料，方便協議的制定。

本文轉載於以下地址：JavaScript進行UTF-8編碼與解碼

JavaScript進行UTF-8編碼與解碼