JavaScript URL kódolási példa - Az encodeURIcomponent () és az encodeURI () használata

Programozás

Lehet, hogy ezt gondolja, encodeURIés encodeURIComponentugyanezt teszi, legalábbis a nevük alapján. És zavart lehet, hogy melyiket és mikor használja.

Ebben a cikkben demisztizálom a encodeURIés közötti különbséget encodeURIComponent.

Mi az URI és miben különbözik az URL-től?

Az URI az egységes erőforrás-azonosítót jelenti.

Az URL az Uniform Resource Locator rövidítése.

Minden, ami egyedileg azonosítja az erőforrást, az URI-je, például azonosítója, neve vagy ISBN-száma. Az URL meghatározza az erőforrást és annak elérési módját (a protokollt). Minden URL URI, de nem minden URI URL.

Miért kell kódolni?

Az URL-ek csak bizonyos karaktereket tartalmazhatnak a szokásos 128 karakteres ASCII készletből. A készletbe nem tartozó, lefoglalt karaktereket kódolni kell.

Ez azt jelenti, hogy ezeket a karaktereket kódolnunk kell, amikor átkerülünk egy URL-be. Speciális karakterek, mint például &, space, !amikor belépett egy url meg kell védeni, különben okozhat kiszámíthatatlan helyzetekben.

Felhasználási esetek:

  1. A felhasználó olyan formátumban nyújtott be értékeket, amely karakterlánc formátumú lehet, és amelyeket át kell adni, például URL mezők.
  2. El kell fogadni a lekérdezési karakterlánc-paramétereket a GET-kérelmek benyújtásához.

Mi a különbség az encodeURI és az encodeURIComponent között?

encodeURIés encodeURIComponentaz egységes erőforrás-azonosítók (URI) kódolására használatosak, bizonyos karaktereket egy, kettő, három vagy négy menekülési szekvenciával helyettesítve a karakter UTF-8 kódolását.

encodeURIComponentURI komponens kódolására kell használni - egy karakterláncra, amely állítólag egy URL része.

encodeURIURI vagy egy meglévő URL kódolására kell használni .

Itt van egy praktikus táblázat a karakterek kódolásának különbségéről

Mely karakterek vannak kódolva?

encodeURI() nem kódolja: ~!@#$&*()=:/,;?+'

encodeURIComponent() nem kódolja: ~!*()'

A karakterek A-Z a-z 0-9 - _ . ! ~ * ' ( )nem kerülhetők el.

Példák

const url = '//www.twitter.com' console.log(encodeURI(url)) ////www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) ////www.twitter.com%3Fq%3Dsearch

Mikor kell kódolni

  1. Olyan bemenet elfogadásakor, amelyben szóköz lehet.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html

  2. URL létrehozásakor a lekérdezési karakterlánc paramétereiből.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99

  3. Olyan lekérdezési paraméterek elfogadásakor, amelyekben lehetnek fenntartott karakterek.

 let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple

Összegzés

Ha van egy teljes URL használatát encodeURI. De ha van egy URL-címe, használja encodeURIComponent.

További oktatóanyagok és JSBytes érdekel tőlem? Iratkozzon fel a hírlevelemre. vagy kövess a Twitteren