자바스크립트의 다양한 인코딩 방법 소개

1.Base64 인코딩:

Base64는 이진 데이터를 ASCII 문자로 변환하는 인코딩 방식 중 하나입니다. 이 방법은 이진 데이터를 텍스트 데이터로 변환하여 전송하고, 이진 데이터로 디코딩할 때 사용됩니다. 주로 이미지나 바이너리 데이터를 문자열로 변환할 때 사용됩니다.

// 문자열을 Base64로 인코딩
const data = "Hello, world!";
const encodedData = btoa(data);
console.log(encodedData); // "SGVsbG8sIHdvcmxkIQ=="

// Base64를 디코딩
const decodedData = atob(encodedData);
console.log(decodedData); // "Hello, world!"

2. URI 인코딩:

URI(Uniform Resource Identifier)는 인터넷 상의 자원을 가리키는 고유한 식별자입니다. URI 인코딩은 URI에 포함될 수 없는 특수 문자를 이스케이프하기 위해 사용됩니다. 주소 표시줄에서 주소를 인코딩할 때 사용되며, encodeURIComponent() 함수를 사용하여 인코딩하고 decodeURIComponent() 함수를 사용하여 디코딩합니다.

// URI 인코딩
const uri = "hello world?";
const encodedURI = encodeURIComponent(uri);
console.log(encodedURI); // "hello%20world%3F"

// URI 디코딩
const decodedURI = decodeURIComponent(encodedURI);
console.log(decodedURI); // "hello world?"

3. HTML 엔티티 인코딩:

HTML 엔티티 인코딩은 HTML 문서에서 특수 문자를 표현하기 위해 사용됩니다. HTML 문서에서 특수 문자를 표시할 때 이스케이프하여 표현합니다. 이러한 인코딩은 주로 사용자 입력 데이터를 HTML 문서에 표시할 때 필요합니다.

// HTML 엔티티 인코딩
const htmlString = "<p>Hello & welcome!</p>";
const encodedHTML = htmlString.replace(/[<>&]/g, function(i) {
  return '&#'+i.charCodeAt(0)+';';
});
console.log(encodedHTML); // "&lt;p&gt;Hello &amp; welcome!&lt;/p&gt;"

// HTML 엔티티 디코딩
const decodedHTML = encodedHTML.replace(/&lt;|&gt;|&amp;/g, function(matched) {
  switch(matched) {
    case "&lt;":
      return "<";
    case "&gt;":
      return ">";
    case "&amp;":
      return "&";
  }
});
console.log(decodedHTML); // "<p>Hello & welcome!</p>"

4. Escape 인코딩:

Escape 인코딩은 문자열에서 특정 문자를 이스케이프하기 위해 사용됩니다. 주로 특정 문자를 문자열에서 이스케이프하여 전송하거나 저장할 때 사용됩니다. escape() 함수를 사용하여 인코딩하고 unescape() 함수를 사용하여 디코딩합니다.

// Escape 인코딩
const stringToEscape = 'This string has "quotes" and special characters: \n\r\t\b\f\\/';
const escapedString = escape(stringToEscape);
console.log(escapedString); // "This%20string%20has%20%22quotes%22%20and%20special%20characters%3A%20%0A%0D%09%08%0C%5C%2F"

// Escape 디코딩
const unescapedString = unescape(escapedString);
console.log(unescapedString); // "This string has "quotes" and special characters: \n\r\t\b\f\\/"

 

자바스크립트에서는 다양한 인코딩 방법을 사용하여 데이터를 처리하고 안전하게 전송할 수 있습니다. 각 인코딩 방법은 다른 용도와 상황에 적합합니다.

이러한 인코딩 방법은 데이터를 안전하게 전송하고 다른 시스템 간에 호환성을 유지하는 데 도움이 됩니다. 데이터를 처리하고 전송할 때 적절한 인코딩 방법을 선택하여 데이터 무결성과 보안을 유지하는 것이 중요합니다. JavaScript에서는 이러한 다양한 인코딩 방법을 사용하여 데이터를 처리하고 다룰 수 있습니다.