Làm việc với URLSearchParams trong JavaScript

Như bạn đã biết, khi làm việc với biểu mẫu và các yêu cầu GET trong JavaScript, xuất hiện các chuỗi có dạng như sau:

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

Đôi khi cần thay đổi theo cách lập trình giá trị của một tham số bất kỳ từ chuỗi này. Viết code để thực hiện việc này không thuận tiện lắm. Vì vậy, JavaScript có sẵn một lớp đặc biệt URLSearchParams để làm việc với những chuỗi như vậy.

Hãy tạo một đối tượng của lớp này, truyền chuỗi tham số của chúng ta làm tham số:

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

Hãy xem những phương thức nào có ở đối tượng đã tạo.

Lấy giá trị của tham số

Với phương thức get có thể lấy được giá trị của tham số:

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

Hãy thử lấy giá trị của một tham số không tồn tại:

let res = searchParams.get('x');
console.log(res); // sẽ in ra null

Kiểm tra sự tồn tại của tham số

Với phương thức has có thể kiểm tra sự tồn tại của tham số. Hãy kiểm tra một tham số tồn tại:

let res = searchParams.has('a');
console.log(res); // sẽ in ra true

Kiểm tra tham số không tồn tại:

let res = searchParams.has('x');
console.log(res); // sẽ in ra false

Chuyển đổi thành chuỗi

Với phương thức toString có thể chuyển đổi đối tượng của chúng ta trở lại thành chuỗi:

let res = searchParams.toString();
console.log(res); // sẽ in ra 'a=1&b=2&c=3'

Thay đổi tham số

Với phương thức set có thể thay đổi giá trị của tham số:

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

Kiểm tra sự thay đổi:

let res = searchParams.toString();
console.log(res); // sẽ in ra 'a=1&b=x&c=3'

Thêm tham số

Với phương thức set cũng có thể thêm một tham số mới:

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

Kiểm tra sự thay đổi:

let res = searchParams.toString();
console.log(res); // sẽ in ra 'a=1&b=2&c=3&d=4'

Thêm tham số

Với phương thức append cũng có thể thêm một tham số mới:

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

Kiểm tra sự thay đổi:

let res = searchParams.toString();
console.log(res); // sẽ in ra 'a=1&b=2&c=3&d=4'

Hãy thử thêm một tham số đã tồn tại:

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

Trong trường hợp này, phương thức của chúng ta sẽ chỉ thêm một tham số cùng tên vào cuối:

let res = searchParams.toString();
console.log(res); // sẽ in ra 'a=1&b=2&c=3&a=4'

Điều này thể hiện sự khác biệt giữa các phương thức set và append. Phương thức đầu tiên sẽ thay đổi tham số tồn tại, còn phương thức thứ hai sẽ chỉ thêm một bản sao của nó vào cuối.

Xóa tham số

Với phương thức delete có thể xóa các tham số:

searchParams.delete('b');

Kiểm tra sự thay đổi:

let res = searchParams.toString();
console.log(res); // sẽ in ra 'a=1&c=3'

Lặp qua các tham số bằng vòng lặp

Có thể lặp qua các tham số bằng vòng lặp:

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

Nhiều tham số giống nhau

Giả sử trong chuỗi của chúng ta có nhiều tham số giống nhau:

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

Với phương thức getAll có thể lấy được một mảng các giá trị của những tham số này:

let res = searchParams.getAll('a');
console.dir(res); // sẽ in ra [1, 2]

Bài tập thực hành

Giả sử cho chuỗi tham số sau:

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

Thêm một tham số test3 nữa vào chuỗi này.

Xóa tham số test2 khỏi chuỗi này.

Thay đổi tham số test1 thành giá trị mới.