Kodning och avkodning av webbadresser i JavaScript är avgörande för webbutveckling, särskilt när du gör GET-förfrågningar med frågeparametrar. Denna process säkerställer att specialtecken i webbadresser tolkas korrekt av servern. Till exempel konverteras mellanslag till %20 eller + i webbadresser. Den här guiden beskriver hur du använder JavaScript-funktioner som encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() och unescape() för effektiv URL-kodning och avkodning.

Exempel:

• Öppna www.google.com och skriv en sökfråga nördar för nördar.
• När sökresultaten visas, observera webbläsarens URL-fält. Webbläsarens URL kommer att bestå av %20 eller + tecken i stället för utrymme.
• Webbadressen kommer att visas som: https://www.google.com/search?q=geeks%20for%20geeks eller https://www.google.com/search?q=geeks+for+geeks

Notera : Webbläsaren konverterade mellanslagen till + eller %20 tecken automatiskt.

Koda en URL: Kodning i Javascript kan uppnås med:

Innehållsförteckning

• 1. JavaScript encodeURI-funktion
• 2. JavaScript encodeURIComponent() Funktion
• 3. JavaScript escape() funktion
• 1. JavaScript decodeURI() Funktion
• 2. JavaScript decodeURIComponent() Funktion
• 3. JavaScript unescape() Funktion
• 4. JavaScript querystring-modul

1. JavaScript encodeURI-funktion

De encodeURI() funktion används för att koda fullständig URI. Denna funktion kodar specialtecknet förutom (, / ?: @ & = + $ #) tecken.

Syntax:

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

De encodeURIConponent() funktion används för att koda vissa delar eller komponenter av URI. Denna funktion kodar specialtecknen. Dessutom kodar den följande tecken: , / ? : @ & = + $ #

Syntax:

encodeURIComponent( uri_string_component );>

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

geeks%20for%20geeks>

3. JavaScript escape() funktion

JavaScript escape() funktion tar en sträng som en enda parameter och kodar strängen som kan sändas över datornätverket som stöder ASCII-tecken. Kodning är processen att konvertera vanlig text till chiffertext.

Syntax:

escape( string )>

Notera: Funktionen escape() kodar endast specialtecknen, denna funktion är utfasad.

Undantag: @ – + . /*_

fackförbund vs fackförbund alla

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>

Avkoda en URL

Avkodning i Javascript kan uppnås med hjälp av

1. JavaScript decodeURI() Funktion

De decodeURI() funktion används för att avkoda URI genererad av encodeURI() .

Syntax:

decodeURI( complete_encoded_uri_string )>

Exempel : Det här exemplet beskriver decodeURI() funktion av 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. JavaScript decodeURIComponent() Funktion

De decodeURIConponent() funktion används för att avkoda vissa delar eller komponenter av URI som genereras av encodeURIComponent().

Syntax:

decodeURIComponent( encoded_uri_string_component )>

Exempel : Det här exemplet beskriver decodeURIConponent() av Javascript.

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

geeks for geeks>

3. JavaScript unescape() Funktion

Den här funktionen tar en sträng som en enda parameter och använder den för att avkoda den strängen som kodas av funktionen escape(). Den hexadecimala sekvensen i strängen ersätts av de tecken de representerar när de avkodas via unescape() funktion.

Syntax:

unescape(string)>

Notera: Denna funktion avkodar endast specialtecknen, denna funktion är föråldrad.

Undantag: @ – + . /*_

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-modul

Frågesträngsmodulen tillhandahåller verktyg för att analysera och formatera URL-frågesträngar. Den kan användas för att koda och avkoda URL-komponenter.

Koda en URL:

För att koda en URL kan vi använda funktionen querystring.stringify() för att skapa en frågesträng från ett objekt och sedan använda encodeURIComponent() för att koda den resulterande strängen.

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

Produktion:

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

Avkoda en URL:

För att avkoda en URL kan vi använda funktionen querystring.parse() för att analysera frågesträngen till ett objekt och sedan komma åt de avkodade värdena.

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>

Skillnad decodeURIConponent och decodeURI:

URL-kodning och avkodning i JavaScript är avgörande för sömlös webbutveckling. Genom att använda funktioner som encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() och unescape(), kan utvecklare säkerställa att deras webbadresser är korrekt formaterade och läsbara av servrar. Denna färdighet är väsentlig för att hantera frågeparametrar i GET-förfrågningar och säkerställer en smidig användarupplevelse på din webbplats.