development

URL 인코딩에 encodeURI 또는 ​​encodeURIComponent를 사용해야합니까?

big-blog 2020. 4. 6. 08:09
반응형

URL 인코딩에 encodeURI 또는 ​​encodeURIComponent를 사용해야합니까?


URL 인코딩에이 두 가지 방법 중 어떤 것을 사용해야합니까?


실제로하고 싶은 것에 달려 있습니다.

encodeURI는 입력이 인코딩이 필요한 일부 문자를 가질 수있는 완전한 URI라고 가정합니다.

encodeURIComponent는 모든 것을 특별한 의미로 인코딩하므로 다음과 같은 URI 구성 요소에 사용합니다.

var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);

URL 구성 요소 (querystring 매개 변수)에 넣을 문자열을 인코딩하는 경우을 호출해야합니다 encodeURIComponent.

기존 URL을 인코딩하는 경우을 호출하십시오 encodeURI.


xkr.us 는 예제와 함께 훌륭한 토론을합니다. 요약을 인용하려면 :

escape () 메소드는 서버 측의 공백으로 해석되고 필드에 공백이있는 양식으로 생성 된 + 문자를 인코딩하지 않습니다. 이 단점과이 함수가 비 ASCII 문자를 올바르게 처리하지 못하기 때문에 가능할 때마다 escape ()를 사용하지 않아야합니다. 가장 좋은 대안은 일반적으로 encodeURIComponent ()입니다.

escape ()는 다음을 인코딩하지 않습니다 : @ * / +

encodeURI () 메소드는 URL의 일부인 querystring과 반대로 URI를 인코딩한다는 점에서 escape ()보다 약간 더 전문화되어 있습니다. URI를 사용하고 특정 문자를 인 코드하지 않고 유지해야하는 자원에 사용할 문자열을 인코딩해야하는 경우이 방법을 사용하십시오. 이 메소드는 URI 내의 유효한 문자이므로 '문자를 인코딩하지 않습니다.

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

마지막으로, 대부분의 경우 URI의 단일 구성 요소를 인코딩 할 때 encodeURIComponent () 메소드를 사용해야합니다. 이 메소드는 일반적으로 URI의 특수 문자로 인식되는 특정 문자를 인코딩하여 많은 구성 요소가 포함될 수 있습니다. 이 메소드는 URI 내의 유효한 문자이므로 '문자를 인코딩하지 않습니다.

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


다음은 요약입니다.

  1. escape ()는 @ * _ +-를 인코딩하지 않습니다. /

    사용하지 마십시오.

  2. encodeURI ()는 AZ az 0-9를 인코딩하지 않습니다. , /? : @ & = + $-_. ! ~ * '() #

    입력이 ' https://searchexample.com/search?q=wiki ' 와 같은 완전한 URL 인 경우이를 사용하십시오.

  3. encodeURIComponent ()는 AZ az 0-9-_를 인코딩하지 않습니다. ! ~ * '() 입력이 완전한 URL의 일부인 경우에 사용하십시오. 예 :const queryStr = encodeURIComponent(someString)

encodeURIComponent () : 해당 인수가 URI의 일부 (예 : 프로토콜, 호스트 이름, 경로 또는 쿼리 문자열) 인 것으로 가정합니다. 따라서 URI 부분을 구분하는 데 사용되는 문장 부호 문자를 이스케이프합니다.

encodeURI () : 기존 URL을 인코딩하는 데 사용됩니다


차이 사이 encodeURIencodeURIComponent:

encodeURIComponent(value)주로 queryString 매개 변수 값을 인코딩하는 데 사용되며의 모든 해당 문자를 인코딩합니다 value. encodeURI프로토콜 접두사 ( http://) 및 도메인 이름을 무시합니다 .


매우 드문 경우이지만 ! *다음 과 같은 추가 문자를 인코딩하기 위해 수동 인코딩을 구현하려는 경우 (일반적인 경우 인코딩 할 필요는 없지만) 다음 과 같이 사용할 수 있습니다.

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

( 소스 )


다른 답변은 목적을 설명합니다. 각 함수 가 실제로 변환 할 문자는 다음과 같습니다 .

control = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0A\x0B\x0C\x0D\x0E\x0F'
        + '\x10\x11\x12\x13\x14\X15\x16\x17\x18\x19\x1A\x1B\x1C\x1D\x1E\x1F'
                                                                    + '\x7F'
encodeURI         (control + ' "%<>[\\]^`{|}'                             )
encodeURIComponent(control + ' "%<>[\\]^`{|}' + '#$&,:;=?' + '+/@'        )
escape            (control + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

위의 모든 문자는 퍼센트 16 진수 코드로 변환됩니다. 공백 %20, 퍼센트 %25, 등. 아래 문자는 변경되지 않습니다.

함수 가 변환하지 않는 문자는 다음과 같습니다 .

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

encodeURI         (pass_thru + '#$&,:;=?' + '+/@' + "!'()~")
encodeURIComponent(pass_thru +                      "!'()~")
escape            (pass_thru +              '+/@'          )

일반적으로 사용 encodeURIComponent합니다. 그것이 더 구체적으로 사용된다고 생각하는 긴 이름을 두려워하지 마십시오. 저에게 가장 일반적으로 사용되는 방법입니다. 또한 encodeURI를 사용하여 테스트하지 않았으므로 제대로 인코딩 된 것 같습니다. 아마도 사용하려는 것이 아니며 이름 필드에서 "Fred"를 사용하는 간단한 테스트를 수행해도 효과가 있습니다. 나중에 앰퍼샌드 또는 해시 태그 추가와 같은 고급 텍스트를 사용하면 실패합니다. 그 이유에 대한 다른 답변을 볼 수 있습니다.

참고 URL : https://stackoverflow.com/questions/4540753/should-i-use-encodeuri-or-encodeuricomponent-for-encoding-urls

반응형