JavaScript의 URL 인코딩
- URI와 URL의 차이점은 무엇입니까?
-
JavaScript에서
encodeURI()
메소드를 사용하여 URL 인코딩 -
JavaScript에서
encodeURIComponent()
메소드를 사용하여 URL 인코딩
URL 인코딩은 % 다음에 16진수 문자가 오는 URL 내부의 8비트 문자를 인코딩하는 프로세스입니다. 문자를 퍼센트 기호로 교체하기 때문에 퍼센트 인코딩이라고도 합니다. URL 인코딩은 JavaScript를 포함한 거의 모든 프로그래밍 언어를 사용하여 수행할 수 있습니다.
URL을 인코딩하는 이유는 URL에 ASCII 테이블의 특정 문자만 포함될 수 있기 때문입니다. URL 내부에 있는 다른 모든 문자는 URL이 올바르게 작동하도록 인코딩해야 합니다. URL에서 인코딩이 필요한 문자는 ':'
, '/'
, '?'
, '#'
, '['
, ']'
, '@'
입니다. , '!'
, '$'
, '&'
, "'"
, '('
, ')'
, '*'
, '+'
, ','
, ';'
, '='
및 '%'
. 이러한 문자와 해당 인코딩 형식에 대한 자세한 내용은 이 링크를 참조하세요.
URI와 URL의 차이점은 무엇입니까?
계속 진행하기 전에 먼저 URI와 URL에 대해 이해합시다.
Uniform Resource Identifier
(URI)는 인터넷을 통해 자원을 식별하는 데 사용됩니다. 대조적으로 Uniform Resource Locator
(URL)는 해당 자원을 찾고 접근하는 데 도움이 되는 것입니다.
URI는 로케이터일 뿐만 아니라 식별자일 수도 있지만 URL은 로케이터일 뿐입니다. URL은 URI 아래에 있습니다. 따라서 둘 다 약간 비슷하게 들리지만 미묘한 차이가 있습니다.
예를 들어, facebook.com
은 Facebook의 웹페이지가 있는 위치를 취하기 때문에 URL인 반면, 근처 커피숍은 커피숍(자원인)이 어디에 있는지 알고 있고 얻는 방법도 알고 있기 때문에 URI가 될 수 있습니다. 거기(경로).
JavaScript에서 encodeURI()
메소드를 사용하여 URL 인코딩
encodeURI()
메서드는 JavaScript에서 URL을 인코딩하는 데 사용할 수 있는 메서드 중 하나입니다. 완전한 URL이 있는 경우 이 방법을 사용할 수 있습니다.
URL이 https://en.wikipedia.org/[$q=english &language]
라고 가정하고 이제 encodeURI()
메서드를 사용하여 이 URL을 인코딩하여 이 메서드가 제공하는 출력을 확인하겠습니다.
const URL = "https://en.wikipedia.org/[$q=english &language]";
console.log(encodeURI(URL));
출력:
https://en.wikipedia.org/%5Bq=english%20&language%5D
이 방법은 공백 및 대괄호와 같은 URL의 문자 중 극히 일부만 인코딩한다는 점에 유의하십시오.
이 방법은 다음 특수 문자를 인코딩하지 않습니다.
encodeURI()` will not encode: `~!@#$&*()=:/,;?+'
다른 특수 문자 중 일부를 인코딩하려면 encodeURIComponent()
메서드를 사용할 수 있습니다.
JavaScript에서 encodeURIComponent()
메소드를 사용하여 URL 인코딩
encodeURIComponent()
메서드를 사용하여 URL을 인코딩할 수도 있습니다. 이 방법은 URL의 일부만 있는 경우에 사용할 수 있습니다. 이미 보았듯이 encodeURI()
메서드는 매우 적은 수의 문자를 인코딩하지만 다른 문자도 인코딩하려면 encodeURIComponent()
메서드를 사용할 수 있습니다.
이전에 가져온 것과 동일한 URL을 사용하여 이 메서드를 사용하여 문자열을 인코딩할 때 얻는 출력을 살펴보겠습니다.
const URL = "https://en.wikipedia.org/[$q=english &language]";
console.log(encodeURIComponent(URL));
출력:
https%3A%2F%2Fen.wikipedia.org%2F%5B%24q%3Denglish%20%26language%5D
보시다시피 이 방법은 대부분의 URL을 인코딩했습니다.
이 방법은 다음 특수 문자를 인코딩하지 않습니다.
encodeURIComponent()` will not encode: `~!*()'
요구 사항과 사용법에 따라 위의 두 가지 방법 중 하나 또는 둘 다를 사용하여 JavaScript로 URL을 인코딩할 수 있습니다.