JavaScript에서 URL을 인코딩하고 디코딩하는 것은 웹 개발에 필수적이며, 특히 쿼리 매개변수를 사용하여 GET 요청을 할 때 더욱 그렇습니다. 이 프로세스를 통해 URL의 특수 문자가 서버에서 올바르게 해석되도록 합니다. 예를 들어 URL에서 공백은 %20 또는 +로 변환됩니다. 이 가이드에서는 효과적인 URL 인코딩 및 디코딩을 위해 encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() 및 unescape()와 같은 JavaScript 함수를 사용하는 방법을 다룹니다.

예:

• www.google.com을 열고 괴짜를 위한 검색어를 작성하세요.
• 검색 결과가 나타나면 브라우저의 URL 표시줄을 관찰하세요. 브라우저 URL은 공백 대신 %20 또는 + 기호로 구성됩니다.
• URL은 https://www.google.com/search?q=geeks%20for%20geeks 또는 https://www.google.com/search?q=geeks+for+geeks와 같이 표시됩니다.

메모 : 브라우저가 자동으로 공백을 + 또는 %20 기호로 변환했습니다.

URL 인코딩: Javascript로 인코딩은 다음을 사용하여 수행할 수 있습니다.

내용의 테이블

• 1. 자바스크립트 encodeURI 함수
• 2. 자바스크립트 encodeURIComponent() 함수
• 3. 자바스크립트 escape() 함수
• 1. 자바스크립트 decodeURI() 함수
• 2. 자바스크립트 decodeURIComponent() 함수
• 3. 자바스크립트 unescape() 함수
• 4. JavaScript 쿼리 문자열 모듈

1. 자바스크립트 encodeURI 함수

그만큼 encodeURI() 함수 완전한 URI를 인코딩하는 데 사용됩니다. (, / ?: @ & = + $ #) 문자를 제외한 특수 문자를 인코딩하는 함수입니다.

통사론:

encodeURI( complete_uri_string ); 

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL) 

https://www.google.com/search?q=geeks%20for%20geeks 

2. 자바스크립트 encodeURIComponent() 함수

그만큼 encodeURIComponent() 함수 URI의 일부 부분이나 구성 요소를 인코딩하는 데 사용됩니다. 이 함수는 특수 문자를 인코딩합니다. 또한 다음 문자를 인코딩합니다: , / ? : @ & = + $ #

통사론:

encodeURIComponent( uri_string_component ); 

const component = 'geeks for geeks'; const encodedComponent = encodeURIComponent(component); console.log(encodedComponent); 

geeks%20for%20geeks 

3. 자바스크립트 escape() 함수

자바스크립트 이스케이프() 함수 문자열을 단일 매개변수로 사용하고 ASCII 문자를 지원하는 컴퓨터 네트워크를 통해 전송될 수 있는 문자열을 인코딩합니다. 인코딩은 일반 텍스트를 암호문으로 변환하는 과정입니다.

통사론:

escape( string ) 

메모: escape() 함수는 특수 문자만 인코딩하므로 이 함수는 더 이상 사용되지 않습니다.

예외: @ - + . /*_

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url);// encoding using encodeURI console.log(encodedURL) console.log(' ' + escape(url)); //encoding using escape 

https://www.google.com/search?q=geeks%20for%20geeks https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks 

URL 디코딩

Javascript에서 디코딩은 다음을 사용하여 수행할 수 있습니다.

1. 자바스크립트 decodeURI() 함수

그만큼 decodeURI() 함수 생성된 URI를 디코딩하는 데 사용됩니다. 인코딩URI() .

통사론:

decodeURI( complete_encoded_uri_string ) 

예 : 이 예에서는 decodeURI() 함수 ~의 자바스크립트 .

const url = 'https://www.google.com/search?q=geeks%20for%20geeks'; const decodedURL = decodeURI(url); console.log(decodedURL) 

https://www.google.com/search?q=geeks for geeks 

2. 자바스크립트 decodeURIComponent() 함수

그만큼 decodeURIComponent() 함수 encodeURIComponent()에 의해 생성된 URI의 일부 부분이나 구성 요소를 디코딩하는 데 사용됩니다.

통사론:

decodeURIComponent( encoded_uri_string_component ) 

예 : 이 예에서는 디코드URI컴포넌트() 자바스크립트의.

const component = 'geeks%20for%20geeks' const decodedComponent = decodeURIComponent(component); console.log(decodedComponent) 

geeks for geeks 

3. 자바스크립트 unescape() 함수

이 함수는 문자열을 단일 매개변수로 취하고 이를 사용하여 escape() 함수로 인코딩된 문자열을 디코딩합니다. 문자열의 16진수 시퀀스는 다음을 통해 디코딩될 때 나타내는 문자로 대체됩니다. unesca() 함수.

통사론:

unescape(string) 

메모: 이 기능은 특수 문자만 디코딩하므로 이 기능은 더 이상 사용되지 않습니다.

예외: @ - + . /*_

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL) console.log(escape(url)); console.log(decodeURI(encodedURL)); console.log(unescape(encodedURL)); 

https://www.google.com/search?q=geeks%20for%20geeks https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks https://www.google.com/search?q=geeks for geeks https://www.google.com/search?q=geeks for ... 

4. JavaScript 쿼리 문자열 모듈

querystring 모듈은 URL 쿼리 문자열을 구문 분석하고 형식을 지정하는 유틸리티를 제공합니다. URL 구성 요소를 인코딩하고 디코딩하는 데 사용할 수 있습니다.

URL 인코딩:

URL을 인코딩하려면 querystring.stringify() 함수를 사용하여 객체에서 쿼리 문자열을 만든 다음 encodeURIComponent()를 사용하여 결과 문자열을 인코딩할 수 있습니다.

const querystring = require('querystring'); const urlParams = {  q: 'geeks for geeks',  page: 1,  sort: 'desc' }; const encodedURL = 'https://www.google.com/search?' + querystring.stringify(urlParams); console.log(encodedURL); 

산출:

https://www.google.com/search?q=geeks%20for%20geeks&page=1&sort=desc 

URL 디코딩:

URL을 디코딩하려면 querystring.parse() 함수를 사용하여 쿼리 문자열을 객체로 구문 분석한 다음 디코딩된 값에 액세스할 수 있습니다.

const decodedParams = querystring.parse('q=geeks%20for%20geeks&page=1&sort=desc'); console.log(decodedParams.q); // Output: geeks for geeks console.log(decodedParams.page); // Output: 1 console.log(decodedParams.sort); // Output: desc 

decodeURIComponent 및 decodeURI의 차이점:

JavaScript의 URL 인코딩 및 디코딩은 원활한 웹 개발에 매우 ​​중요합니다. encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() 및 unescape()와 같은 기능을 사용하여 개발자는 URL의 형식이 적절하고 서버에서 읽을 수 있는지 확인할 수 있습니다. 이 기술은 GET 요청의 쿼리 매개변수를 처리하는 데 필수적이며 웹 사이트에서 원활한 사용자 경험을 보장합니다.