API URLSearchParams cung cấp giao diện nhất quán với các bit và đoạn của URL, đồng thời cho phép thao tác đơn giản với chuỗi truy vấn (nội dung sau ?).
Thông thường, các nhà phát triển sử dụng biểu thức chính quy và phân tách chuỗi để lấy tham số truy vấn từ URL. Nếu chúng ta thành thật với mình, thì thật chẳng vui chút nào.
Việc này có thể rất tẻ nhạt và dễ mắc lỗi. Một trong những bí mật đen tối của tôi là tôi đã sử dụng lại cùng một các phương thức trợ giúp get|set|removeURLParameter trong một số ứng dụng lớn trên Google.com, bao gồm cả Google Theo chân ông già Noel và web của Google I/O 2015.
Đã đến lúc sử dụng một API thích hợp để giúp chúng ta xử lý việc này!
API URLSearchParams
Chrome 49 triển khai URLSearchParams từ thông số kỹ thuật URL, một API hữu ích để xử lý các tham số truy vấn
URL. Tôi nghĩ URLSearchParams là một sự tiện lợi tương đương với URL
khác với FormData đối với biểu mẫu.
Vậy bạn có thể làm gì với tài khoản đó? Khi có một chuỗi URL, bạn có thể dễ dàng trích xuất các giá trị tham số:
// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');
params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3
for (let p of params) {
console.log(p);
}
đặt giá trị thông số:
params.set('version', 2);
append một giá trị khác cho thông số hiện có:
params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']
xóa(các) thông số:
params.delete('person');
Làm việc với URL
Trong hầu hết trường hợp, bạn có thể sẽ làm việc với các URL đầy đủ hoặc sửa đổi URL của ứng dụng. Hàm khởi tạo URL có thể đặc biệt hữu ích trong các trường hợp sau:
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);
params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=3'
Để thực hiện các thay đổi thực tế cho URL, bạn có thể lấy các tham số, cập nhật giá trị của các tham số đó,
sau đó sử dụng history.replaceState để cập nhật URL.
// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0
Ở đây, tôi đã sử dụng chuỗi mẫu ES6 để tạo lại URL cập nhật từ đường dẫn URL hiện có của ứng dụng và các tham số đã sửa đổi.
Tích hợp với những nơi khác, URL được sử dụng
Theo mặc định, việc gửi FormData trong yêu cầu API fetch() sẽ tạo một nội dung gồm nhiều phần.
Nếu cần, URLSearchParams sẽ cung cấp một cơ chế thay thế để POST dữ liệu được mã hoá url thay vì nhiều phần MIME.
const params = new URLSearchParams();
params.append('api_key', '1234567890');
fetch('https://example.com/api', {
method: 'POST',
body: params
}).then(...)
Mặc dù chưa được triển khai trong Chrome, nhưng URLSearchParams cũng tích hợp với hàm khởi tạo URL và thẻ a. Cả hai đều hỗ trợ người bạn mới của chúng ta bằng cách cung cấp
thuộc tính chỉ đọc, .searchParams để truy cập vào các tham số truy vấn:
const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';
Đường liên kết cũng nhận một thuộc tính .searchParams:
const a = document.createElement('a');
a.href = 'https://example.com?filter=api';
// a.searchParams.get('filter') === 'api';
Phát hiện tính năng và hỗ trợ trình duyệt
Hiện tại, Chrome 49, Firefox 44 và Opera 36 hỗ trợ URLSearchParams.
if ('URLSearchParams' in window) {
// Browser supports URLSearchParams
}
Đối với các đoạn mã polyfill, bạn nên dùng mã này tại github.com/WebReflection/url-search-params.
Bản minh hoạ
Hãy thử mẫu!
Để xem URLSearchParams trong một ứng dụng thực tế, hãy xem Trình tạo biểu tượng bộ biểu tượng thiết kế Material Design của Polymer. Tôi đã dùng nó để thiết lập trạng thái ban đầu của ứng dụng từ một đường liên kết sâu. Khá tiện dụng :)