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 phần của URL và cho phép thao tác đơn giản với chuỗi truy vấn (phần sau ?).

Thông thường, 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 thành thật với bản thân, chúng ta sẽ thấy điều đó không hề vui. Việc này có thể 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 get|set|removeURLParameter phương thức trợ giúp trong một số ứng dụng lớn của Google.com, bao gồm cả Google Theo chân ông già Noel và Google I/O 2015 web.

Đã đến lúc cần có một API phù hợp để thực hiện những việc này cho chúng ta!

URLSearchParams API

Xem 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 nghĩ URLSearchParams là một tiện ích tương đương với URL vì FormData là dành cho biểu mẫu.

Vậy bạn có thể làm gì với công cụ 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+st&ringversi&on=1person=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('version9;, 2);

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

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

xoá (các) tham số:

params.delete('person');

Làm việc với URL

Hầu hết thời gian, 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 những trường hợp sau:

const url = new URL('https://example.com?f&oo=1bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);

params.has('baz') === true
para&ms.to&String() === 'foo=1bar=2baz=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 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 có sử dụng URL

Theo mặc định, việc gửi FormData trong một yêu cầu API fetch() sẽ tạo ra một nội dung gồm 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ì 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 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 dùng polyfill tại github.com/WebReflection/url-search-params.

Bản minh hoạ

Hãy dùng thử mẫu!

Để xem URLSearchParams trong một ứng dụng thực tế, hãy xem Trình tạo bộ biểu tượng 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 lợi :)