Primjer kodiranja JavaScript URL-a - Kako koristiti encodeURIcomponent () i encodeURI ()

Mogli biste to pomisliti encodeURIi encodeURIComponentučiniti isto, barem prema njihovim imenima. I možda ćete biti zbunjeni koju i kada koristiti.

U ovom ću članku demistificirati razliku između encodeURIi encodeURIComponent.

Što je URI i po čemu se razlikuje od URL-a?

URI je skraćenica za Uniform Resource Identifier.

URL je skraćenica za Uniform Resource Locator.

Sve što jedinstveno identificira resurs je njegov URI, poput ID-a, imena ili ISBN broja. URL određuje resurs i način na koji mu se može pristupiti (protokol). Svi su URL-ovi URI-ji, ali nisu svi URI-ovi URL-ovi.

Zašto trebamo kodirati?

URL-ovi mogu imati samo određene znakove iz standardnog ASCII skupa od 128 znakova. Rezervirani znakovi koji ne pripadaju ovom skupu moraju se kodirati.

To znači da trebamo kodirati ove znakove prilikom prelaska u URL. Posebni znakovi, kao što su &, space, !kada je ušao u potrebi URL za odbijanje, inače oni mogu uzrokovati nepredvidive situacije.

Slučajevi upotrebe:

  1. Korisnik je poslao vrijednosti u obliku koji može biti u formatu niza i treba ga proslijediti, kao što su polja URL-a.
  2. Trebate prihvatiti parametre niza upita kako biste mogli GET zahtjeve.

Koja je razlika između encodeURI i encodeURIComponent?

encodeURIi encodeURIComponentkoriste se za kodiranje jednoobraznih identifikatora resursa (URI) zamjenom određenih znakova jednim, dva, tri ili četiri izlazne sekvence koje predstavljaju UTF-8 kodiranje znaka.

encodeURIComponenttreba koristiti za kodiranje URI komponente - niza koji bi trebao biti dio URL-a.

encodeURItreba koristiti za kodiranje URI-ja ili postojećeg URL-a.

Evo korisne tablice razlike u kodiranju znakova

Koji su znakovi kodirani?

encodeURI() neće kodirati: [email protected]#$&*()=:/,;?+'

encodeURIComponent() neće kodirati: ~!*()'

Likovi A-Z a-z 0-9 - _ . ! ~ * ' ( )nisu pobjegli.

Primjeri

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 

Kada kodirati

  1. Pri prihvaćanju unosa koji može imati razmake.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html 
  2. Prilikom izrade URL-a iz parametara niza upita.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99 
  3. Pri prihvaćanju parametara upita koji mogu imati rezervirane znakove.

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

Sažetak

Ako imate cjelovit URL, upotrijebite encodeURI. Ali ako imate dio URL-a, upotrijebite encodeURIComponent.

Zanimaju li me još vodiči i JSBytes? Prijavite se za moj bilten. ili me slijedite na Twitteru