encodeURI()와 encodeURIComponent()의 차이점

URI란 무엇이며 URL과 어떻게 다른가요?

URI는 Uniform Resource Identifier의 약자입니다.
URL은 Uniform Resource Locator의 약자입니다.

자원을 고유하게 식별하는 모든 것은 ID, 이름 또는 ISBN 번호와 같은 URI입니다. URL은 리소스와 액세스 방법(프로토콜)을 지정합니다. 모든 URL은 URI이지만 모든 URI가 URL은 아닙니다.

URL 인코딩이 필요한 이유:

특정 문자는 URL 문자열에서 특별한 값을 갖습니다. 예를 들어, ? 문자는 쿼리 문자열의 시작을 나타냅니다. 웹에서 리소스를 성공적으로 찾으려면 문자가 문자열의 일부인지 URL 구조의 일부인지 구분해야 합니다.

즉, 이러한 문자를 URL에 전달할 때 인코딩해야 합니다. 그렇지 않으면 예측할 수 없는 상황이 발생할 수 있습니다.

인코딩된 문자

encodeURI()와 encodeURIComponent()의 차이점은 정확히 11자입니다.

encodeURI()는 다음을 인코딩하지 않습니다: ~!@#$&*()=:/,;?+'

encodeURIComponent()는 인코딩하지 않습니다: ~!*()'

인코딩 시기:

JS는 URL을 쉽게 인코딩하는 데 사용할 수 있는 몇 가지 기능을 제공합니다. 다음은 두 가지 편리한 옵션입니다.

encodeURI(): URI 또는 ​​전체 URL을 인코딩하는 데 사용해야 합니다.

encodeURI("http://www.example.org/a file with spaces.html")
//http://www.example.org/a%20file%20with%20spaces.html

encodeURIComponent(): 쿼리 문자열의 개별 값과 같은 URI 구성 요소를 인코딩하는 데 사용해야 합니다.

`http://domain.com/?search=\${encodeURIComponent('encode & decode param')}`

// 'http://domain.com/?search=encode%20%26%20decode%20param'

또는 URL 매개변수의 값을 인코딩하려는 경우.

var p1 = encodeURIComponent("http://example.org/?a=12&b=55")

그런 다음 필요한 URL을 만들 수 있습니다.

var url = "http://example.net/?param1=" + p1 + "&param2=99";

그러면 다음과 같은 완전한 URL이 표시됩니다.

http://example.net/?param1=http%3A%2F%2Fexample.org%2F%Ffa%3D12%26b%3D55&param2=99

결론

완전한 URL이 있으면 encodeURI를 사용하십시오. 그러나 URL의 일부가 있는 경우 encodeURIComponent를 사용하십시오.