자바스크립트에서 URL을 다루다 보면 인코딩(부호화)과 디코딩(복호화) 과정이 필요합니다. 이때 사용되는 대표적인 함수가 바로 decodeURI()와 decodeURIComponent()입니다. 두 함수는 이름이 비슷하지만 동작 범위와 용도가 분명히 다르므로, 상황에 맞게 선택해야 합니다.
decodeURI()란?
decodeURI() 메서드는 encodeURI()로 인코딩된 전체 URI(URL)를 원래 형태로 되돌리는 함수입니다. URL 구조에서 특수한 의미를 가지는 예약 문자(; / ? : @ & = + $ , # 등)는 그대로 두고 나머지 부분만 디코딩하기 때문에, 완성된 URL 전체를 다룰 때 적합합니다.
예제
아래 코드를 실행하면 전체 URL을 인코딩한 후 다시 디코딩하는 과정을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">확인</button>
<p id="demo"></p>
<script>
function display() {
var uri = "welcome msg.jsp?name=amit&sub=programming";
// 먼저 인코딩
var encode = encodeURI(uri);
var decode = decodeURI(encode);
var result = "Encode= " + encode + "<br>" + "Decode= " + decode;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
decodeURIComponent()란?
decodeURIComponent() 메서드는 encodeURIComponent()로 인코딩된 URL의 개별 구성 요소를 디코딩하는 함수입니다. 예약 문자까지 포함한 모든 특수 문자를 복원하기 때문에, 쿼리 문자열의 파라미터 값처럼 URL의 일부분만 처리할 때 적합합니다.
예제
아래 코드를 실행하면 URL 구성 요소를 인코딩한 후 다시 디코딩하는 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">확인</button>
<p id="demo"></p>
<script>
function display() {
var uri = "https://example.com/welcome msg.jsp?name=amit&sub=programming";
// 먼저 인코딩
var encode = encodeURIComponent(uri);
var decode = decodeURIComponent(encode);
var result = "Encode= " + encode + "<br>" + "Decode= " + decode;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
두 함수의 핵심 차이점 비교
| 구분 | decodeURI() | decodeURIComponent() |
|---|---|---|
| 대상 | 전체 URI | URL의 개별 구성 요소 |
| 페어링 함수 | encodeURI() | encodeURIComponent() |
| 예약 문자 처리 | ? & = 등 예약 문자는 유지됨 | 예약 문자까지 모두 디코딩 |
| 적합한 용도 | 완성된 URL 전체를 다룰 때 | 쿼리 파라미터 등 URL 조각을 다룰 때 |
정리하면, 전체 URL을 인코딩·디코딩할 때는 encodeURI() / decodeURI()를 사용하고, 쿼리 스트링 값처럼 URL의 일부 구성 요소를 안전하게 처리할 때는 encodeURIComponent() / decodeURIComponent()를 사용하는 것이 올바른 방법입니다.