Lập trình · 25/09/2026

JavaScript URLSearchParams: Tạo tham số URL mà không lỗi dấu cộng và ký tự đặc biệt

Một ô tìm kiếm hoạt động tốt với từ “linux” nhưng trả kết quả lạ khi người dùng nhập “C++ & Linux”. Nếu ứng dụng ghép chuỗi URL bằng tay, dấu cộng và dấu & có thể không còn được hiểu là một phần của từ khóa. URLSearchParams giúp xây dựng tham số rõ ràng hơn, nhưng vẫn cần thống nhất cách xử lý dữ liệu với backend.

1. Truyền giá trị gốc, không tự ghép dấu phân cách

Ví dụ JavaScript dưới đây chỉ tạo URL và in ra màn hình, không gửi request. example.com là tên miền minh họa.

const url = new URL('/search', 'https://example.com');
url.searchParams.set('q', 'C++ & Linux');
url.searchParams.set('page', '1');

console.log(url.search);
console.log(url.searchParams.get('q'));

Kết quả mong đợi của search là ?q=C%2B%2B+%26+Linux&page=1; đọc lại q cho chuỗi C++ & Linux. Theo tài liệu URLSearchParams của MDN, API xử lý mã hóa khi tuần tự hóa tham số, còn giá trị truyền vào set hoặc append nên là giá trị chưa mã hóa.

Không chạy encodeURIComponent cho từ khóa trước rồi truyền kết quả vào set. Làm vậy có thể mã hóa lần nữa dấu % và khiến máy chủ nhận chuỗi khác mong muốn.

2. Phân biệt một giá trị và nhiều giá trị

const filters = new URLSearchParams();
filters.append('tag', 'linux');
filters.append('tag', 'bash');

console.log(filters.get('tag'));    // linux
console.log(filters.getAll('tag')); // ['linux', 'bash']

filters.set('tag', 'network');
console.log(filters.getAll('tag')); // ['network']

append thêm một cặp mới; set thay giá trị và loại các giá trị khác cùng tên. get chỉ lấy giá trị đầu, còn getAll lấy danh sách. Đây là hành vi phía JavaScript; backend cần hỗ trợ cùng quy ước, vì mỗi framework có thể diễn giải tham số lặp khác nhau.

3. Đừng đưa cả URL vào constructor của tham số

Khi đầu vào là URL đầy đủ, tạo đối tượng URL trước rồi dùng thuộc tính searchParams. URLSearchParams nhận phần query, không phải bộ phân tích toàn bộ địa chỉ.

const incoming = new URL('https://example.com/search?q=linux');
const keyword = incoming.searchParams.get('q');
console.log(keyword); // linux

Nếu đầu vào có thể sai định dạng, xử lý lỗi tạo URL ở ranh giới nhận dữ liệu. Việc phân tích thành công không chứng minh địa chỉ đó là đích được phép truy cập.

4. Thống nhất giá trị thiếu, rỗng và số

Tham số URL là dữ liệu bên ngoài. Với page, hãy xác định số nguyên tối thiểu, giới hạn tối đa và cách xử lý giá trị không hợp lệ. Với q, phân biệt không có tham số với tham số có chuỗi rỗng nếu sản phẩm cần điều đó.

Mã hóa URL không phải mã hóa bảo mật. Không đưa mật khẩu hay token bí mật vào query chỉ vì chúng đã có dạng %xx; URL có thể xuất hiện trong lịch sử, log và công cụ theo dõi. Backend vẫn phải kiểm tra đầu vào và quyền truy cập.

5. Checklist kiểm tra cả hai đầu

Từ khóa có khoảng trắng, dấu cộng, dấu &, dấu # và tiếng Việt được đọc lại đúng.
Tham số lặp được backend nhận thành danh sách theo hợp đồng.
Giá trị thiếu, chuỗi rỗng và số không hợp lệ có kết quả cụ thể.
Không mã hóa thủ công trước set hoặc append.
Kiểm thử request thật trong môi trường thử nghiệm, không chỉ nhìn URL trên Console.

URLSearchParams giải quyết việc biểu diễn tham số, không quyết định nghiệp vụ. Kết hợp API này với hợp đồng đầu vào rõ ràng giúp các bộ lọc và liên kết tìm kiếm hoạt động nhất quán hơn.