Rumah > Artikel > hujung hadapan web > Bagaimanakah anda menyahkod rentetan UTF-8 base64 dalam JavaScript menggunakan `atob` sambil mengelakkan ralat pengekodan?
Apabila menggunakan atob untuk menyahkod rentetan respons API daripada perkhidmatan yang menjana outputnya dalam UTF-8, anda mungkin menghadapi ralat atau pengekodan rentetan yang rosak. Ini disebabkan oleh pengehadan pengendalian base64 JavaScript:
<code class="js">const notOK = "✓" console.log(btoa(notOK)); // error</code>
Walaupun selepas ralat ini diselesaikan dalam ECMAScript, "Masalah Unicode" kekal, kerana base64 ialah binari format yang menganggap setiap aksara yang dikodkan menduduki satu bait. Banyak aksara Unicode memerlukan lebih daripada satu bait untuk mengekod, yang boleh menyebabkan kegagalan pengekodan.
Sumber: MDN (2021)
<code class="js">const ok = "a"; console.log(ok.codePointAt(0).toString(16)); // 0x61: occupies 1 byte const notOK = "✓"; console.log(notOK.codePointAt(0).toString(16)); // 0x2713: occupies 2 bytes</code>
Jika anda tidak pasti penyelesaian yang mana untuk dipilih, ini mungkin penyelesaian yang anda mahukan. Teruskan menatal untuk penyelesaian ASCII base64 dan sejarah jawapan ini.
Pertimbangkan menggunakan pendekatan binari dengan menukar rentetan UTF-8 kepada perwakilan binari dan sebaliknya.
<code class="js">function toBinary(string) { const codeUnits = new Uint16Array(string.length); for (let i = 0; i < codeUnits.length; i++) { codeUnits[i] = string.charCodeAt(i); } return btoa(String.fromCharCode(...new Uint8Array(codeUnits.buffer))); } encoded = toBinary("✓ à la mode") // "EycgAOAAIABsAGEAIABtAG8AZABlAA=="</code>
<code class="js">function fromBinary(encoded) { const binary = atob(encoded); const bytes = new Uint8Array(binary.length); for (let i = 0; i < bytes.length; i++) { bytes[i] = binary.charCodeAt(i); } return String.fromCharCode(...new Uint16Array(bytes.buffer)); } decoded = fromBinary(encoded) // "✓ à la mode"</code>
Untuk mengekalkan kefungsian UTF-8, pendekatan lain melalui kebolehoperasian ASCII base64 disyorkan, yang membetulkan "Masalah Unikod" sambil mengekalkan keserasian dengan rentetan base64 berasaskan teks.
<code class="js">function b64EncodeUnicode(str) { // Percent-encode Unicode, then convert to byte array return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { return String.fromCharCode('0x' + p1); })); } b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="</code>
<code class="js">function b64DecodeUnicode(str) { // Convert byte array to percent-encoding, then decode return decodeURIComponent(atob(str).split('').map(function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')); } b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</code>
<code class="ts">function b64EncodeUnicode(str) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { return String.fromCharCode(parseInt(p1, 16)) })) } function b64DecodeUnicode(str) { return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2) }).join('')) }</code>
Atas ialah kandungan terperinci Bagaimanakah anda menyahkod rentetan UTF-8 base64 dalam JavaScript menggunakan `atob` sambil mengelakkan ralat pengekodan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!