encodeURIComponent() 함수

encodeURIComponent() 함수는
URI Component를 인코딩합니다.

encodeURIComponent() 함수는 일반적으로 안전하게 URI Component를 인코딩하기 위해 사용합니다.

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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기