[자바스크립트] Base64 사용방법/예제 (인코딩, 디코딩, 한글, 특수문자)

아래 소스 코드는 문자열을 Base64로 인코딩하고 디코딩하는 과정을 보여주는 예제입니다.

Base64는 8비트 바이너리 데이터를 ASCII 문자셋으로 변환하는 인코딩 방식 중 하나로, 주로 데이터를 텍스트 형식으로 안전하게 전송하거나 저장할 때 사용됩니다.

 

btoa() 함수는 문자열을 Base64로 인코딩하고, atob() 함수는 Base64로 인코딩 된 문자열을 디코딩합니다.

 

추가로 한국어와 특수문자가 포함된 문자열을 인코딩하고, 다시 디코딩하는 예제입니다. 한국어와 같은 비 ASCII 문자를 처리하기 위해 인코딩과 디코딩 과정에 unescape(), encodeURIComponent(), decodeURIComponent(), escape() 함수를 사용합니다. 이렇게 인코딩과 디코딩을 함으로써 원본 문자열과 디코딩된 문자열이 동일함을 확인할 수 있습니다.

 

---

사용한 함수

• unescape()
  • 인코딩된 문자열을 원래의 값으로 되돌리는 JavaScript 함수입니다. 이 함수는 주로 이스케이프(escape) 문자열을 원래의 문자열로 변환하는 데 사용됩니다. 이스케이프 문자열은 특정 문자들을 % 기호와 16진수 값으로 표현한 문자열입니다.
• encodeURIComponent()
  • 주어진 문자열을 URI(Uniform Resource Identifier) 구성 요소로 인코딩하는 JavaScript 함수입니다. URI 구성 요소는 URL에서 사용되는 일부 문자를 이스케이프 하여 안전하게 전송하거나 저장하는 데 사용됩니다.
• decodeURIComponent()
  • encodeURIComponent() 함수로 인코딩된 URI 구성 요소를 원래의 값으로 디코딩하는 JavaScript 함수입니다. 이 함수는 인코딩 된 값을 다시 원래 문자열로 변환합니다.
• escape()
  • 대부분의 문자를 유니코드 이스케이프 시퀀스로 변환하는 JavaScript 함수입니다.

 

<script>
var originalString = "LOVE LOVE LOVE";
var encodedString = btoa(originalString);
console.log("인코딩된 문자열:", encodedString);

var decodedString = atob(encodedString);
console.log("디코딩된 문자열:", decodedString);


var originalString = "안녕하세요.후린개발자 입니다. 좋은하루 되세요.!@#";
var encodedString = btoa(unescape(encodeURIComponent(originalString)));
console.log("인코딩된 문자열:", encodedString);

var decodedString = decodeURIComponent(escape(atob(encodedString)));
console.log("디코딩된 문자열:", decodedString);
</script>

 

소스코드 결과