공백이 인코딩되는 방식 이해: %(encodeURI 사용 및 URL 사용)

encodeURI 또는 ​​URL을 사용하여 쿼리 문자열을 인코딩할 수 있습니다. 최근에 URL이 공백을 다르게 인코딩한다는 사실을 발견했습니다. 인코딩을 서로 다른 방식으로 처리하는 이유에 대해 설명하겠습니다. 본론에 들어가기 전, 각 방법을 활용하여 인코딩하는 방법을 알려드리겠습니다.

---

용법

1. encodeURI

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

encodeURI 함수를 사용하여 URI를 인코딩할 수 있습니다. 하지만,. 이는 URI의 유효한 부분인 문자의 일부를 인코딩하지 않으므로 쿼리 문자열이나 URI의 다른 구성 요소를 올바르게 인코딩하려면 encodeURIComponent 함수를 사용해야 할 수도 있습니다.

예를 들어, 값이 포함된 쿼리 문자열 q가 있다고 가정해 보겠습니다
https://www.google.com/search?q=&?의 의미는 무엇인가요.

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

&(앰퍼샌드)는 &로 변환되지 않습니다. &(앰퍼샌드)는 URI의 유효한 부분이 될 수 있기 때문입니다. 이러한 이유로 쿼리 문자열에는 encodeURIComponent를 사용하는 것이 항상 더 안전합니다.

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

encodeURIX 및 관련 함수는 URI를 문자열로 처리하므로 ? 그리고 & 너 자신. 또는 URL을 사용하여 프로세스를 단순화할 수 있습니다.

---

2. URL

URL을 사용하여 인코딩할 경우 기본 URL과 쿼리 문자열을 별도로 처리해야 합니다.

const url = 'https://www.google.com/search?q=programming language';
// 'https://www.google.com/search?q=programming language'
url.toString();

위 예시와 같이 URL 생성자를 이용하여 한꺼번에 인코딩할 경우 쿼리링이 제대로 인코딩되지 않을 수 있습니다.

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'programming language');
// 'https://www.google.com/search?q=programming+language'
url.toString();

URL 객체의 searchParams 속성을 통해 쿼리 문자열을 설정하면 쿼리 문자열을 설정할 수 있습니다.

이 경우 공간은 로 변환됩니다. 왜 이런 일이 발생하는지 설명하기 전에 다른 쿼리 문자열로 테스트하여 다른 특수 문자를 어떻게 처리하는지 살펴보겠습니다.

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'what is the meaning of &?');
// 'https://www.google.com/search?q=what+is+the+meaning+of+%26%3F'
url.toString();

다른 특수 문자는 예상대로 인코딩됩니다.

이제 이러한 차이가 발생하는 이유를 살펴보겠습니다.

---

부호화

1. encodeURI

encodeURIX 함수는 RFC2396에 따라 인코딩됩니다. URI는 단순한 인터넷상의 위치가 아닙니다. 이는 모든 유형의 리소스를 참조할 수 있습니다. 이것이 URL(Uniform Resource Locator)이 아닌 URI(Uniform Resource Identifier)라고 불리는 이유입니다.

---

2. URL

URL API는 최신 URI 사양인 RFC3986에 따라 인코딩됩니다.

encodeURI를 사용하여 이 동작을 수행해야 하는 경우 다음을 참조하세요. - RF3986용 encodeURIComponent 인코딩).

URLSearchParams는 백분율 인코딩 규칙에 따라 인코딩됩니다. 문서에 따르면 공백을 ' '로 바꿉니다.

RFC에서 이 동작에 대한 사양을 찾을 수 없지만 MDN의 encodeURIComponent 문서에는 다음과 같이 명시되어 있습니다.

application/x-www-form-urlencoded의 경우 공백은 로 대체되므로 encodeURIComponent() 대체를 .

로 추가 대체하는 것이 좋습니다.

이는 application/x-www-form-urlencoded 표준을 따르기 때문에 URLSearchParams에서 공백이 ''로 대체되는 이유를 설명합니다.

URL과 URLSearchParams가 다른 RFC를 따른다는 점을 눈치채셨을 것입니다.

몇 가지 예시를 살펴보겠습니다.

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

표시된 것처럼 URL은 IPv6 주소의 일부이므로 대괄호와 콜론을 인코딩하지 않습니다. 그러나 콜론은 쿼리 문자열의 일부임에도 불구하고 :으로 인코딩되지 않습니다. 퍼센트 인코딩 테이블과는 다릅니다.

URL과 쿼리 문자열을 별도로 인코딩해야 한다는 의미입니다.

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

이제 URL과 쿼리 문자열이 올바르게 인코딩되었습니다.

---

결론

encodeURI, encodeURIComponent, URL 및 URLSearchParams 함수는 각각 다른 용도로 사용되므로 특정 요구 사항에 따라 사용해야 합니다.

encodeURI: RFC2396에 따라 URI를 인코딩합니다. URI의 유효한 부분인 문자는 인코딩하지 않습니다. RFC3986에 따라 URI를 인코딩해야 하는 경우 이 MDN 설명서를 참조하세요.

encodeURIComponent: 경로, 조각 또는 쿼리 문자열과 같은 RFC2396에 따라 URI의 구성 요소를 인코딩합니다. encodeURI로 인코딩되지 않은 문자가 포함되어 있습니다.

URL: RFC3986에 따라 웹 URL을 인코딩합니다.

URLSearchParams: application/x-www-form-urlencoded 표준에 따라 매개변수를 인코딩합니다.

(더하기) 기호를 로 바꿔야 하는 경우 아래와 같이 수동으로 바꿀 수 있습니다.

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

웹 개발, Restful API 또는 웹 URL로 작업할 때 URL은 신뢰할 수 있는 선택입니다. 또한 RFC2396보다 최신인 RFC3986을 따릅니다.

---

이 정보가 도움이 되었기를 바랍니다.

즐거운 코딩하세요!

위 내용은 공백이 인코딩되는 방식 이해: %(encodeURI 사용 및 URL 사용)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!