JavaScript處理中文字符串的Base64編碼與解碼的兩種方法
在 Web 開發(fā)中,Base64 編碼是一種常見的數(shù)據(jù)轉(zhuǎn)換方式。它通過將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為文本數(shù)據(jù),便于在 HTTP 請求、URL 中傳輸或存儲。然而,處理中文字符時,Base64 編碼會面臨一些特殊的挑戰(zhàn),因為中文字符通常占用多個字節(jié),而 Base64 編碼是基于字節(jié)的。在本文中,我們將介紹兩種方法來處理中文字符串的 Base64 編碼與解碼。
為什么 Base64 編碼會與中文字符發(fā)生沖突?
Base64 編碼是一種將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為 ASCII 字符串格式的方式。每個字符占用 6 位,而 Base64 編碼本身的原理是將輸入數(shù)據(jù)按照每 6 位拆分,并映射到對應(yīng)的 Base64 字符上。
然而,中文字符在 UTF-8 編碼下通常需要多個字節(jié)(通常是 3 個字節(jié))。因此,如果我們直接對中文字符進(jìn)行 Base64 編碼而沒有正確處理字符編碼,可能會導(dǎo)致編碼錯誤或者解碼時出現(xiàn)亂碼。為了避免這個問題,我們需要先將中文字符轉(zhuǎn)換為 UTF-8 字節(jié),然后再進(jìn)行 Base64 編碼。
在本文中,我們將介紹兩種不同的方式來解決這個問題,分別是手動實現(xiàn) Base64 編碼和解碼的方式,以及使用 TextEncoder
和 TextDecoder
API 來處理編碼和解碼。
方法一:手動實現(xiàn) Base64 編碼與解碼
在這個方法中,我們手動處理每個字節(jié),并將字節(jié)轉(zhuǎn)化為二進(jìn)制字符串。然后,我們將二進(jìn)制字符串按每 6 位進(jìn)行拆分,映射為 Base64 字符。解碼時,我們通過反向操作將 Base64 字符還原為二進(jìn)制數(shù)據(jù),然后恢復(fù)為原始的 UTF-8 字符串。
(1) 中文字符串的 Base64 編碼
function base64Encode(input) { const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; ? // 將字符串轉(zhuǎn)換為 UTF-8 字節(jié) let utf8Bytes = new TextEncoder().encode(input); ? // 將每個字節(jié)轉(zhuǎn)換為二進(jìn)制字符串 let binaryString = ''; for (let i = 0; i < utf8Bytes.length; i++) { binaryString += utf8Bytes[i].toString(2).padStart(8, '0'); } ? // 按 6 位拆分 const chunks = []; for (let i = 0; i < binaryString.length; i += 6) { chunks.push(binaryString.slice(i, i + 6)); } ? // 如果最后一組少于 6 位,進(jìn)行填充 if (chunks[chunks.length - 1].length < 6) { chunks[chunks.length - 1] = chunks[chunks.length - 1].padEnd(6, '0'); } ? // 查找對應(yīng)的 Base64 字符 let base64Encoded = chunks.map(chunk => { const index = parseInt(chunk, 2); // 將二進(jìn)制轉(zhuǎn)換為數(shù)字 return base64Chars.charAt(index); }).join(''); ? // 添加填充字符 while (base64Encoded.length % 4 !== 0) { base64Encoded += '='; } ? return base64Encoded; } ? // 示例 const input = '你好潤,Base64!'; const encoded = base64Encode(input); console.log('Encoded:', encoded);// Encoded: 5L2g5aW95ram77yMQmFzZTY077yB
解釋:
- UTF-8 編碼:通過
TextEncoder().encode(input)
方法,我們將輸入的中文字符串轉(zhuǎn)換為 UTF-8 字節(jié)。每個字節(jié)在 UTF-8 編碼中通常會占用多個字節(jié)(例如中文字符通常占用 3 個字節(jié))。 - 二進(jìn)制轉(zhuǎn)換:我們將每個字節(jié)轉(zhuǎn)為二進(jìn)制字符串,并將它們合并成一個長的二進(jìn)制串。
- Base64 編碼:通過按每 6 位將二進(jìn)制字符串拆分,我們將每一組 6 位的二進(jìn)制數(shù)轉(zhuǎn)換為對應(yīng)的 Base64 字符。
- 填充字符:Base64 編碼要求輸出的字符數(shù)必須是 4 的倍數(shù),因此我們在末尾添加
=
字符進(jìn)行填充。
(2) 中文字符串的 Base64 解碼
function base64Decode(input) { const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; ? // 去除填充字符 '=' input = input.replace(/=/g, ''); ? // 將每個 Base64 字符轉(zhuǎn)換為 6 位二進(jìn)制 let binaryString = ''; for (let i = 0; i < input.length; i++) { const index = base64Chars.indexOf(input.charAt(i)); // 查找字符的位置 binaryString += index.toString(2).padStart(6, '0'); // 將位置轉(zhuǎn)換為 6 位二進(jìn)制 } ? // 每 8 位一個字節(jié),轉(zhuǎn)換為字節(jié) let decodedBytes = []; for (let i = 0; i < binaryString.length; i += 8) { const byte = binaryString.slice(i, i + 8); decodedBytes.push(parseInt(byte, 2)); // 將二進(jìn)制轉(zhuǎn)為字節(jié) } ? // 將字節(jié)數(shù)組轉(zhuǎn)換為 UTF-8 字符串 let decodedString = new TextDecoder().decode(new Uint8Array(decodedBytes)); ? return decodedString; } ? // 示例 const decoded = base64Decode(encoded); console.log('Decoded:', decoded);//Decoded: 你好潤,Base64!
解釋:
- Base64 解碼:首先將 Base64 字符串轉(zhuǎn)換為 6 位二進(jìn)制字符串。然后每 8 位恢復(fù)為一個字節(jié)。
- 還原字符:通過
TextDecoder
將解碼后的字節(jié)數(shù)組還原為 UTF-8 字符串。
方法二:使用 TextEncoder 和 TextDecoder API
如果不想手動實現(xiàn) Base64 編碼和解碼的過程,現(xiàn)代瀏覽器提供了 TextEncoder
和 TextDecoder
API,可以幫助我們簡化編碼和解碼過程。我們可以直接使用這些 API 來將中文字符串轉(zhuǎn)換為字節(jié)數(shù)組,再進(jìn)行 Base64 編碼。
(1) 中文字符串的 Base64 編碼
function base64EncodeUsingAPI(input) { // 使用 TextEncoder 將字符串轉(zhuǎn)換為 UTF-8 字節(jié) const utf8Bytes = new TextEncoder().encode(input); ? // 將字節(jié)數(shù)組轉(zhuǎn)換為 Base64 字符串 return btoa(String.fromCharCode.apply(null, utf8Bytes)); } ? // 示例 const input = '你好red潤,Base64!'; const encoded = base64EncodeUsingAPI(input); console.log('Encoded:', encoded);//Encoded: 5L2g5aW9cmVk5ram77yMQmFzZTY077yB
解釋:
- TextEncoder:通過
TextEncoder
將字符串轉(zhuǎn)換為 UTF-8 字節(jié)數(shù)組。 btoa
:btoa
是一個內(nèi)建的 JavaScript 函數(shù),用于將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為 Base64 編碼的字符串。需要注意的是,btoa
只能處理 8 位字符,因此我們通過String.fromCharCode.apply
方法將字節(jié)數(shù)組轉(zhuǎn)換為字符串,然后進(jìn)行編碼。
(2) 中文字符串的 Base64 解碼
function base64DecodeUsingAPI(input) { // 使用 atob 解碼 Base64 字符串 const decodedData = atob(input); ? // 將解碼后的字符串轉(zhuǎn)換為字節(jié)數(shù)組 const byteArray = new Uint8Array(decodedData.length); for (let i = 0; i < decodedData.length; i++) { byteArray[i] = decodedData.charCodeAt(i); } ? // 使用 TextDecoder 將字節(jié)數(shù)組轉(zhuǎn)換為原始字符串 return new TextDecoder().decode(byteArray); } ? // 示例 const decoded = base64DecodeUsingAPI(encoded); console.log('Decoded:', decoded);// Decoded: 你好red潤,Base64!
解釋:
atob
:atob
函數(shù)用于解碼 Base64 字符串。解碼后的數(shù)據(jù)是一個原始的二進(jìn)制字符串。- TextDecoder:通過
TextDecoder
將字節(jié)數(shù)組還原為 UTF-8 字符串。
總結(jié)
在處理中文字符串的 Base64 編碼與解碼時,關(guān)鍵在于如何正確地將字符轉(zhuǎn)換為字節(jié)數(shù)據(jù)。通過手動處理每個字節(jié)或使用現(xiàn)代的 TextEncoder
和 TextDecoder
API,我們可以確保中文字符能夠正確地進(jìn)行 Base64 編碼與解碼。
- 手動實現(xiàn):適用于那些需要詳細(xì)控制編碼過程的場景。你可以深入理解 Base64 編碼的每個細(xì)節(jié),并根據(jù)需要進(jìn)行優(yōu)化。
- 使用 API:對于大多數(shù)情況,
TextEncoder
和TextDecoder
API 提供了一種更簡潔、直接的方式來處理編碼和解碼,減少了手動操作的復(fù)雜性。
到此這篇關(guān)于JavaScript處理中文字符串的Base64編碼與解碼的兩種方法的文章就介紹到這了,更多相關(guān)JavaScript處理Base64編碼與解碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap基本插件學(xué)習(xí)筆記之Alert警告框(20)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之ALert警告框的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12uniapp中scroll-view基礎(chǔ)用法示例代碼
我們在項目中往往都能遇到實現(xiàn)左右滑動跟上下滑動的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view基礎(chǔ)用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11JS數(shù)據(jù)結(jié)構(gòu)與算法中的隊列結(jié)構(gòu)詳解
隊列指的是一種受限的線性表,先進(jìn)先出,今天通過本文帶領(lǐng)大家認(rèn)識隊列及隊列的應(yīng)用,對JS數(shù)據(jù)結(jié)構(gòu)與算法-隊列結(jié)構(gòu)相關(guān)知識感興趣的朋友一起看看吧2022-11-11touch.js 拖動、縮放、旋轉(zhuǎn) (鼠標(biāo)手勢)功能代碼
這篇文章主要介紹了touch.js 拖動、縮放、旋轉(zhuǎn) (鼠標(biāo)手勢)功能,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02