개념 및 사용 방법

encodeURIComponent() 함수는
URL의 특정 부분(예: 검색어, 파일명, 파라미터 값 등)에 사용할 문자들을 안전하게 인코딩하기 위해 사용합니다.

이 함수는 전체 URL이 아닌 쿼리 문자열의 값이나 키, path segment 등의 URI Component 데이터를 안전하게 인코딩할 때 유용합니다.

특징

  • encodeURIComponent() 함수는 URL에서 프로토콜, 도메인, 경로 구분자(/, :, ?, &, #) 등 특수한 의미를 갖는 문자들도 인코딩합니다.
  • 대부분의 특수문자들을 인코딩하기 때문에, URI Component(예: 쿼리 파라미터 값 등)를 인코딩해야 할 경우에 유용합니다.
  • 이 함수는 /, :, ?, &, = 등 대부분 특수 문자를 인코딩하기 때문에 실제로 URL 구조가 보존되어야 할 경우, 즉 URL 전체를 인코딩할 때는 적합하지 않습니다. 이 문자들은 URL에서 각각의 구조(프로토콜, 경로, 쿼리, 파라미터 구분 등) 를 정의하는 핵심적인 구분자입니다. 단순 문자가 아니라 URL 문법 요소입니다. 이걸 전부 인코딩해버리면, 브라우저는 그 문자열을 더 이상 유효한 URL로 해석하지 못합니다. (단, "단순 문자열 데이터로 보관"하거나, "전송용 데이터로만 활용" 한다면 전혀 문제 없습니다. 오히려 이런 용도로는 안전하게 인코딩하는 방식이 됩니다.)

알아두세요!
URI Component가 아닌 전체 URL을 인코딩할 때에는 encodeURI() 함수가 더 적합합니다.

기본 예제

JavaScript 
const uriComponent = "https://www.example.com/search?q=JavaScript & Web Development";
const encodedUriComponent = encodeURIComponent(uriComponent);

console.log(encodedUriComponent);
// 출력: "https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3DJavaScript%20%26%20Web%20Development"

URI component 설명

URI(Uniform Resource Identifier)를 구성하는 요소를 의미합니다. URI는 일반적으로 다음과 같은 크게 네 가지 요소로 구성됩니다.

  1. Scheme: 프로토콜을 나타냅니다. 예를 들어, HTTP, HTTPS, FTP 등이 있습니다.
  2. Authority: 호스트 이름, 도메인 이름, 포트 번호 등을 나타냅니다.
  3. Path: 리소스의 위치를 나타냅니다.
  4. Query: 쿼리 문자열을 나타냅니다.

예를 들어, 다음 URL은 다음과 같은 네 가지 요소로 구성됩니다.

URI component 예제
  1. Scheme: https
  2. Authority: www.example.com
  3. Path: /path
  4. Query: query=value

URI component는 URI를 식별하고, URI를 통해 리소스에 접근할 수 있도록 하는 데 사용됩니다.

encodeURIComponent() 함수는 URI component 중에서 데이터를 나타내는 부분을 인코딩합니다.
이 구성 요소에는 쿼리 문자열의 값, 경로의 일부, 해시(프래그먼트) 등이 포함될 수 있습니다. 이 함수는 URI 구성 요소 내에 존재하는 특수 문자들을 인코딩하여 안전한 형태로 만들어줍니다. 예를 들어, &, =, ? 등의 문자를 인코딩하여 URI가 제대로 해석되도록 도와줍니다. 이 함수는 주로 URI의 데이터를 안전하게 전송하기 위해 사용됩니다.

encodeURIComponent() 함수의 형식은 다음과 같습니다.

구문

JavaScript 
encodeURIComponent(uriComponent)

매개변수

encodeURIComponent() 함수의 매개변수
uriComponent URI 구성 요소를 나타내는 문자열입니다.

반환 값

제공된 문자열을 나타내는 새 문자열은 uriComponent URI 구성 요소로 인코딩됩니다.

encodeURIComponent() 함수에서 인코딩되지 않는 문자

  • 알파벳 문자 (A-Z, a-z)
  • 숫자 (0-9)
  • -
  • _
  • .
  • !
  • ~
  • *
  • '
  • (
  • )

이 목록에 나열되지 않은 다른 문자들(띄어쓰기 포함)은 모두 % 다음에 해당 문자의 유니코드 값을 16진수로 표현한 형식으로 인코딩됩니다.

encodeURIComponent() 함수는 encodeURI() 함수와 비교할 때 더 많은 특수문자를 인코딩합니다. (정확한 표현은 아니지만) 그래서 일반적으로 encodeURIComponent() 함수는 특수문자를 포함한 URL 인코딩한다라고 말합니다.

자바스크립트 일부 특수문자 제외한 URL 인코딩 – encodeURI()

예제

JavaScript 
const searchQuery = "JavaScript & Web Development";
const page = 1;

const encodedQuery = encodeURIComponent(searchQuery);
const encodedPage = encodeURIComponent(page);

const baseUrl = "https://example.com/search";
const finalUrl = `${baseUrl}?q=${encodedQuery}&page=${encodedPage}`;

console.log(finalUrl);
// 출력: "https://example.com/search?q=JavaScript%20%26%20Web%20Development&page=1"

이 예제에서는 검색어 searchQuery와 페이지 번호 page를 URI 구성 요소로 간주하고 encodeURIComponent() 함수로 각각의 값을 인코딩합니다. 그런 다음, 이 값을 기반으로 안전한 URI를 생성하여 출력합니다. 이 때 & 기호와 = 기호가 URI의 쿼리 문자열에서 특별한 의미를 가지므로 encodeURIComponent() 함수로 인코딩되어 안전하게 사용됩니다.

명세서

encodeURIComponent() 함수의 명세서 사양
명세서 사양
encodeURIComponent() ECMAScript Language Specification
#sec-encodeuricomponent-uricomponent

브라우저 호환성

encodeURIComponent() 함수의 브라우저 호환성
함수
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
encodeURIComponent() 1 12 1 1.1

참고문헌

같이 보기