Esimerkki JavaScriptin URL-koodauksesta - Kuinka käyttää encodeURIcomponent () ja encodeURI ()

Saatat ajatella niin encodeURIja encodeURIComponenttehdä saman, ainakin heidän nimensä perusteella. Ja saatat olla hämmentynyt, mitä käyttää ja milloin.

Tässä artikkelissa selvitän eron encodeURIja encodeURIComponent.

Mikä on URI ja miten se eroaa URL-osoitteesta?

URI on lyhenne sanoista Uniform Resource Identifier.

URL on lyhenne sanoista Uniform Resource Locator.

Kaikki, mikä yksilöi resurssin yksilöllisesti, on sen URI, kuten tunnus, nimi tai ISBN-numero. URL-osoite määrittelee resurssin ja miten siihen pääsee (protokolla). Kaikki URL-osoitteet ovat URI-tiedostoja, mutta kaikki URI-osoitteet eivät ole URL-osoitteita.

Miksi meidän on koodattava?

URL-osoitteissa voi olla vain tiettyjä merkkejä tavallisesta 128 merkin ASCII-joukosta. Varatut merkit, jotka eivät kuulu tähän sarjaan, on koodattava.

Tämä tarkoittaa, että meidän on koodattava nämä merkit siirryttäessä URL-osoitteeseen. Erikoismerkkejä, kuten &, space, !kun merkitään url täytyy piilottaa, sillä ne voivat aiheuttaa ennalta arvaamattomia tilanteita.

Käytä koteloita:

  1. Käyttäjä on lähettänyt arvot muodossa, joka voi olla merkkijonomuotoinen ja joka on välitettävä, kuten URL-kentät.
  2. Tarve hyväksyä kyselymerkkijonoparametrit GET-pyyntöjen tekemiseksi.

Mitä eroa on encodeURI: lla ja encodeURIC-komponentilla?

encodeURIja encodeURIComponentniitä käytetään koodaamaan yhdenmukaiset resurssitunnisteet (URI) korvaamalla tietyt merkit yhdellä, kahdella, kolmella tai neljällä pakosekvenssillä, jotka edustavat merkin UTF-8-koodausta.

encodeURIComponenttulisi käyttää URI- komponentin koodaamiseen - merkkijonon, jonka oletetaan olevan osa URL-osoitetta.

encodeURItulisi käyttää URI: n tai olemassa olevan URL-osoitteen koodaamiseen .

Tässä on kätevä taulukko merkkien koodauksen eroista

Mitkä merkit on koodattu?

encodeURI() ei koodaa: [email protected]#$&*()=:/,;?+'

encodeURIComponent() ei koodaa: ~!*()'

Merkit A-Z a-z 0-9 - _ . ! ~ * ' ( )eivät ole välttyneet.

Esimerkkejä

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

Milloin koodata

  1. Kun hyväksyt syötteen, jossa voi olla välilyöntejä.

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

  2. Kun rakennetaan URL-osoite kyselymerkkijonoparametreista.

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

  3. Kun hyväksyt kyselyparametrit, joissa voi olla varattuja merkkejä.

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

Yhteenveto

Jos sinulla on täydellinen URL-osoite, käytä encodeURI. Mutta jos sinulla on osa URL-osoitteesta, käytä encodeURIComponent.

Kiinnostaako lisää opetusohjelmia ja JSBytes-minua? Tilaa uutiskirje. tai seuraa minua Twitterissä