JavaScript의 Base64 인코딩 및 디코딩
이번 포스팅에서는 JavaScript에서 base64 형식으로 문자열을 인코딩하고 디코딩하는 방법을 알아 보겠습니다. 또한 JavaScript에서 base64를 사용하여 유니코드 문자를 처리하는 방법도 살펴보겠습니다.
Base64는 바이너리 데이터를 AZ, az, 0-9, + 및 /의 64개 기호로 구성된 ASCII 문자로 인코딩하는 방법입니다. Base64는 일반적으로 이미지 삽입, 양식 데이터 전송 등 HTML, JavaScript 및 CSS와 호환되는 방식으로 이진 데이터를 나타내는 데 사용됩니다. Base64 인코딩은 이진 데이터(예: 이미지 또는 파일)를 ASCII 문자 문자열로 변환하는 프로세스입니다. Base64 디코딩은 Base64 인코딩의 역과정입니다. ASCII 문자 문자열을 가져와 다시 이진 데이터로 변환합니다. 이번 포스팅에서는 내장함수 사용법에 대해 알아보겠습니다. btoa() 그리고 atob() JavaScript에서 base64로 문자열을 인코딩하고 디코딩합니다.
1. 사용방법 btoa() 그리고 atob() 자바스크립트의 함수?
JavaScript는 base64 문자열을 인코딩하고 디코딩하기 위한 두 가지 내장 함수를 제공합니다. btoa() 그리고 atob(). 그만큼 btoa() 함수는 문자열을 인수로 사용하고 base64로 인코딩된 문자열을 반환합니다. 문자열은 ASCII 또는 UTF-8과 같이 8비트로 표현할 수 있는 문자로 구성되어야 합니다. 문자열에 UTF-16과 같이 8비트로 표현할 수 없는 문자가 포함되어 있으면 함수에서 예외가 발생합니다.
그만큼 atob() 함수는 base64로 인코딩된 문자열을 인수로 사용하고 디코딩된 문자열을 반환합니다. 디코딩된 문자열은 8비트 바이트를 나타내는 문자로 구성됩니다. 즉, 해당 값의 범위는 다음과 같습니다. 0 에게 255. 인코딩된 문자열에 공백이나 문장 부호 등 base64 알파벳이 아닌 문자가 포함되어 있으면 함수에서 예외가 발생합니다.
다음은 JavaScript에서 이러한 함수를 사용하는 방법에 대한 예입니다.
|
1 2 3 4 5 6 7 8 9 |
var str = "Hello World!"; // btoa()를 사용하여 문자열을 인코딩합니다. var encoded = btoa(str); console.log(encoded); // SGVsbG8gV29ybGQh // atob()을 사용하여 인코딩된 문자열을 디코딩합니다. var decoded = atob(encoded); console.log(decoded); // 안녕하세요! |
2. JavaScript에서 Base64를 사용하여 유니코드 문자를 처리하는 방법은 무엇입니까?
앞서 언급했듯이, btoa() 그리고 atob() 함수는 8비트로 표현될 수 있는 문자로 구성된 문자열에서만 작동합니다. 그러나 일부 문자열에는 이모티콘이나 악센트 문자와 같이 인코딩하는 데 8비트 이상이 필요한 유니코드 문자가 포함될 수 있습니다. 이 경우 문자열을 사용하기 전에 문자열을 바이트 배열로 변환해야 합니다. btoa() 함수를 사용한 후 바이트 배열을 다시 문자열로 변환합니다. atob() 기능.
이 변환을 수행하는 한 가지 방법은 다음을 사용하는 것입니다. encodeURIComponent() 그리고 decodeURIComponent() 기능. 이러한 함수는 쿼리 매개변수 또는 조각 식별자와 같은 URI 구성 요소를 인코딩하고 디코딩하는 데 사용됩니다. 또한 각 바이트를 % 뒤에 두 개의 16진수 숫자로 표시하는 백분율 인코딩을 사용하여 ASCII가 아닌 문자를 이스케이프합니다. 예를 들어 UTF-8의 이모티콘 😊은 4바이트로 인코딩됩니다. F0 9F 98 8A. 퍼센트 인코딩을 사용하면 다음과 같습니다. %F0%9F%98%8A.
다음은 이러한 함수를 사용하여 JavaScript에서 base64로 유니코드 문자열을 인코딩 및 디코딩하는 방법입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var str = "Hello 😊"; // encodeURIComponent()를 사용하여 문자열을 인코딩합니다. var encoded = encodeURIComponent(str); // 인코딩된 문자열을 기록합니다. console.log(encoded); // 안녕하세요 // btoa()를 사용하여 인코딩된 문자열을 인코딩합니다. var base64 = btoa(encoded); // base64로 인코딩된 문자열을 기록합니다. console.log(base64); // SGVsbG8lMjAlRjAlOUYlOTglOEE= // atob()을 사용하여 base64로 인코딩된 문자열을 디코딩합니다. var decoded = atob(base64); // 디코딩된 문자열을 기록합니다. console.log(decoded); // 안녕하세요 // decodeURIComponent()를 사용하여 디코딩된 문자열을 디코딩합니다. var str = decodeURIComponent(decoded); // 원본 문자열을 기록합니다. console.log(str); // 안녕하세요 😊 |