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:

javascriptlet 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ố:

javascriptlet 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ố:

javascriptlet 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:

javascriptlet 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:

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

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

javascriptlet 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:

javascriptlet 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ố:

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

Kiểm tra sự thay đổi:

javascriptlet 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:

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

Kiểm tra sự thay đổi:

javascriptlet 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:

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

Kiểm tra sự thay đổi:

javascriptlet 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:

javascriptsearchParams.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:

javascriptlet 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ố:

javascriptsearchParams.delete('b');

Kiểm tra sự thay đổi:

javascriptlet 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:

javascriptfor (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:

javascriptlet 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:

javascriptlet 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:

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