decodeURIComponent() 함수

decodeURIComponent() 함수는
encodeURIComponent() 함수를 사용하여 인코딩한 URI Component를 디코딩할 때 사용하는 함수입니다.

  • encodeURIComponent() 함수는 URI의 일부로 사용될 수 있는 문자를 안전하게 인코딩하여 URI로 사용할 수 있게 만듭니다.
  • 반면에, decodeURIComponent() 함수는 encodeURIComponent() 함수로 인코딩된 문자열을 받아 이스케이프 처리를 해제하여 원래 문자열로 반환합니다.
자바스크립트 URL 인코딩 – encodeURIComponent() 함수
JavaScript 
const originalURL = "https://www.example.com/search?q=JavaScript & Web Development";
const encodedURL = encodeURIComponent(originalURL);

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

const decodedURL = decodeURIComponent(encodedURL);

console.log(decodedURL);
// 출력: "https://www.example.com/search?q=JavaScript & Web Development"

decodeURIComponent() 함수의 구문

JavaScript 
decodeURIComponent(encodedURI)

매개변수

decodeURIComponent() 함수의 매개변수 설명
encodedURI 디코딩할 URI 컴포넌트의 인코딩된 문자열입니다.
이 함수는 주어진 인코딩된 URI Component를 해석하여 원래의 문자열로 디코딩합니다.

반환 값

주어진 인코딩된 URI 컴포넌트를 해석하여 원래의 문자열로 디코딩하고, 이를 반환합니다. 따라서 decodeURIComponent() 함수의 반환 값은 디코딩된 원래의 문자열입니다.

예제

JavaScript 
const originalURL = "https://www.example.com/page?query=hello world";
const encodedURL = encodeURIComponent(originalURL);

console.log(encodedURL);
// 출력: "https%3A%2F%2Fwww.example.com%2Fpage%3Fquery%3Dhello%20world"

const decodedURL = decodeURIComponent(encodedURL);

console.log(decodedURL);
// 출력: "https://www.example.com/page?query=hello world"

이 예제에서는 간단한 URL을 사용하여 인코딩과 디코딩이 어떻게 작동하는지 시각적으로 확인할 수 있습니다.

주의해야 할 점

decodeURIComponent() 함수는 올바른 형식의 인코딩된 문자열을 받아서 디코딩해야 합니다. 잘못된 형식의 문자열이나 규칙을 따르지 않는 문자열을 디코딩하면 예상치 못한 동작이 발생할 수 있습니다. 이러할 경우 예외 처리를 해야 합니다.

JavaScript 
function decodeURL(encodedURL) {
    try {
        return decodeURIComponent(encodedURL);
    } catch (error) {
        console.error(error);
        return null;
    }
}

const encodedURL = "";

const decodedURL = decodeURL(encodedURL);

if (decodedURL) {
    console.log(decodedURL);
} else {
    console.log("Invalid URL.");
}

 // 출력: "Invalid URL."

이 예제에서, 인코딩된 URL은 공백 문자열입니다. 따라서, decodeURIComponent() 함수에서 오류가 발생합니다.

이 예제와 같이, 인코딩된 URL이 잘못된 형식의 URL이거나 규칙을 따르지 않는 URL인 경우, decodeURIComponent() 함수에서 오류가 발생할 수 있습니다. 이 경우, 예외 처리를 사용하여 오류를 처리해야 합니다.

decodeURIComponent() 함수의 명세서

decodeURIComponent() 함수의 명세서 사양
명세서 사양
decodeURIComponent() ECMAScript Language Specification
#sec-decodeuricomponent-encodeduricomponent

decodeURIComponent() 함수의 브라우저 호환성

decodeURIComponent() 함수의 브라우저 호환성
함수
Chrome
Chrome
Edge
Edge
Firefox
Firefox
Safari
Safari
decodeURIComponent() 1 12 1 1.1

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

참고문헌

같이 보기