本文解答：JS如何按自定義格式拼接二進制串？如何解析二進制串？

什么是二進制串？

當你要存一些數(shù)據(jù)時，可以用自定義格式存下來，這樣最節(jié)約空間。

(資料圖)

例如，你想存這些數(shù)據(jù)：

那么你可以規(guī)定這種自定義格式的二進制串：dddddddc cccbaaaa其中d c b a都是代表0或1，我們用最后4位（aaaa）表示“ID”，用b表示“是否VIP”，用ccc表示“星座”，用dddd表示年齡。

本來你可能會用uint32的數(shù)組來存這些，占4*32=128位，但是現(xiàn)在，我們只用了16位，2個uint8就存下了。非常節(jié)約存儲空間。這就是一種自定義格式的二進制串。

注意：當今存儲確實不貴，但是如果你希望把信息存放到URL中，那么你的空間越小，URL就越短。這時候價值就非常大了。例如我之前開發(fā)象棋小游戲，把棋局信息（包括當前棋盤狀態(tài)、所有回合操作記錄）都存到了URL中，就能非常方便的保存、分享游戲?qū)?，方便大家?fù)盤。詳見文章《保存象棋棋盤信息，需要多少比特？我只用139-167位二進制》

在JS中，對應(yīng)的數(shù)據(jù)類型是Uint8Array。

拼接自定義格式二進制串

function concatBits(current: number, offset: number, bits: number, bitsLength: number) {  let newCurrent = current;  let newOffset = offset;  const newUint8: number[] = [];  if (offset + bitsLength < 8) {    newCurrent |= bits << (8 - bitsLength - offset);    newOffset += bitsLength;  } else if (offset + bitsLength === 8) {    newUint8.push(current | bits);    newCurrent = 0;    newOffset = 0;  } else {    newCurrent |= bits >> (offset - 8 + bitsLength);    newUint8.push(newCurrent);    newCurrent = (bits << (16 - offset - bitsLength)) & 0xff;    newOffset = offset - 8 + bitsLength;  }  return [newCurrent, newOffset, newUint8];}

當然這還是有個限制：bitsLength必須小于等于8。如果超過8，可能一個bits要覆蓋3個uint8，這種情況沒考慮在內(nèi)。

如果你需要拓展，歡迎繼續(xù)完善它！

解析自定義格式二進制串

function readBits(array: Uint8Array, bitsOffset: number, bitsLength: number) {  const offset = bitsOffset % 8;  const index = Math.floor(bitsOffset / 8);  if ((offset + bitsLength > 8 && index + 1 >= array.length) || offset + bitsLength <= 8 && index >= array.length) {    throw new Error("readBitsError");  }  let number = offset + bitsLength <= 8 ? array[index] : (array[index] << 8) | array[index + 1];  const length = offset + bitsLength <= 8 ? 8 : 16;  number >>= (length - bitsLength - offset);  number &= ([0, 1, 3, 7, 15, 31, 63][bitsLength]);  return [number, bitsOffset + bitsLength];}

decode難點

相比encode，decode其實是更難的事情。

因為encode時，你只需要無腦往一個字節(jié)串后面補充就好。而decode需要你非常清楚，每一位的作用，并理解他們的含義。你需要有高超的位運算技巧，才能輕易完成。

如何知道一共有多少項目

設(shè)計數(shù)據(jù)結(jié)構(gòu)時，我們沒有把項目數(shù)作為一個變量，所以數(shù)組長度是未知的。

也就是說，我們必須不斷循環(huán)，直到這個字節(jié)串沒有內(nèi)容了，我們就終止。

如何讀取制定長度bit位的內(nèi)容

我們封裝一個函數(shù)readBits，用于讀取某個字節(jié)串，從第x位開始、長度為n的內(nèi)容。

因此，需要3個參數(shù)：

返回值主要是對應(yīng)的內(nèi)容（可以用一個uint8來表示），此外，讀取后還需要更新一下調(diào)用者的位偏移量bitsOffset，方便持續(xù)調(diào)用，所以我們順便把新的位偏移量bitsOffset返回，作為返回值第二項。

解釋

在本文場景下，要讀取的長度bitsLength不超過8，所以我們要關(guān)注的數(shù)據(jù)量，只會來自1個uint8或者某連續(xù)2個uint8。

計算index就是為了判斷第一個關(guān)鍵的uint8的位置。

計算offset，知道應(yīng)該從index的第幾位開始算數(shù)。

然后通過比較offset + bitsLength和8的大小，就知道我們需要關(guān)注1個uint8即可、還是需要關(guān)注連續(xù)2個uint8。

我們把需要關(guān)注的uint8賦值給number，用length表示我們關(guān)注8位還是16位。

例如number二進制是10110000，我們需要取從2開始的長度為2的內(nèi)容（即11）。該怎么做呢？

只需要把它右移4位（用于刪除不需要的后綴），再跟二進制11做個與操作（用于刪除不需要的前綴），即可。

因此代碼會這樣寫：number >>= (length - bitsLength - offset);number &= ([0, 1, 3, 7, 15, 31, 63][bitsLength]);。

其中0 1 3 7 15 31 63，對應(yīng)二進制分別是0 1 11 111 1111 11111 111111。都是為了刪除前綴。

這里因為我需要的bitsLength有限，所以我用這種方式偷懶了。如果你要做的更通用，可能要這樣寫：2 ** bitsLength - 1，目的是獲取位長度為bitsLength的全是1的數(shù)字，用于刪除number不需要的前綴。

readBits開發(fā)完畢，以后可以這樣調(diào)用：

let current;let bitsOffset = 0;[current, bitsOffset] = readBits(array, bitsOffset, 4);

這會讀取字節(jié)串a(chǎn)rray的從第0位開始、長度為4個bit位的內(nèi)容，賦值給current變量。

寫在最后

我是HullQin，公眾號線下聚會游戲的作者（歡迎關(guān)注我，交個朋友）。轉(zhuǎn)發(fā)本文前需獲得作者HullQin授權(quán)。我獨立開發(fā)了《聯(lián)機桌游合集》，是個網(wǎng)頁，可以很方便的跟朋友聯(lián)機玩UNO、飛行棋、斗地主、五子棋、一夜狼、狼人殺、象棋、德國心臟病、達芬奇密碼等游戲，不收費無廣告。還開發(fā)了《Dice Crush》參加Game Jam 2022。喜歡可以關(guān)注我噢～我有空了會分享做游戲的相關(guān)技術(shù)，會在這個專欄里分享：《教你做小游戲》。