JavaScripti URL-i kodeerimise näide - kuidas kasutada encodeURIcomponent () ja encodeURI ()

Võiks ju nii mõelda encodeURIja encodeURIComponentsama teha, vähemalt nende nimede järgi. Ja võite olla segaduses, millist ja millal kasutada.

Selles artiklis demüstifitseerin erinevuse encodeURIja encodeURIComponent.

Mis on URI ja kuidas see erineb URL-ist?

URI tähistab ühtset ressursitunnust.

URL tähistab Uniform Resource Locator.

Kõik, mis ressurssi ainulaadselt identifitseerib, on selle URI, näiteks ID, nimi või ISBN-number. URL määrab ressursi ja selle juurde pääsemise viisi (protokoll). Kõik URL-id on URI-d, kuid mitte kõik URI-d on URL-id.

Miks me peame kodeerima?

URL-id võivad sisaldada ainult teatud märke standardsest 128-märgisest ASCII-komplektist. Reserveeritud tähemärgid, mis sellesse komplekti ei kuulu, peavad olema kodeeritud.

See tähendab, et peame URL-i sisestamisel need märgid kodeerima. Erimärke nagu &, space, !kui sisestatud URL tuleb pääsenud, sest need võivad põhjustada ettearvamatu olukordades.

Kasutusjuhud:

  1. Kasutaja on esitanud väärtused kujul, mis võib olla stringivormingus ja mis tuleb edasi anda, näiteks URL-i väljad.
  2. GET-päringute tegemiseks peate nõustuma päringustringi parameetritega.

Mis vahe on encodeURI ja encodeURICkomponendi vahel?

encodeURIja encodeURIComponentneid kasutatakse ühtsete ressursitunnuste (URI) kodeerimiseks, asendades teatud märgid ühe, kahe, kolme või nelja põgenemisjärjestusega, mis tähistavad märgi UTF-8 kodeeringut.

encodeURIComponenttuleks kasutada URI komponendi kodeerimiseks - string, mis peaks olema osa URL-ist.

encodeURItuleks kasutada URI või olemasoleva URL-i kodeerimiseks .

Siin on mugav tabel tähemärkide kodeerimise erinevustest

Millised märgid on kodeeritud?

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

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

Tegelastest A-Z a-z 0-9 - _ . ! ~ * ' ( )ei pääse.

Näited

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 

Millal kodeerida

  1. Sisendi vastuvõtmisel, millel võib olla tühikuid.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html 
  2. URL-i koostamisel päringustringi parameetritest.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99 
  3. Kui võetakse vastu päringuparameetreid, millel võivad olla reserveeritud märgid.

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

Kokkuvõte

Kui teil on täielik URL, kasutage encodeURI. Kuid kui teil on URL-i osa, kasutage encodeURIComponent.

Kas olete huvitatud minu käest veel õpetustest ja JSBytes-ist? Registreeru minu uudiskirja saamiseks. või jälgi mind Twitteris