„JavaScript“ URL kodavimo pavyzdys - kaip naudoti encodeURIcomponent () ir encodeURI ()

Galima pagalvoti encodeURIir encodeURIComponentdaryti tą patį, bent jau iš jų vardų. Ir jūs galite būti supainiotas, kurį naudoti ir kada.

Šiame straipsnyje aš paaiškinsiu skirtumą tarp encodeURIir encodeURIComponent.

Kas yra URI ir kuo jis skiriasi nuo URL?

URI reiškia Uniform Resource Identifier.

URL reiškia Uniform Resource Locator.

Viskas, kas unikaliai identifikuoja išteklius, yra jo URI, pvz., ID, vardas ar ISBN numeris. URL nurodo šaltinį ir kaip jį galima pasiekti (protokolas). Visi URL yra URI, bet ne visi URI yra URL.

Kodėl turime koduoti?

URL gali būti tik tam tikri simboliai iš standartinio 128 simbolių ASCII rinkinio. Rezervuoti simboliai, nepriklausantys šiam rinkiniui, turi būti užkoduoti.

Tai reiškia, kad mes turime užkoduoti šiuos simbolius, kai pereiname į URL. Specialūs simboliai, pvz &, space, !kai įžengė į url reikia pabėgo, nes kitaip jie gali sukelti nenuspėjamas situacijas.

Naudojimo atvejai:

  1. Vartotojas pateikė vertes tokia forma, kuri gali būti eilutės formato ir kurią reikia perduoti, pvz., URL laukus.
  2. Norint pateikti GET užklausas, reikia priimti užklausos eilutės parametrus.

Kuo skiriasi encodeURI ir encodeURIComponent?

encodeURIir encodeURIComponentnaudojami vienodiems išteklių identifikatoriams (URI) koduoti pakeičiant tam tikrus simbolius viena, dviem, trimis ar keturiomis pabėgimo sekomis, žyminčiomis simbolio UTF-8 kodavimą.

encodeURIComponentturėtų būti naudojama URI komponentui - eilutei, kuri turėtų būti URL dalis, užkoduoti .

encodeURIturėtų būti naudojamas URI arba esamam URL koduoti .

Čia pateikiama patogi lentelė, kurioje pateikiamas simbolių kodavimo skirtumas

Kurie simboliai yra užkoduoti?

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

encodeURIComponent() nekoduos: ~!*()'

Personažai A-Z a-z 0-9 - _ . ! ~ * ' ( )nėra pabėgo.

Pavyzdžiai

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 koduoti

  1. Priimant įvestį, kurioje gali būti tarpų.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html 
  2. Kuriant URL iš užklausos eilutės parametrų.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99 
  3. Priimant užklausos parametrus, kuriuose gali būti rezervuotų simbolių.

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

Santrauka

Jei turite išsamų URL, naudokite encodeURI. Bet jei turite URL dalį, naudokite encodeURIComponent.

Domina daugiau mano vadovėlių ir „JSBytes“? Užsisakykite mano naujienlaiškį. arba sekite mane „Twitter“