JavaScript進行UTF-8編碼與解碼

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 33
foreach (var b in bytes)
    Console.Write(b + " ");
Console.Write("\n");
var content = System.Text.Encoding.UTF8.GetString(bytes);
Console.WriteLine(content);  // 打印 ab熱cd!

經過以上方法組合，便可經過websocket在前端與後端之間以二進制的形式交換數據，方便協議的制定。