MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

encodeURIComponent()

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

개요

The encodeURIComponent() method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

문법

encodeURIComponent(str);

파라미터

str
URI를 담은 문자열

상세

encodeURIComponent 다음을 제외하고는 모든 문자를 이스케이프 처리한다.  :  알파벳, 0~9의 숫자, - _ . ! ~ * ' ( )

 URIError는 high-row 짝의 대행문자가 아니면 예외를 던진다. 예를 들자면 아래와 같다,

// high-low 짝의 경우 정상
alert(encodeURIComponent('\uD800\uDFFF'));

// high 대행문자로만 구성된 경우, 예외 발생 "URIError: malformed URI sequence"
alert(encodeURIComponent('\uD800'));

// low 대행문자로만 구성된 경우, 예외 발생 "URIError: malformed URI sequence"
alert(encodeURIComponent('\uDFFF')); 

의도치 않은 요청을 서버쪽으로 보내는 경우를 방지하기 위해서는, encodeURIComponent를 사용자가 입력해 전달하는 모든 파라미터들에 적용시키는 것이 바람직하다. 예를 들자면, 사용자가 "Thyme &time=again" 이라고 comment라는 변수에 담았을 경우를 들 수 있다.  encodeURIComponent를 사용하지 않은 경우에 이 파라미터는 comment=Thyme%20&time=again 이라는 값을 전달하게 된다.  여기서 주목할 점은 앰퍼샌드(&)와 이퀄(=)이 본디 키와 값을 의미한다는 것이다.  이럴 경우 comment라는 키에 "Thyme &time=again" 이라는 값을 담는 대신 두 개의 키를 POST하게 된다. comment 는 "Thyme"을, time은 "again"이라는 값을 갖게 된다.

application/x-www-form-urlencoded (POST)에서는, 공란은 '+'로 대치되며, encodeURIComponent를 사용했을 경우에 "%20" 이 "+"로 추가적으로 대치되게 된다.

RFC 3986 (다음과 같은 예약어 포함 !, ', (, ), *) 권고에 보다 엄격하게 적용되게 하기 위해서는 메소드에서 지원하지 않는 다른 문자에 대해서도 아래와 같이 처리하는 것이 안전한 사용이 되겠다.

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

예제

아래 예제는 UTF-8 Content-Disposition과 Link 서버 응답 헤더 파라미터에 필요한 인코딩 필요 상황을 볼수있다.(예 : UTF-8로 작성된 파일명)

var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName);

console.log(header); 
// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"


function encodeRFC5987ValueChars (str) {
    return encodeURIComponent(str).
        // Note that although RFC3986 reserves "!", RFC5987 does not,
        // so we do not need to escape it
        replace(/['()]/g, escape). // %27 %28 %29
        replace(/\*/g, '%2A').
            // The following are not required for percent-encoding per RFC5987, 
            //  so we can allow for a little better readability over the wire: |`^
            replace(/%(?:7C|60|5E)/g, unescape);
}

사양

사양 상태 비고
ECMAScript 3rd Edition. 표준 최초작성본
ECMAScript 5.1 (ECMA-262)
The definition of 'encodeURIComponent' in that specification.
Standard  
ECMAScript 6 (ECMA-262)
The definition of 'encodeURIComponent' in that specification.
Draft  

브라우저 호환성

제품 Chrome Firefox (Gecko) Internet Explorer Opera Safari
기본지원 (Yes) (Yes) (Yes) (Yes) (Yes)
제품 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
기본지원 (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

참조

문서 태그 및 공헌자

 이 페이지의 공헌자: SphinxKnight, under_09
 최종 변경: SphinxKnight,