escape(), encodeURI(), encodeURIComponent() 차이
비슷하면서도 다른 함수들 입니다.
세가지 함수 모두 ASCII문자로 바꿔주는데, 그럼 각각의 차이점을 알아 보겠습니다.
1. escape() : unescape()
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 @*-_+./
위에서 열거된 문자가 아니면 모두 변환을 합니다. 1바이트문자는 %XX 형태로 2바이트 문자는 %uXXXX 식으로 변환합니다.
2. encodeURI() : decodeURI()
escape()와 같이 변환을 하지만, 인터넷 주소에서 쓰는 특수 문자 : ; / = ? & 는 변환을 하지 않습니다.
3. encodeURIComponent() : decodeURIComponent()
인터넷 주소에서 쓰는 특수 문자 : ; / = ? & 까지 변환을 합니다. 인터넷 주소를 하나의 변수에 넣을때 쓸 수 있습니다.
★ 덧붙임 : encodeURIComponent() 는 UTF-8 로 인코딩 하는 것과 같음
예제)
1
<
script
type
=
"text/javascript"
>
2
var url = "http://yesyo.com/?retrun=고고";
3
document.write('<
p
><
b
>URL :</
b
> ' + url + '</
p
>');
4
document.write('<
p
><
b
>escape() :</
b
> ' + escape(url) + '</
p
>');
5
document.write('<
p
><
b
>encodeURI() :</
b
> ' + encodeURI(url) + '</
p
>');
6
document.write('<
p
><
b
>encodeURIComponent() :</
b
> ' + encodeURIComponent(url) + '</
p
>');
7
</
script
>
결과 :
URL : http://yesyo.com/?retrun=고고
escape() : http%3A//yesyo.com/%3Fretrun%3D%uACE0%uACE0
encodeURI() : http://yesyo.com/?retrun=%EA%B3%A0%EA%B3%A0
encodeURIComponent() : http%3A%2F%2Fyesyo.com%2F%3Fretrun%3D%EA%B3%A0%EA%B3%A0
추가 사항 1.
URL을 통째로 인코딩할 때는 encodeURI(),
URL의 파라메터만 인코딩할 때는 encodeURIComponent()를 쓰면 된다.
escape()/unescape()는 잊어버려라.
추가 사항 2.
자바의 java.net.URLEncoder는 어떨까?
결론은 이녀석은 자바스크립트의 encodeURI()와 동일하다.
주의할 점은 java.net.URLEncoder의 두개의 함수 중의 파라메터가 두개인 녀석(캐릭터 인코딩을 지정해주는)을, 두번째 파라메터를 "UTF-8"로 지정해서 사용해야 한다.
추가 사항 3.
적용 예) CharSet="UTF-8" 인 JSP에서 AJAX(XMLHttpRequest)로 한글 파라미터 전송시,
JSP : ¶m=encodeURI(encodeURIComponent("한글")); 와 같이 한글 파라미터 처리.
JAVA : URLDecoder.decode(request.getParameter("param"), "UTF-8"); 와 같이 디코딩 처리.
참고 :
http://d.hatena.ne.jp/kskyuny/20090304/1236145944http://blog.naver.com/akrsg/140118242329
그리고 내 경험!
고생하시는 개발자 분들 도움 되시길~
'프로그래밍 > JavaScript' 카테고리의 다른 글
javascript 롤링(배너등) (0) | 2013.08.19 |
---|---|
자바스크립트 새로고침 종류 (0) | 2013.08.01 |
자바스크립트에서 주민등록번호를 이용하여 만 나이구하고 비교하기 (0) | 2013.08.01 |
jQuery 몇일째 공부인지는 모르겠지만.. 이제 부터 최대한 블로그에 기록을 남겨주마 _noConflict() (0) | 2013.03.26 |
스크립트에서 getElementById를 이용해 id값 가져오기 (0) | 2012.08.13 |