Mã Hóa URL và Query String: Hướng Dẫn Thực Tế

URL chỉ cho phép một tập ký tự hạn chế trong đường dẫn và query. Tất cả những gì còn lại đều phải được percent-encoded (ví dụ: khoảng trắng → %20, & → %26). Nếu làm sai, bạn sẽ gặp lỗi 404, hỏng thẻ analytics và các lỗi API khó phát hiện.

Những gì cần được mã hóa?

• Giá trị query chứa khoảng trắng, &, =, #, hoặc văn bản không phải ASCII (emoji, ký tự có dấu) đều phải được mã hóa.
• Các đoạn đường dẫn có dấu gạch chéo hoặc ký tự đặc biệt cũng cần mã hóa—nếu không, router sẽ hiểu sai điểm kết thúc của từng đoạn.

Trình duyệt thường hiển thị URL "đẹp" trên thanh địa chỉ trong khi thực tế gửi đi dạng đã được mã hóa. Tuy nhiên, API yêu cầu bạn phải mã hóa tường minh khi tự xây dựng chuỗi bằng tay.

encodeURIComponent so với encodeURI

Trong JavaScript:

• encodeURIComponent — Dùng cho giá trị tham số query (và thường cả khóa). Nó mã hóa hầu hết mọi thứ có thể làm hỏng URL.
• encodeURI — Chỉ dùng cho toàn bộ URL khi bạn cần giữ nguyên các ký tự phân cách như ? và #. Hiếm khi dùng trong công việc API hằng ngày.

const q = "hello world & friends";
const params = new URLSearchParams({ q });
console.log(params.toString()); // q=hello+world+%26+friends

URLSearchParams xử lý mã hóa theo chuẩn application/x-www-form-urlencoded và được ưu tiên hơn so với việc nối chuỗi thủ công.

Xây dựng URL với nhiều tham số

Khi bạn thêm UTM tag, bộ lọc hoặc API key, sai lầm dễ xảy ra: trùng dấu ?, & chưa được mã hóa, hoặc thứ tự tham số không rõ ràng. Một hàm tiện ích nhỏ—hoặc một công cụ xây dựng trực quan—giúp chuỗi cuối cùng luôn hợp lệ.

Hãy thử công cụ URL Encode / Decode của chúng tôi để kiểm tra sự thay đổi của chuỗi, và URL & Query String Builder để lắp ráp một link hoàn chỉnh với mã hóa an toàn UTF-8.

cURL và fetch

Khi sao chép request từ devtools của trình duyệt, hãy chú ý đến các query string đã được mã hóa sẵn. Dán chúng vào code đôi khi gây ra tình trạng mã hóa kép. Công cụ cURL to fetch() của chúng tôi giúp bạn chuyển đổi cURL đang hoạt động sang JavaScript trong khi vẫn kiểm tra URL riêng biệt.

Nếu một link "hoạt động trên Chrome" nhưng lại lỗi trong script của bạn, hãy so sánh chuỗi query thô từng byte một.

Danh sách kiểm tra nhanh

• Mã hóa giá trị trước khi nối vào ?a=...&b=...
• Ưu tiên dùng URL + URLSearchParams thay vì tự xây dựng chuỗi thủ công
• Với tên miền quốc tế hóa (IDN), trình duyệt tự xử lý punycode trong hostname—hãy tập trung mã hóa vào phần đường dẫn và query