JavaScript處理中文字符串的Base64編碼與解碼的兩種方法
更新時間：2025年01月17日 10:20:15 作者：red潤
這篇文章主要介紹了在 JavaScript 中處理中文字符串的 Base64 編碼與解碼,解釋了 Base64 編碼與中文字符沖突的原因,分別闡述了手動實現(xiàn)和使用TextEncoder和TextDecoder API 兩種方法,包括編碼和解碼的具體實現(xiàn)及示例,最后總結了兩種方法的適用場景
在 Web 開發(fā)中，Base64 編碼是一種常見的數據轉換方式。它通過將二進制數據轉換為文本數據，便于在 HTTP 請求、URL 中傳輸或存儲。然而，處理中文字符時，Base64 編碼會面臨一些特殊的挑戰(zhàn)，因為中文字符通常占用多個字節(jié)，而 Base64 編碼是基于字節(jié)的。在本文中，我們將介紹兩種方法來處理中文字符串的 Base64 編碼與解碼。
為什么 Base64 編碼會與中文字符發(fā)生沖突？
Base64 編碼是一種將二進制數據轉換為 ASCII 字符串格式的方式。每個字符占用 6 位，而 Base64 編碼本身的原理是將輸入數據按照每 6 位拆分，并映射到對應的 Base64 字符上。
然而，中文字符在 UTF-8 編碼下通常需要多個字節(jié)（通常是 3 個字節(jié)）。因此，如果我們直接對中文字符進行 Base64 編碼而沒有正確處理字符編碼，可能會導致編碼錯誤或者解碼時出現(xiàn)亂碼。為了避免這個問題，我們需要先將中文字符轉換為 UTF-8 字節(jié)，然后再進行 Base64 編碼。
在本文中，我們將介紹兩種不同的方式來解決這個問題，分別是手動實現(xiàn) Base64 編碼和解碼的方式，以及使用 TextEncoder 和 TextDecoder API 來處理編碼和解碼。
方法一：手動實現(xiàn) Base64 編碼與解碼
在這個方法中，我們手動處理每個字節(jié)，并將字節(jié)轉化為二進制字符串。然后，我們將二進制字符串按每 6 位進行拆分，映射為 Base64 字符。解碼時，我們通過反向操作將 Base64 字符還原為二進制數據，然后恢復為原始的 UTF-8 字符串。
(1) 中文字符串的 Base64 編碼
function base64Encode(input) {
const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
?
// 將字符串轉換為 UTF-8 字節(jié)
let utf8Bytes = new TextEncoder().encode(input);
?
// 將每個字節(jié)轉換為二進制字符串
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 位，進行填充
if (chunks[chunks.length - 1].length < 6) {
chunks[chunks.length - 1] = chunks[chunks.length - 1].padEnd(6, '0');
}
?
// 查找對應的 Base64 字符
let base64Encoded = chunks.map(chunk => {
const index = parseInt(chunk, 2); // 將二進制轉換為數字
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)方法，我們將輸入的中文字符串轉換為 UTF-8 字節(jié)。每個字節(jié)在 UTF-8 編碼中通常會占用多個字節(jié)（例如中文字符通常占用 3 個字節(jié)）。 - 二進制轉換：我們將每個字節(jié)轉為二進制字符串，并將它們合并成一個長的二進制串。
- Base64 編碼：通過按每 6 位將二進制字符串拆分，我們將每一組 6 位的二進制數轉換為對應的 Base64 字符。
- 填充字符：Base64 編碼要求輸出的字符數必須是 4 的倍數，因此我們在末尾添加
=字符進行填充。
(2) 中文字符串的 Base64 解碼
function base64Decode(input) {
const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
?
// 去除填充字符 '='
input = input.replace(/=/g, '');
?
// 將每個 Base64 字符轉換為 6 位二進制
let binaryString = '';
for (let i = 0; i < input.length; i++) {
const index = base64Chars.indexOf(input.charAt(i)); // 查找字符的位置
binaryString += index.toString(2).padStart(6, '0'); // 將位置轉換為 6 位二進制
}
?
// 每 8 位一個字節(jié)，轉換為字節(jié)
let decodedBytes = [];
for (let i = 0; i < binaryString.length; i += 8) {
const byte = binaryString.slice(i, i + 8);
decodedBytes.push(parseInt(byte, 2)); // 將二進制轉為字節(jié)
}
?
// 將字節(jié)數組轉換為 UTF-8 字符串
let decodedString = new TextDecoder().decode(new Uint8Array(decodedBytes));
?
return decodedString;
}
?
// 示例
const decoded = base64Decode(encoded);
console.log('Decoded:', decoded);//Decoded: 你好潤，Base64！
解釋：
- Base64 解碼：首先將 Base64 字符串轉換為 6 位二進制字符串。然后每 8 位恢復為一個字節(jié)。
- 還原字符：通過
TextDecoder將解碼后的字節(jié)數組還原為 UTF-8 字符串。
方法二：使用 TextEncoder 和 TextDecoder API
如果不想手動實現(xiàn) Base64 編碼和解碼的過程，現(xiàn)代瀏覽器提供了 TextEncoder 和 TextDecoder API，可以幫助我們簡化編碼和解碼過程。我們可以直接使用這些 API 來將中文字符串轉換為字節(jié)數組，再進行 Base64 編碼。
(1) 中文字符串的 Base64 編碼
function base64EncodeUsingAPI(input) {
// 使用 TextEncoder 將字符串轉換為 UTF-8 字節(jié)
const utf8Bytes = new TextEncoder().encode(input);
?
// 將字節(jié)數組轉換為 Base64 字符串
return btoa(String.fromCharCode.apply(null, utf8Bytes));
}
?
// 示例
const input = '你好red潤，Base64！';
const encoded = base64EncodeUsingAPI(input);
console.log('Encoded:', encoded);//Encoded: 5L2g5aW9cmVk5ram77yMQmFzZTY077yB
解釋：
- TextEncoder：通過
TextEncoder將字符串轉換為 UTF-8 字節(jié)數組。 btoa：btoa是一個內建的 JavaScript 函數，用于將二進制數據轉換為 Base64 編碼的字符串。需要注意的是，btoa只能處理 8 位字符，因此我們通過String.fromCharCode.apply方法將字節(jié)數組轉換為字符串，然后進行編碼。
(2) 中文字符串的 Base64 解碼
function base64DecodeUsingAPI(input) {
// 使用 atob 解碼 Base64 字符串
const decodedData = atob(input);
?
// 將解碼后的字符串轉換為字節(jié)數組
const byteArray = new Uint8Array(decodedData.length);
for (let i = 0; i < decodedData.length; i++) {
byteArray[i] = decodedData.charCodeAt(i);
}
?
// 使用 TextDecoder 將字節(jié)數組轉換為原始字符串
return new TextDecoder().decode(byteArray);
}
?
// 示例
const decoded = base64DecodeUsingAPI(encoded);
console.log('Decoded:', decoded);// Decoded: 你好red潤，Base64！
解釋：
atob：atob函數用于解碼 Base64 字符串。解碼后的數據是一個原始的二進制字符串。- TextDecoder：通過
TextDecoder將字節(jié)數組還原為 UTF-8 字符串。
總結
在處理中文字符串的 Base64 編碼與解碼時，關鍵在于如何正確地將字符轉換為字節(jié)數據。通過手動處理每個字節(jié)或使用現(xiàn)代的 TextEncoder 和 TextDecoder API，我們可以確保中文字符能夠正確地進行 Base64 編碼與解碼。
- 手動實現(xiàn)：適用于那些需要詳細控制編碼過程的場景。你可以深入理解 Base64 編碼的每個細節(jié)，并根據需要進行優(yōu)化。
- 使用 API：對于大多數情況，
TextEncoder和TextDecoderAPI 提供了一種更簡潔、直接的方式來處理編碼和解碼，減少了手動操作的復雜性。
到此這篇關于JavaScript處理中文字符串的Base64編碼與解碼的兩種方法的文章就介紹到這了,更多相關JavaScript處理Base64編碼與解碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript實現(xiàn)瀑布流動態(tài)加載圖片原理
這篇文章主要為大家詳細介紹了javascript實現(xiàn)瀑布流動態(tài)加載圖片原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家分享兩段簡單的JS代碼防止SQL注入。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
上傳文件時,選擇了文件后想清空文件路徑，經搜索發(fā)現(xiàn)個不錯的方法在此與大家分享下，感興趣的朋友不要錯過2013-10-10
這篇文章主要介紹了微信小程序視頻彈幕發(fā)送功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
詳解webpack打包時排除其中一個css、js文件或單獨打包一個css、js文件(兩種方法)
本文通過兩種方法給大家介紹了webpack打包時排除其中一個css、js文件，或單獨打包一個css、js文件的方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了詳解JavaScript修改注冊表的方法,本實例主要通過WshShell 對象的相關方法實現(xiàn),需要的朋友可以參考下2020-01-01
在前端開發(fā)中,我們時常會遇到需要處理大量數據渲染的場景,往往會導致頁面卡頓,時間分片（Time Slicing） ?則是解決這一問題的核心思想,下面就跟隨小編一起來了解下吧2025-08-08
JS響應鼠標點擊實現(xiàn)兩個滑塊區(qū)間拖動效果
這篇文章主要介紹了JS實現(xiàn)的兩個滑塊區(qū)間拖動效果代碼,涉及JavaScript響應鼠標事件針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)拖拽盒子效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了JS+DIV實現(xiàn)的卷簾效果,結合具體實例形式對比分析了javascript響應鼠標事件動態(tài)操作頁面元素屬性實現(xiàn)展開與折疊效果的相關操作技巧,需要的朋友可以參考下2017-03-03