JavaScript atob 함수를 사용하여 Base64 디코딩: UTF-8 처리

JavaScript의 atob() 함수는 base64로 인코딩된 문자열을 디코딩하도록 설계되었습니다. 사용자는 UTF-8로 인코딩된 문자열을 디코딩할 때 문제가 발생할 수 있으며, 이로 인해 적절한 UTF-8 표현 대신 ASCII로 인코딩된 문자가 생성될 수 있습니다.

도전 과제: 유니코드 문제 이해

Base64는 이진 데이터를 입력으로 예상합니다. , JavaScript는 1바이트를 차지하는 문자가 포함된 문자열을 이진 데이터로 간주합니다. 그러나 UTF-8로 인코딩된 문자열에서 1바이트 이상을 차지하는 문자는 인코딩 중에 예외를 트리거합니다.

해결책 1: 바이너리 상호 운용성

권장되는 수정 방법은 바이너리 문자열을 인코딩하고 디코딩하는 것입니다.

UTF-8을 바이너리로 인코딩

function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i 
바이너리를 UTF-8로 디코딩
function fromBinary(encoded) {
  const binary = atob(encoded);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i 
이 솔루션은 원본 UTF-8 문자열을 이진 표현으로 변환하고 JavaScript의 기본 표현인 UTF-16 인코딩을 유지합니다.
솔루션 2: ASCII Base64 상호 운용성
UTF-8 상호 운용성에 초점을 맞춘 대체 솔루션은 일반 텍스트 base64 문자열을 유지하는 것입니다.
UTF-8을 Base64로 인코딩
function b64EncodeUnicode(str) {    
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    function toSolidBytes(match, p1) {
      return String.fromCharCode('0x'   p1);
  }));
}
Base64를 UTF-8로 디코딩
function b64DecodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%'   ('00'   c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}
이 솔루션은 표현을 변경하지 않고 UTF-8로 인코딩된 문자열을 효율적으로 처리합니다.
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(''))
}
기존 솔루션(더 이상 사용되지 않음)
function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}
이 접근 방식은 아직 작동하지만 이제 최신 브라우저에서는 더 이상 사용되지 않습니다.