Home IT/WEB encodeURI, encodeURIComponent 차이점

[javascript]encodeURI, encodeURIComponent 차이점

encodeURIencodeURIComponent는 JavaScript에서 URL을 인코딩할 때 사용되는 두 가지 함수입니다. 이 두 함수는 URL의 다른 부분을 인코딩하는 데 사용됩니다.

encodeURI

  • 이 함수는 전체 URL을 인코딩합니다.
  • 문자열 내의 특정 문자(예: :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =)를 제외한 대부분의 문자는 인코딩되지 않습니다.
  • 즉, 예약 문자를 제외한 문자열 내의 대부분의 문자를 인코딩하지 않습니다.
  • encodeURI는 완전한 URL을 인코딩할 때 사용됩니다.

사용예시

inline ad
encodeURI("https://example.com/?query=hello world")

encodeURIComponent

  • 이 함수는 URL의 쿼리 문자열 파라미터 값을 인코딩합니다.
  • encodeURI와 달리, 예약 문자를 포함한 모든 문자를 인코딩합니다.
  • 예약 문자는 URL에 특별한 의미를 가지고 있어서 데이터로 사용될 때 인코딩되어야 합니다. 예를 들어, 공백이 %20으로 인코딩되고, &는 %26으로 인코딩됩니다.
  • encodeURIComponent는 URL의 쿼리 문자열 파라미터 값을 인코딩할 때 사용됩니다.
  • 한글 파일을 인코딩할 때는 주로 encodeURIComponent를 사용합니다. 왜냐하면 encodeURIComponent는 URL의 쿼리 문자열 파라미터 값을 인코딩하는데 적합하기 때문입니다. 한글은 URL에 사용될 수 있는 문자가 아니며, 따라서 URL에 포함될 때 인코딩되어야 합니다. encodeURIComponent를 사용하면 한글을 포함한 모든 문자를 올바르게 인코딩할 수 있습니다.

사용예시

const koreanFileName = "한글파일.txt";
const encodedFileName = encodeURIComponent(koreanFileName);
const url = `https://example.com/download?file=${encodedFileName}`;

간단히 말해, encodeURI는 URL 전체를 인코딩할 때 사용되고, encodeURIComponent는 URL의 특정 부분(주로 쿼리 문자열 파라미터 값)을 인코딩할 때 사용됩니다.

RECENT POSTS

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...