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를 사용하면 되지 않을까? 싶기도 하다.
왜냐하면 속성값에 :, / , ? 같은 특수문자가 포함되어 있을 수도 있기 때문이다.
'FrontEnd > JavaScript' 카테고리의 다른 글
[JS] javascript : 이벤트리스너(EventListener) 한번만 수행하도록 옵션을 주는 방법 (0) | 2022.12.14 |
---|---|
[JS] javascript : delete연산자를 통한 객체(Object)의 속성을 삭제하는 방법 (0) | 2022.12.14 |
[JS] Axios를 통한 비동기 통신방법 정리 :: GET방식, POST방식 및 Axios문법 (0) | 2022.09.03 |
[JS] Javascript에서 주석을 다는 3가지 방법 :: 한줄 주석, 여러줄 주석 (0) | 2022.08.25 |
[JS] Axios GET요청으로 데이터를 보낼 때 415 (Unsupported Media Type) 에러 뜨는 문제 해결방법 (0) | 2022.08.09 |