URLSearchParams trong JavaScript

URLSearchParams trong JavaScript là một đối tượng được sử dụng để làm việc với các chuỗi query string trong URL. Nó cho phép bạn dễ dàng lấy, thêm, sửa, và xóa các tham số trong query string của URL.

Cấu trúc của URL Query String
Tạo đối tượng URLSearchParams
Các phương thức của URLSearchParams
Một số kinh nghiêm chia sẽ về URLSearchParams

1. Cấu trúc của URL Query String

URL thường có dạng:
https://example.com/page?name=John&age=30&city=NewYork

Ở đây, name=John, age=30, và city=NewYork là các tham số query string. Chúng nằm sau dấu ? và được phân tách bằng dấu &.

2. Tạo đối tượng URLSearchParams

Để tạo một đối tượng URLSearchParams, bạn có thể sử dụng chuỗi query string từ URL hoặc tự tạo ra một chuỗi tham số.

// Tạo đối tượng URLSearchParams từ query string
let params = new URLSearchParams('name=John&age=30&city=NewYork');
console.log(params);

3. Các phương thức của URLSearchParams

Dưới đây là các phương thức phổ biến của đối tượng URLSearchParams:

get() - Lấy giá trị của một tham số

Dùng để lấy giá trị của tham số query string theo tên.

let params = new URLSearchParams('name=John&age=30&city=NewYork');
let name = params.get('name');
console.log(name); // Output: John

Nếu tham số không tồn tại, phương thức sẽ trả về null.

set() - Thiết lập giá trị cho tham số

Dùng để thay đổi giá trị của một tham số nếu tham số đó đã tồn tại, hoặc thêm mới tham số nếu chưa có.

let params = new URLSearchParams('name=John&age=30');
params.set('age', '31'); // Thay đổi giá trị của 'age'
params.set('city', 'NewYork'); // Thêm tham số mới 'city'
console.log(params.toString()); // Output: name=John&age=31&city=NewYork

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

Dùng để kiểm tra xem một tham số có tồn tại trong query string hay không.

let params = new URLSearchParams('name=John&age=30');
console.log(params.has('name')); // Output: true
console.log(params.has('city')); // Output: false

delete() - Xóa tham số

Dùng để xóa một tham số khỏi query string.

let params = new URLSearchParams('name=John&age=30');
params.delete('age');
console.log(params.toString()); // Output: name=John

append() - Thêm một giá trị vào tham số

Dùng để thêm giá trị mới vào một tham số. Nếu tham số đó đã tồn tại, nó sẽ giữ nguyên các giá trị cũ và thêm giá trị mới vào cuối.

let params = new URLSearchParams('name=John&age=30');
params.append('age', '31'); // Thêm giá trị mới vào tham số 'age'
console.log(params.toString()); // Output: name=John&age=30&age=31

getAll() - Lấy tất cả giá trị của một tham số

Nếu tham số có nhiều giá trị, bạn có thể lấy tất cả giá trị của tham số đó.

let params = new URLSearchParams('age=30&age=31');
let allAges = params.getAll('age');
console.log(allAges); // Output: ['30', '31']

keys(), .values(), .entries()

Lấy danh sách các tham số và giá trị

    .keys(): Trả về danh sách các tên tham số.
    .values(): Trả về danh sách các giá trị của các tham số.
    .entries(): Trả về một bộ giá trị [key, value] cho mỗi tham số.

let params = new URLSearchParams('name=John&age=30&city=NewYork');

// keys() - lấy tên các tham số
for (let key of params.keys()) {
console.log(key); // name, age, city
}

// values() - lấy giá trị của các tham số
for (let value of params.values()) {
console.log(value); // John, 30, NewYork
}

// entries() - lấy cả tên và giá trị của tham số
for (let entry of params.entries()) {
console.log(entry); // ['name', 'John'], ['age', '30'], ['city', 'NewYork']
}

forEach() - Duyệt qua tất cả các tham số

Dùng để lặp qua tất cả các tham số và giá trị của chúng.

let params = new URLSearchParams('name=John&age=30&city=NewYork');
params.forEach((value, key) => {
console.log(key, value);
});
// Output:
// name John
// age 30
// city NewYork

toString() - Chuyển đổi thành chuỗi query string

Dùng để chuyển đối tượng URLSearchParams thành chuỗi query string.

let params = new URLSearchParams();
params.set('name', 'John');
params.set('age', '30');
console.log(params.toString()); // Output: name=John&age=30

Ví dụ về URLSearchParams với URL

Giả sử bạn có URL sau và muốn làm việc với các tham số trong URL:

let url = 'https://example.com/page?name=John&age=30&city=NewYork';
let params = new URLSearchParams(url.split('?')[1]);

// Lấy tham số 'name'
console.log(params.get('name')); // Output: John

// Thêm một tham số mới
params.set('country', 'USA');
console.log(params.toString()); // Output: name=John&age=30&city=NewYork&country=USA

4. Một số kinh nghiêm chia sẽ về URLSearchParams

URLSearchParams là một công cụ mạnh mẽ giúp bạn dễ dàng làm việc với các tham số trong query string của URL. Các phương thức chính của URLSearchParams như .get(), .set(), .delete(), .has(), và .append() giúp bạn truy xuất và thao tác với các tham số một cách hiệu quả và đơn giản.

Tìm kiếm: