자바스크립트 encodeURIComponent

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

 

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

 

특징

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

예제

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"

 

구문

encodeURIComponent(uriComponent)

 

반환 값

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

 

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

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

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

 

활용 예제

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"

 

참고문헌

JavaScriptのencodeURIComponent()関数：URIコンポーネントのエンコード

JavaScriptのencodeURIComponent()関数：URIコンポーネントのエンコード - codingEverybody

 

 

JavaScript encodeURIComponent() Function – Encoding URL Components

JavaScript encodeURIComponent() Function – Encoding URL Components - codingCourses

 

자바스크립트 encodeURIComponent() 함수 – URL의 구성 요소를 인코딩할 때

자바스크립트 encodeURIComponent() 함수 – URL의 구성 요소를 인코딩할 때 - 코딩에브리바디