Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript encodeURIComponent() 함수 완벽 정리 - URI 문자열 인코딩 방법

JavaScript의 encodeURIComponent() 함수는 URI(Uniform Resource Identifier)를 나타내는 문자열을 인자로 받아, 해당 문자열 내의 문자들을 이스케이프 시퀀스(escape sequence)로 대체하여 인코딩합니다. 각 문자는 1개에서 최대 4개의 이스케이프 시퀀스로 변환될 수 있으며, URL 전송 시 문제가 될 수 있는 특수 문자나 한글 같은 멀티바이트 문자를 안전하게 처리할 때 유용하게 사용됩니다.

문법(Syntax)

encodeURIComponent() 함수의 기본적인 사용 문법은 다음과 같습니다.

encodeURIComponent('https://www.qries.com/');

예제(Example)

아래 예제는 두 개의 URL 문자열을 encodeURIComponent()로 인코딩한 후 그 결과를 화면에 출력하는 코드입니다.

<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <script type="text/javascript">
        var result1 = encodeURIComponent('https://www.qries.com/');
        document.write(result1);
        document.write("<br>");
        var result2 = encodeURIComponent('https://www.tutorialspoint.com/');
        document.write(encodeURIComponent(result2));
    </script>
</body>
</html>

출력 결과(Output)

위 코드를 실행하면 다음과 같이 인코딩된 문자열이 출력됩니다. 두 번째 결과는 이미 인코딩된 값을 다시 한 번 인코딩한 것으로, '%' 기호 자체가 '%25'로 변환된 것을 확인할 수 있습니다(이중 인코딩).

http%3A%2F%2Fwww.qries.com%2F
http%253A%252F%252Fwww.tutorialspoint.com%252F

인코딩되지 않는 문자

encodeURIComponent() 함수는 아래 문자들을 제외한 모든 문자를 인코딩한다는 점을 기억해두면 좋습니다.

  • 영문 알파벳 대소문자(A~Z, a~z)
  • 숫자(0~9)
  • 특수 문자: - _ . ! ~ * ' ( )

참고: 관련 함수

encodeURIComponent()로 인코딩된 문자열은 decodeURIComponent() 함수를 사용하여 원래 값으로 복원할 수 있습니다. 또한 URI 전체를 인코딩할 때는 쿼리 파라미터 구분에 필요한 ':', '/', '?', '&', '=', '+', '#', '@' 등의 문자를 보존하는 encodeURI() 함수를 사용하는 것이 적합합니다. 반면, 쿼리 스트링의 개별 파라미터 값을 인코딩할 때는 encodeURIComponent()가 더 안전한 선택입니다.