자바스크립트 URL 디코딩 함수 비교

자바스크립트 URL 디코딩 함수

자바스크립트에서 URL 디코딩 함수는 decodeURI()와 decodeURIComponent() 함수 두 개가 있습니다. 이 두 함수의 사용 목적 및 차이점에 대해 비교해 보겠습니다.

같이 보기

자바스크립트에서 URL 디코딩 함수인 decodeURI()와 decodeURIComponent() 함수 두 개를 표로 비교해 보겠습니다.

자바스크립트에서 URL 디코딩 함수인 decodeURIComponent()함수와 encodeURIComponent() 함수 두 개를 표로 비교
특징	`decodeURI()`	`decodeURIComponent()`
사용 목적	`encodeURI()`로 인코딩한 URL을 디코딩	`encodeURIComponent()`로 인코딩한 URI Component를 디코딩
사용 대상	전체 URI를 디코딩하는 데 사용	쿼리 문자열 내 각 값들을 디코딩하는 데 사용
예약 문자 및 특수 문자 처리	일부 예약 문자 및 특수 문자 유지(`#`문자 등)	모든 예약 문자 및 특수 문자 디코딩
주요 사용 사례	외부 링크 처리 및 브라우저 환경에서 사용	쿼리 문자열 디코딩, 사용자 입력 처리 등

decodeURI() 함수와 decodeURIComponent() 함수 두 개의 차이점을 코드 예시로 보겠습니다.

JavaScript

// 주어진 문자열들을 변수에 할당합니다.
const set1 = ";,/?:@&=+$"; // 주목해 주세요! 인코딩 방식에 따라 결과가 다릅니다.
const set2 = "-_.!~*'()";
const set3 = "#"; // 주목해 주세요! 인코딩 방식에 따라 결과가 다릅니다.
const set4 = "ABC abc 123";

// 주어진 문자열들을 encodeURI() 함수와 encodeURIComponent() 함수를 사용하여 인코딩합니다.
const encodedSet1 = encodeURI(set1);
const encodedSet2 = encodeURI(set2);
const encodedSet3 = encodeURI(set3);
const encodedSet4 = encodeURI(set4);

const encodedURIComponentSet1 = encodeURIComponent(set1);
const encodedURIComponentSet2 = encodeURIComponent(set2);
const encodedURIComponentSet3 = encodeURIComponent(set3);
const encodedURIComponentSet4 = encodeURIComponent(set4);

// 결과를 출력합니다.
console.log("encodeURI() 함수로 인코딩:");
console.log(encodedSet1); // %3B,/?:@&=+$
console.log(encodedSet2); // -_.!~*'()
console.log(encodedSet3); // #

console.log("encodeURIComponent() 함수로 인코딩:");
console.log(encodedURIComponentSet1); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodedURIComponentSet2); // -_.!~*'()
console.log(encodedURIComponentSet3); // %23

console.log("encodeURI() 함수로 인코딩한 것을 decodeURI() 함수로 디코딩:");
console.log(decodeURI(encodedSet1)); // ;,/?:@&=+$
console.log(decodeURI(encodedSet2)); // -_.!~*'()
console.log(decodeURI(encodedSet3)); // #

console.log("encodeURIComponent() 함수로 인코딩한 것을 decodeURI() 함수로 디코딩:");
console.log(decodeURI(encodedURIComponentSet1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(decodeURI(encodedURIComponentSet2)); // -_.!~*'()
console.log(decodeURI(encodedURIComponentSet3)); // %23

console.log("encodeURIComponent() 함수로 인코딩한 것을 decodeURIComponent 함수로 디코딩:");
console.log(decodeURIComponent(encodedURIComponentSet1)); // ;,/?:@&=+$
console.log(decodeURIComponent(encodedURIComponentSet2)); // -_.!~*'()
console.log(decodeURIComponent(encodedURIComponentSet3)); // #

위의 결과에서 볼 수 있듯이

decodeURI() 함수는 encodeURIComponent() 함수로 인코딩되어 있는 것을 디코딩할 때 몇몇을 디코딩하지 않습니다.
반면에, decodeURIComponent() 함수는 encodeURIComponent() 함수로 인코딩되어 있는 것을 디코딩할 때 안전하게 해석해서 디코딩해 줍니다.

이는 각 함수의 사용 목적과 관련이 있습니다. decodeURI() 함수는 전체 URI를 디코딩하는 데 사용되는데, 이 때 예약 문자 중에서도 일부 문자를 디코딩하지 않는 것은 URI의 구조를 유지하기 위한 것입니다. 반면에 decodeURIComponent() 함수는 URI 컴포넌트를 디코딩하는 데 사용되는데, 여기서는 모든 예약 문자와 예외 문자까지도 디코딩하여 정확한 문자열을 얻기 위해 사용됩니다.

명세서

자바스크립트 URL 디코딩 함수 명세서 사양
명세서 사양
`decodeURI()`	ECMAScript Language Specification #sec-decodeuri-encodeduri
`decodeURIComponent()`	ECMAScript Language Specification #sec-decodeuricomponent-encodeduricomponent