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

URLSearchParams

Η URLSearchParams Η διεπαφή υποστηρίζεται από όλες τις μεγάλες εκδόσεις του προγράμματος περιήγησης εκτός από το IE 11. Λειτουργεί αναλύοντας τη συμβολοσειρά ερωτήματος μιας διεύθυνσης URL και παρέχοντας έναν τρόπο πρόσβασης στις τιμές. Για παράδειγμα:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page'); 

Ένα από τα μειονεκτήματα αυτής της διεπαφής είναι ότι πρέπει να της μεταβιβάσετε μόνο τη συμβολοσειρά ερωτήματος μιας διεύθυνσης URL. Εάν εργάζεστε με την τρέχουσα διεύθυνση URL του προγράμματος περιήγησης, είναι εύκολο να το κάνετε, καθώς μπορείτε απλώς να περάσετε window.location.search. Εάν εργάζεστε με οποιαδήποτε άλλη διεύθυνση URL, θα πρέπει να αναλύσετε και να περάσετε τη συμβολοσειρά ερωτήματος ξεχωριστά.

Για να αναλύσετε τις παραμέτρους του ερωτήματος σε ένα αντικείμενο, χρησιμοποιήστε URL.searchParams'μικρό .entries() μέθοδο, η οποία επιστρέφει an Iterator ζευγών κλειδιών/τιμών και Object.fromEntries για να το μετατρέψετε σε αντικείμενο.

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries); 

Αντικείμενο URL

Η URL Το API υποστηρίζεται επίσης από όλες τις μεγάλες εκδόσεις του προγράμματος περιήγησης εκτός από το IE 11. Προσφέρει έναν πιο ευέλικτο τρόπο ανάλυσης διευθύνσεων URL και παρέχει επίσης έναν τρόπο πρόσβασης στις τιμές συμβολοσειράς ερωτήματος. Για παράδειγμα:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page'); 

url.searchParams είναι ο ίδιος τύπος αντικειμένου στιγμιότυπου που επιστρέφεται από URLSearchParams.

Η url Το παραπάνω αντικείμενο έχει επίσης όλα τα μέρη της διεύθυνσης URL χωρισμένα στα μέρη του. Για παράδειγμα:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash; 

Καθαρή JavaScript

Εάν για οποιονδήποτε λόγο δεν μπορείτε να αποκτήσετε πρόσβαση στα παραπάνω API ή θέλετε να έχετε περισσότερο έλεγχο στην ανάλυση, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα για να αναλύσετε τη συμβολοσειρά ερωτήματος σε ένα αντικείμενο.

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

Note: Υπάρχουν πολλοί τρόποι ανάλυσης παραμέτρων ερωτήματος σε απλό JS, κάποιοι πιο περίπλοκοι (και ισχυροί) από άλλους. Αυτός είναι μόνο ένας τρόπος και προσαρμόστηκε αυτή η ουσία.

Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε αυτήν την απλή συνάρτηση JS για να αναλύσουμε μια παράμετρο ερωτήματος σε μια συμβολοσειρά:

getQueryParams('https://stackabuse.com/search?q=node&page=2')