[JS] javascript : encodeURI/encodeURIComponent함수를 이용하여 인코딩을 해보자

 

 

encodeURI와 encodeURIComponent 비교

 

 

공통점

1) 전역 함수로 어디서든지 호출가능함

2) URI 문자열을 파라메터로 받아 인코딩 된 문자열을 리턴함

 

차이점

encodeURI :  :, ;, /, =, ?, & 등을 제외하고 인코딩 처리함

encodeURIComponent : 모든 문자를 인코딩 처리함

 

encodeURIComponent는 모든 문자를 인코딩 처리함으로써 encodeURI보다 더 많은 문자를 인코딩한다. - MDN

 

 

샘플코드

var uri = 'https://bongra.tistory.com/category/서버/Tomcat';

encodeURI('https://bongra.tistory.com/category/서버/Tomcat');
--결과 : 'https://bongra.tistory.com/category/%EC%84%9C%EB%B2%84/Tomcat'

encodeURIComponent('https://bongra.tistory.com/category/서버/Tomcat');
--결과 : 'https%3A%2F%2Fbongra.tistory.com%2Fcategory%2F%EC%84%9C%EB%B2%84%2FTomcat'

 

 

샘플로 내 블로그에 서버 카테고리로 이동하는 문자열을 uri 변수에 담아 각각

encodeURI와 encodeURIComponent함수에 넣어보았다.

 

encodeURI는 '서버' 라는 문자열만 인코딩한 값을 리턴해주었고,

encodeURIComponent는 '서버'라는 문자열과 : , / 같은 특수문자도 인코딩하여 리턴해주는 것을 확인 할 수 있다.

 

그렇게 되면 encodeURI로 인코딩한 URI로는 요청이 정상적으로 되지만 encodeURIComponent으로 인코딩한 URI는

제대로 요청이 안된다..

 

 

내가 생각하는 상황에 맞는 encodeURI와 encodeURIComponent 사용처

 

내가 생각하는 어떨 때 encodeURI를 사용하고, encodeURIComponent를 사용하는지는..

 

 

URI를 통째로 인코딩할 때는 encodeURI를 

params와 같은 일부속성만 인코딩할 때는encodeURIComponent를 사용하면 되지 않을까? 싶기도 하다.

왜냐하면 속성값에 :, / , ? 같은 특수문자가 포함되어 있을 수도 있기 때문이다.

 

 

 

encodeURIComponent() MDN 이동

 

encodeURI() MDN 이동