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à phần của URL, đồng thời cho phép thao tác nhỏ với chuỗi truy vấn (những 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 giá trị tham số:

params.set('version', 2);

append 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 có của ứng dụng và các tham số đã sửa đổi.

Tích hợp với các URL của những địa điểm khác đượ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 dùng thử mẫu này!

Để xem URLSearchParams trong một ứng dụng thực tế, hãy xem Trình tạo bộ biểu tượng thiết kế Material của Polymer. Tôi đã sử 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. Rất hữu ích :)