Thao tác với URL dễ dàng bằng URLSearchParams

API URLSearchParams cung cấp một giao diện nhất quán cho các bit và đoạn của URL, đồng thời cho phép thao tác đơn giản đối với chuỗi truy vấn (nội dung sau ?).

Theo truyền thống, các nhà phát triển sử dụng biểu thức chính quy và tính năng phân tách chuỗi để lấy các tham số truy vấn từ URL. Nếu chúng ta thành thật với chính mình, thì đó không phải là điều thú vị. Việc này có thể rất tẻ nhạt và dễ xảy ra lỗi. Một trong những bí mật thầm kín của tôi là tôi đã sử dụng lại cùng một phương thức trợ giúp get|set|removeURLParameter trong một số ứng dụng lớn của Google.com, bao gồm cả Google Santa Tracker và trang web Google I/O 2015.

Đã đến lúc sử dụng một API thích hợp để thực hiện việc này!

URLSearchParams API

Dùng thử bản minh hoạ

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 coi URLSearchParams là một phương thức tương đương với URL, cũng như FormData là một phương thức tương đương với biểu mẫu.

Vậy bạn có thể làm gì với thông tin này? Với 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 một giá trị thông số:

params.set('version', 2);

Thêm một giá trị khác cho một tham số hiện có:

params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']

xoá(các) tham 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 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ế đối với 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 một URL đã cập nhật từ đường dẫn URL hiện tại của ứng dụng và các tham số được sửa đổi.

Tích hợp với các địa điểm 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 nhiều phần. Nếu bạn cần, URLSearchParams sẽ cung cấp một cơ chế thay thế cho dữ liệu POST được mã hoá URL thay vì mime nhiều phần.

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ợ bạn đồng hành mới của chúng ta bằng cách cung cấp một thuộc tính chỉ có thể đọ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 có 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 polyfill, bạn nên sử dụng polyfill tại github.com/WebReflection/url-search-params.

Bản minh hoạ

Hãy thử mẫu này!

Để xem URLSearchParams trong một ứng dụng thực tế, hãy tham khảo Trình tạo biểu tượng Material Design của Polymer. Tôi đã sử dụng mã này để thiết lập trạng thái ban đầu của ứng dụng từ một liên kết sâu. Rất hữu ích :)