Εργασία με το URLSearchParams στο JavaScript

Όπως ήδη γνωρίζετε, κατά την εργασία με φόρμες και GET αιτήματα στο JavaScript, προκύπτουν συμβολοσειρές της ακόλουθης μορφής:

javascriptlet paramsString = 'a=1&b=2&c=3';

Μερικές φορές χρειάζεται να αλλάξουμε μέσω προγραμματισμού την τιμή κάποιας παραμέτρου από αυτήν τη συμβολοσειρά. Το να γράφουμε κώδικα που το κάνει αυτό, δεν είναι πολύ βολικό. Για αυτό το λόγο, το JavaScript διαθέτει μια ειδική κλάση URLSearchParams για εργασία με τέτοιες συμβολοσειρές.

Ας δημιουργήσουμε ένα αντικείμενο αυτής της κλάσης, περνώντας ως παράμετρο τη συμβολοσειρά μας με τις παραμέτρους:

javascriptlet paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);

Ας δούμε ποιες μέθοδοι διαθέτει το αντικείμενο που δημιουργήσαμε.

Λήψη τιμής παραμέτρου

Χρησιμοποιώντας τη μέθοδο get μπορούμε να λάβουμε την τιμή μιας παραμέτρου:

javascriptlet res = searchParams.get('a');
console.log(res);

Ας προσπαθήσουμε να λάβουμε την τιμή μιας ανύπαρκτης παραμέτρου:

javascriptlet res = searchParams.get('x');
console.log(res); // θα εκτυπώσει null

Έλεγχος ύπαρξης παραμέτρου

Χρησιμοποιώντας τη μέθοδο has μπορούμε να ελέγξουμε την ύπαρξη μιας παραμέτρου. Ας ελέγξουμε μια υπάρχουσα παράμετρο:

javascriptlet res = searchParams.has('a');
console.log(res); // θα εκτυπώσει true

Ας ελέγξουμε μια ανύπαρκτη:

javascriptlet res = searchParams.has('x');
console.log(res); // θα εκτυπώσει false

Μετατροπή σε συμβολοσειρά

Χρησιμοποιώντας τη μέθοδο toString μπορούμε να μετατρέψουμε το αντικείμενό μας πάλι σε συμβολοσειρά:

javascriptlet res = searchParams.toString();
console.log(res); // θα εκτυπώσει 'a=1&b=2&c=3'

Αλλαγή παραμέτρων

Χρησιμοποιώντας τη μέθοδο set μπορούμε να αλλάξουμε την τιμή μιας παραμέτρου:

javascriptsearchParams.set('b', 'x');

Ας ελέγξουμε τις αλλαγές:

javascriptlet res = searchParams.toString();
console.log(res); // θα εκτυπώσει 'a=1&b=x&c=3'

Προσθήκη παραμέτρων

Χρησιμοποιώντας τη μέθοδο set μπορούμε επίσης να προσθέσουμε μια νέα παράμετρο:

javascriptsearchParams.set('d', '4');

Ας ελέγξουμε τις αλλαγές:

javascriptlet res = searchParams.toString();
console.log(res); // θα εκτυπώσει 'a=1&b=2&c=3&d=4'

Προσθήκη παραμέτρων

Χρησιμοποιώντας τη μέθοδο append μπορούμε επίσης να προσθέσουμε μια νέα παράμετρο:

javascriptsearchParams.append('d', '4');

Ας ελέγξουμε τις αλλαγές:

javascriptlet res = searchParams.toString();
console.log(res); // θα εκτυπώσει 'a=1&b=2&c=3&d=4'

Ας προσπαθήσουμε να προσθέσουμε μια υπάρχουσα παράμετρο:

javascriptsearchParams.append('a', '4');

Σε αυτήν την περίπτωση, η μέθοδός μας απλώς θα προσθέσει μια παράμετρο με το ίδιο όνομα στο τέλος:

javascriptlet res = searchParams.toString();
console.log(res); // θα εκτυπώσει 'a=1&b=2&c=3&a=4'

Σε αυτό εκδηλώνεται η διαφορά μεταξύ των μεθόδων set και append. Η πρώτη θα αλλάξει την υπάρχουσα παράμετρο, ενώ η δεύτερη απλώς θα προσθέσει το αντίγραφό της στο τέλος.

Διαγραφή παραμέτρων

Χρησιμοποιώντας τη μέθοδο delete μπορούμε να διαγράψουμε παραμέτρους:

javascriptsearchParams.delete('b');

Ας ελέγξουμε τις αλλαγές:

javascriptlet res = searchParams.toString();
console.log(res); // θα εκτυπώσει 'a=1&c=3'

Διάσχιση παραμέτρων με βρόχο

Οι παράμετροι μπορούν να διασχιστούν με βρόχο:

javascriptfor (let p of searchParams) {
  console.log(p);
}

Πολλές πανομοιότυπες παράμετροι

Ας υποθέσουμε ότι στη συμβολοσειρά μας υπάρχουν πολλές πανομοιότυπες παράμετροι:

javascriptlet paramsString = 'a=1&a=2b=2&c=3';

Χρησιμοποιώντας τη μέθοδο getAll μπορούμε να λάβουμε έναν πίνακα με τις τιμές αυτών των παραμέτρων:

javascriptlet res = searchParams.getAll('a');
console.dir(res); // θα εκτυπώσει [1, 2]

Πρακτικές ασκήσεις

Ας υποθέσουμε ότι δίνεται η ακόλουθη συμβολοσειρά με παραμέτρους:

javascriptlet paramsString = 'test1=param1&test2=param2&test3=param3';