Kodowanie i dekodowanie adresów URL w JavaScript jest niezbędne przy tworzeniu stron internetowych, szczególnie podczas tworzenia żądań GET z parametrami zapytania. Ten proces gwarantuje, że znaki specjalne w adresach URL będą poprawnie interpretowane przez serwer. Na przykład spacje są konwertowane na %20 lub + w adresach URL. W tym przewodniku opisano, jak używać funkcji JavaScript, takich jak encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() i unescape() w celu efektywnego kodowania i dekodowania adresów URL.

Przykład:

• Otwórz www.google.com i wpisz zapytanie maniaków dla maniaków.
• Po wyświetleniu wyników wyszukiwania zwróć uwagę na pasek adresu przeglądarki. Adres URL przeglądarki będzie składał się z %20 lub znaku + zamiast spacji.
• Adres URL będzie wyświetlany w następujący sposób: https://www.google.com/search?q=geeks%20for%20geeks lub https://www.google.com/search?q=geeks+for+geeks

Notatka : przeglądarka automatycznie konwertowała spacje na znaki + lub %20.

Kodowanie adresu URL: Kodowanie w JavaScript można osiągnąć za pomocą:

Spis treści

• 1. Funkcja JavaScript encodeURI
• 2. Funkcja JavaScript encodeURIComponent().
• 3. Funkcja escape() JavaScript
• 1. Funkcja decodeURI() JavaScript
• 2. Funkcja decodeURIComponent() JavaScript
• 3. Funkcja JavaScript unescape().
• 4. Moduł zapytania JavaScript

1. Funkcja JavaScript encodeURI

The funkcja encodeURI(). służy do kodowania pełnego URI. Ta funkcja koduje znak specjalny z wyjątkiem znaków (, /?: @ & = + $ #).

Składnia:

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. Funkcja JavaScript encodeURIComponent().

The funkcję encodeURIComponent(). służy do kodowania niektórych części lub komponentów URI. Ta funkcja koduje znaki specjalne. Dodatkowo koduje następujące znaki: , /? : @ & = + $ #

Składnia:

encodeURIComponent( uri_string_component ); 

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

geeks%20for%20geeks 

3. Funkcja escape() JavaScript

Funkcja escape() JavaScript przyjmuje ciąg znaków jako pojedynczy parametr i koduje ciąg znaków, który można przesłać przez sieć komputerową obsługującą znaki ASCII. Kodowanie to proces przekształcania zwykłego tekstu w tekst zaszyfrowany.

Składnia:

escape( string ) 

Notatka: Funkcja escape() koduje tylko znaki specjalne; ta funkcja jest przestarzała.

Wyjątki: @ – + . /*_

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 

Dekodowanie adresu URL

Dekodowanie w JavaScript można osiągnąć za pomocą

1. Funkcja decodeURI() JavaScript

The funkcja decodeURI(). służy do dekodowania identyfikatora URI generowanego przez kodujURI() .

Składnia:

decodeURI( complete_encoded_uri_string ) 

Przykład : Ten przykład opisuje funkcja decodeURI(). z JavaScript .

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. Funkcja decodeURIComponent() JavaScript

The funkcja decodeURIComponent(). służy do dekodowania niektórych części lub komponentów URI wygenerowanych przez encodeURIComponent().

Składnia:

decodeURIComponent( encoded_uri_string_component ) 

Przykład : Ten przykład opisuje dekodujURIComponent() JavaScriptu.

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

geeks for geeks 

3. Funkcja JavaScript unescape().

Ta funkcja przyjmuje ciąg znaków jako pojedynczy parametr i używa go do dekodowania ciągu zakodowanego przez funkcję escape(). Sekwencja szesnastkowa w ciągu jest zastępowana znakami, które reprezentują podczas dekodowania funkcja unescape().

Składnia:

unescape(string) 

Notatka: Ta funkcja dekoduje tylko znaki specjalne, ta funkcja jest przestarzała.

Wyjątki: @ – + . /*_

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. Moduł zapytania JavaScript

Moduł querystring udostępnia narzędzia do analizowania i formatowania ciągów zapytań URL. Można go używać do kodowania i dekodowania komponentów URL.

Kodowanie adresu URL:

Aby zakodować adres URL, możemy użyć funkcji querystring.stringify() w celu utworzenia ciągu zapytania z obiektu, a następnie użyć funkcji encodeURIComponent() do zakodowania powstałego ciągu.

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); 

Wyjście:

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

Dekodowanie adresu URL:

Aby zdekodować adres URL, możemy użyć funkcji querystring.parse() w celu przeanalizowania ciągu zapytania w obiekt, a następnie uzyskania dostępu do zdekodowanych wartości.

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 

Różnica decodeURIComponent i decodeURI:

Kodowanie i dekodowanie adresów URL w JavaScript ma kluczowe znaczenie dla płynnego tworzenia stron internetowych. Używając takich funkcji, jak encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() i unescape(), programiści mogą zapewnić, że ich adresy URL będą prawidłowo sformatowane i czytelne dla serwerów. Ta umiejętność jest niezbędna do obsługi parametrów zapytań w żądaniach GET i zapewnia płynną obsługę użytkownika w Twojej witrynie.