JavaScript本身可通過charCodeAt方法得到一個(gè)字符的Unicode編碼，并通過fromCharCode方法將Unicode編碼轉(zhuǎn)換成對應(yīng)字符。

但charCodeAt方法得到的應(yīng)該是一個(gè)16位的整數(shù)，每個(gè)字符占用兩字節(jié)。在網(wǎng)絡(luò)上傳輸一般采用UTF-8編碼，JavaScript本身沒有提供此類方法。不過有一個(gè)簡便的辦法來實(shí)現(xiàn)UTF-8的編碼與解碼。

Web要求URL的查詢字符串采用UTF-8編碼，對于一些特殊字符或者中文等，會編碼成多個(gè)字節(jié)，變成%加相應(yīng)16進(jìn)制碼的形式。比如：漢字 中 將會被編碼為%E4%B8%AD。

為此JavaScript提供了encodeURIComponent與decodeURIComponent方法組合來對查詢字符串進(jìn)行編碼與解碼。利用這一點(diǎn)，我們可以將encodeURIComponent方法編碼后的字符串進(jìn)行處理，最終得到對應(yīng)的字節(jié)數(shù)組。代碼如下：

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;
}

12345.png

這個(gè)方法的作用是得到某一個(gè)字符串對應(yīng)UTF-8編碼的字節(jié)序列，可在服務(wù)端語言，如C#中通過 System.Text.Encoding.UTF8.GetString(bytes) 方法將字節(jié)序列解碼為相應(yīng)的字符串。

而對應(yīng)的，將以UTF-8編碼的字節(jié)序列解碼為String的JavaScript方法為：

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

該方法將每一字節(jié)都轉(zhuǎn)換成%加16進(jìn)制數(shù)字的表示形式，再通過decodeURIComponent方法解碼，即可得到相應(yīng)的字符串。使用示例如下：

var array = encodeUtf8("你好")
console.log(array);     // 打印  [228, 189, 160, 229, 165, 189]
var content = decodeUtf8(array);
console.log(content);   // 打印 你好

var array = encodeUtf8("@@°üˉ?")
console.log(array); //[64, 64, 194, 176, 195, 156, 194, 175, 195, 155]
var content = decodeUtf8(array);
console.log(content);   // @@°üˉ? (echars china.js就是用該種編碼對地理坐標(biāo)加偏后然后轉(zhuǎn)換編碼)

[圖片上傳失敗...(image-dc2750-1764289019349)]

<figcaption style="color: rgb(145, 150, 161); font-size: 0.9em; line-height: 1.5; margin-top: calc(0.666667em); padding: 0px 1em; text-align: center;">echars 地理坐標(biāo)加密</figcaption>

對應(yīng)的C#使用示例如下：

var bytes = System.Text.Encoding.UTF8.GetBytes("ab熱cd!");
// 以下循環(huán)將打印 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在前端與后端之間以二進(jìn)制的形式交換數(shù)據(jù)，方便協(xié)議的制定。