Παράδειγμα κωδικοποίησης διεύθυνσης URL JavaScript - Τρόπος χρήσης encodeURIcomponent () και encodeURI ()

Ίσως να το πιστεύετε encodeURIκαι να encodeURIComponentκάνετε το ίδιο πράγμα, τουλάχιστον από τα ονόματά τους. Και μπορεί να μπερδευτείτε ποιο να χρησιμοποιήσετε και πότε.

Σε αυτό το άρθρο, θα απομυθοποιήσω τη διαφορά μεταξύ encodeURIκαι encodeURIComponent.

Τι είναι το URI και πώς διαφέρει από ένα URL;

Το URI σημαίνει Uniform Resource Identifier.

Το URL σημαίνει Uniform Resource Locator.

Οτιδήποτε προσδιορίζει με μοναδικό τρόπο έναν πόρο είναι το URI του, όπως αναγνωριστικό, όνομα ή αριθμός ISBN. Μια διεύθυνση URL καθορίζει έναν πόρο και πώς μπορεί να έχει πρόσβαση (το πρωτόκολλο). Όλες οι διευθύνσεις URL είναι URI, αλλά δεν είναι όλες οι διευθύνσεις URL.

Γιατί πρέπει να κωδικοποιήσουμε;

Οι διευθύνσεις URL μπορούν να έχουν μόνο ορισμένους χαρακτήρες από το τυπικό σετ 128 χαρακτήρων ASCII. Οι δεσμευμένοι χαρακτήρες που δεν ανήκουν σε αυτό το σύνολο πρέπει να κωδικοποιηθούν.

Αυτό σημαίνει ότι πρέπει να κωδικοποιήσουμε αυτούς τους χαρακτήρες κατά τη μετάβαση σε μια διεύθυνση URL. Ειδικούς χαρακτήρες, όπως &, space, !όταν εισήλθε στην ανάγκη url να διαφύγει, αλλιώς μπορεί να προκαλέσει απρόβλεπτες καταστάσεις.

Περίπτωση χρήσης:

  1. Ο χρήστης έχει υποβάλει τιμές σε μια φόρμα που μπορεί να είναι σε μορφή συμβολοσειράς και πρέπει να διαβιβαστεί, όπως πεδία διεύθυνσης URL.
  2. Πρέπει να αποδεχτείτε τις παραμέτρους συμβολοσειράς ερωτήματος για να υποβάλετε αιτήματα GET.

Ποια είναι η διαφορά μεταξύ encodeURI και encodeURIComponent;

encodeURIκαι encodeURIComponentχρησιμοποιούνται για την κωδικοποίηση Uniform Resource Identifiers (URIs) αντικαθιστώντας ορισμένους χαρακτήρες με μία, δύο, τρεις ή τέσσερις ακολουθίες διαφυγής που αντιπροσωπεύουν την κωδικοποίηση UTF-8 του χαρακτήρα.

encodeURIComponentθα πρέπει να χρησιμοποιηθεί για την κωδικοποίηση ενός URI Component - μια συμβολοσειρά που υποτίθεται ότι αποτελεί μέρος μιας διεύθυνσης URL.

encodeURIθα πρέπει να χρησιμοποιηθεί για την κωδικοποίηση ενός URI ή ενός υπάρχοντος URL.

Ακολουθεί ένας εύχρηστος πίνακας για τη διαφορά στην κωδικοποίηση χαρακτήρων

Ποιοι χαρακτήρες κωδικοποιούνται;

encodeURI() δεν θα κωδικοποιήσει: [email protected]#$&*()=:/,;?+'

encodeURIComponent() δεν θα κωδικοποιήσει: ~!*()'

Οι χαρακτήρες A-Z a-z 0-9 - _ . ! ~ * ' ( )δεν ξεφεύγουν.

Παραδείγματα

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

Πότε να κωδικοποιηθεί

  1. Κατά την αποδοχή μιας εισόδου που μπορεί να έχει κενά.

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

  2. Κατά τη δημιουργία ενός URL από παραμέτρους συμβολοσειράς ερωτήματος.

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

  3. Κατά την αποδοχή παραμέτρων ερωτήματος που ενδέχεται να έχουν δεσμευμένους χαρακτήρες.

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

Περίληψη

Εάν έχετε μια πλήρη διεύθυνση URL, χρησιμοποιήστε encodeURI. Αλλά αν έχετε ένα μέρος μιας διεύθυνσης URL, χρησιμοποιήστε το encodeURIComponent.

Ενδιαφέρεστε για περισσότερα σεμινάρια και JSBytes από εμένα; Εγγραφείτε στο newsletter μου. ή ακολουθήστε με στο Twitter