Bagaimana untuk Menyahkod Rentetan Base64 dalam JavaScript Semasa Mengendalikan Pengekodan UTF-8?

Nyahkod Base64 Menggunakan atob JavaScript Fungsi: Mengendalikan UTF-8

Fungsi atob() JavaScript direka untuk menyahkod rentetan berkod base64. Pengguna mungkin menghadapi masalah apabila menyahkod rentetan yang dikodkan UTF-8, mengakibatkan aksara yang dikodkan ASCII dan bukannya perwakilan UTF-8 yang betul.

Cabaran: Memahami Masalah Unikod

Base64 mengharapkan data binari sebagai input , dan JavaScript menganggap rentetan dengan aksara yang menduduki satu bait sebagai data binari. Aksara yang menduduki lebih daripada satu bait dalam rentetan yang dikodkan UTF-8, bagaimanapun, mencetuskan pengecualian semasa pengekodan.

Penyelesaian 1: Saling kendali Perduaan

Pembetulan yang disyorkan ialah mengekod dan menyahkod rentetan binari:

Pengekodan UTF-8 kepada Binari

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

Penyahkodan Binari kepada UTF-8

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

Penyelesaian ini menukar rentetan UTF-8 asal kepada perwakilan binari, mengekalkan pengekodan UTF-16, perwakilan asli dalam JavaScript.

Penyelesaian 2: Saling kendali ASCII Base64

Penyelesaian alternatif yang tertumpu pada kebolehoperasian UTF-8 adalah untuk mengekalkan rentetan plaintext base64:

Pengekodan UTF-8 ke Base64

function b64EncodeUnicode(str) {    
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode('0x' + p1);
  }));
}

Menyahkod Base64 ke UTF-8

function b64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

Penyelesaian ini mengendalikan rentetan berkod UTF-8 dengan cekap tanpa mengubah perwakilannya.

Sokongan TypeScript

// Encoding UTF-8 ⇢ base64

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode(parseInt(p1, 16))
    }))
}

// Decoding base64 ⇢ UTF-8

function b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
    }).join(''))
}

Penyelesaian Sejarah (Ditamatkan)

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

Walaupun masih berfungsi, pendekatan ini kini tidak digunakan dalam penyemak imbas moden.

Atas ialah kandungan terperinci Bagaimana untuk Menyahkod Rentetan Base64 dalam JavaScript Semasa Mengendalikan Pengekodan UTF-8?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!