[JavaScript] encodeURI / decodeURI란?

encodeURI / decodeURI에 대해 알아보자

 

[ encodeURI ]

 

encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다.

 

URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말한다. URI의 하위 개념으로 URL, URN이 있다.

 

URI / URL / URN 이란 무엇인가

 

/** 
* 완전한 URI를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다.
* @param {string} uri - 완전한 URI
* @returns {string} 인코딩된 URI 
*/
encodeURI(uri)

 

인코딩이란 URI의 문자들을 이스케이프 처리하는 것을 의미한다. 

 

 

※ 이스케이프 처리란? 

네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있는 아스키 문자 셋으로 변환하는 것을 말한다.

 

URI 문법 형식 표준 RFC3986에 따르면 URL은 아스키 문자 셋으로만 구성되어야 하며 한글을 포함한 대부분의 외국어나 아스키 문자 셋에 정의되지 않은 특수 문자의 경우 URL에 포함될 수 없다고 한다. 

 

즉, URL 내에서 의미를 갖고 있는 문자(%,?, #)나 URL에 올 수 없는 문자(한글, 공백 등) 또는 시스템에 의해 해석될 수 있는 문자 (<,>)를 이스케이프 처리하여 야기될 수 있는 문제를 예방하기 위해 이스케이프 처리가 필요하다. 

 

<script>

// 완전한 URI
const uri = 'http://example.com?name=홍길동&gender=man';

// encodeURI 함수는 완전한 URI를 전달받아 이스케이프 처리를 위해 인코딩한다.
const enc = encodeURI(uri);
console.log(enc);
// http://example.com?name=%ED%99%8D%EA%B8%B8%EB%8F%99&gender=man
  
</script>

 

---

 

[ decodeURI ]

decodeURI 함수는 인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩한다. 

 

/**
* 인코딩된 URI를 전달받아 이스케이프 처리 이전으로 디코딩한다.
* @param {string} encodeURI - 인코딩도니 URI
* @returns {string} 디코딩된 URI
*/
decodeURI(encodeURI)

 

<script>

    // 완전한 URI
const uri = 'http://example.com?name=홍길동&gender=man';

// encodeURI 함수는 완전한 URI를 전달받아 이스케이프 처리를 위해 인코딩한다.
const enc = encodeURI(uri);
console.log(enc);
// http://example.com?name=%ED%99%8D%EA%B8%B8%EB%8F%99&gender=man
  
  // decodeURI 함수는 인코딩된 완전한 URI를 전달받아 이스케이프 처리 이전으로 디코딩한다.
 const dec =decodeURI(enc);
 console.log(dec)
 // http://example.com?name=홍길동&gender=man
 
</script>

 

---

 

[ encodeURIComponent / decodeURIComponent ]

 

encodeURIComponent 함수는 URI 구성 요소를 인수로 전달받아 인코딩한다. 

decodeURIComponent 함수는 매개변수로 전달된 URI 구성 요소를 디코딩한다.

 

/** 
* // URI의 구성요소를 전달받아 이스케이프 처리를 위해 인코딩한다.
* @param {string} uriComponent 
* @returns {string} 
*/
encodeURIComponent(uriComponent)

/**
* 인코딩된 URI의 구성요소를 전달받아 이스케이프 처리 이전으로 디코딩한다.
* @param {string} encodedURIComponent
* @returns {string} 
*/
decodeURIComponent(encodedURIComponent)

 

encodeURIComponent  함수는 인수로 전달된 문자열을 URI의 구성요소인 쿼리 스트링의 일부로 간주한다.

따라서 쿼리 스트링 구분자로 사용되는 =,?, &까지 인코딩한다.

 

반면 encodeURI 함수는 매개변수로 전달된 문자열을 완전한 URI 전체라고 간주한다. 따라서 쿼리 스트링 구분자로 사용되는 =,?, &은 인코딩하지 않는다.

 

 <script>
 
    // URI의 쿼리 스트링
    const uriComp = 'name=홍길동&address=seoul';

    // encodeURIComponent 함수는 인수로 전달받은 문자열을 URI의 구성요소인 쿼리 스트링의 일부로 간주한다.
    // 따라서 쿼리 스트링 구분자로 사용되는 =, ?, &까지 인코딩한다.
    let enc = encodeURIComponent(uriComp);
    console.log(enc);
    // name%3D%ED%99%8D%EA%B8%B8%EB%8F%99%26address%3Dseoul

    let dec = decodeURIComponent(enc);
    console.log(dec);
    // name=홍길동&address=seoul

    // encodeURI 함수는 인수로 전달받은 문자열을 완전한 URI로 간주한다.
    // 따라서 쿼리 스트링 구분자로 사용되는 =, ?, &를 인코딩하지 않는다.
    enc = encodeURI(uriComp);
    console.log(enc);
    //name=%ED%99%8D%EA%B8%B8%EB%8F%99&address=seoul

    dec = decodeURI(enc);
    console.log(dec);
    // name=홍길동&address=seoul
    
  </script>