자바스크립트 URI 인코딩 처리: encodeURI(), encodeURIComponent() 함수

자바스크립트에서 escape(), encodeURI(), encodeURIComponent() 함수는 모두 문자열을 이스케이프 처리하거나 인코딩하는 데 사용됩니다. 하지만 각 함수의 사용 목적과 대상이 다릅니다. 그럼 자바스크립트에서 문자열을 이스케이프(escape)하는 방법과 URI을 인코딩하는 방법에 대해서 알아보겠습니다.

1. 문자 인코딩 / 디코딩 함수

2. 함수 설명

☞ escape() 함수는 URI 컴포넌트의 일부 문자를 인코딩하지 않기 때문에 일부 브라우저에서는 사용이 권장되지 않습니다. 대신, encodeURI() 함수나 encodeURIComponent() 함수를 사용하는 것이 좋습니다. URI 전체를 인코딩할 때는 encodeURI() 함수를 사용하고 URI 내에서 파라미터 값 등을 인코딩할 때는 encodeURIComponent() 함수를 사용하는 것이 좋습니다.

1. escape() 함수

문자열을 이스케이프(escape)하려면 escape() 함수를 사용합니다. 이 함수는 문자열 내의 특정 문자들을 이스케이프 문자로 변환하여 반환합니다.

1. 사용법

const escapedString = escape(originalString);

2. 사용 예시

const str1 = 'BlueSahre 블로그!';
const encode_str1 = escape(str1);
console.log(encode_str1); // 출력 결과: BlueSahre%20%uBE14%uB85C%uADF8%21
console.log(unescape(encode_str1)); // 출력 결과: BlueSahre 블로그!

▼ URI 인코딩은 URI 내의 문자열을 안전하게 전송하기 위해 특정 문자들을 이스케이프 처리합니다.

2. encodeURI() 함수

encodeURI() 함수는 URI 전체를 인코딩합니다. 즉, URI 내의 모든 문자를 인코딩합니다. 그러나 일부 문자(알파벳 대소문자, 숫자, -, _, ., ~ 등)는 인코딩하지 않습니다.

1. 사용법

const encodedURI = encodeURI(uri);

2. 사용 예시

const uri = 'http://tistory.blueshare.com/script/메인 page.html';
const encode_uri = encodeURI(uri);
console.log(encode_uri); // 출력 결과: http://tistory.blueshare.com/script/%EB%A9%94%EC%9D%B8%20page.html
console.log(decodeURI(encode_uri)); // 출력 결과: http://tistory.blueshare.com/script/메인 page.html

3. encodeURIComponent() 함수

encodeURIComponent() 함수는 URI 내에서 파라미터 값 등을 인코딩합니다. 즉, encodeURI() 함수에서 인코딩하지 않는 일부 문자(!, *, ‘, (, ))까지 인코딩합니다.

1. 사용법

const encodedURIComponent = encodeURIComponent(uriComponent);

2. 사용 예시

const str2 = 'BlueSahre 블로그!';
const encode_str2 = encodeURIComponent(str2);
console.log(encode_str2); // 출력 결과: Hello%2C%20World%21
console.log(decodeURIComponent(encode_str2)); // 출력 결과:BlueSahre 블로그!

☞ 따라서 URI 전체를 인코딩할 때는 encodeURI() 함수를, URI 내에서 파라미터 값 등을 인코딩할 때는 encodeURIComponent() 함수를 사용하는 것이 좋습니다.

▼ 사용 예제 실행 화면

자바스크립트 기초 이전 게시물

1. 자바스크립트 HTML 추가 및 작성 위치 (async, defer)
2. 자바스크립트 변수와 상수: var, let, const 차이점과 사용법
3. 자바스크립트 자료형 종류 및 사용 예시
4. 자바스크립트 연산자 종류: 산술, 대입, 비교, 논리, 삼항 및 예시
5. 자바스크립트 형 변환(int, string 등) 방법 및 사용 예제
6. 자바스크립트 조건문: if, switch, 삼항 연산자 사용법과 예제 코드
7. 자바스크립트 반복문: for, while, do-while등 사용법과 예제
8. 자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
9. 자바스크립트 이스케이프 문자와 템플릿 문자열 사용법과 예제

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!