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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

searchParams.delete('b');

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

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

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

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

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

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

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

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

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

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

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

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

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

Προσθέστε σε αυτήν τη συμβολοσειρά μια ακόμη παράμετρο test3.

Διαγράψτε από αυτήν τη συμβολοσειρά την παράμετρο test2.

Αλλάξτε την παράμετρο test1 σε μια νέα τιμή.