JavaScript의 URL 인코딩

1. URI와 URL의 차이점은 무엇입니까?
2. JavaScript에서 encodeURI() 메소드를 사용하여 URL 인코딩
3. 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을 인코딩할 수 있습니다.