Nhận giá trị chuỗi truy vấn trong JavaScript

Trong URL, các giá trị chuỗi truy vấn thường cung cấp thông tin về yêu cầu, như các tham số cho tìm kiếm hoặc ID của đối tượng bạn đang sử dụng. Nếu bất kỳ logic yêu cầu hoặc nghiệp vụ nào được xử lý trong giao diện người dùng, điều quan trọng là phải biết cách truy xuất các giá trị chuỗi truy vấn từ URL. Có một số cách để đạt được điều này, một vài cách trong số đó chúng ta sẽ thấy ở đây.

URLTìm kiếmThông số

Sản phẩm URLSearchParams giao diện được hỗ trợ bởi tất cả các phiên bản trình duyệt chính ngoại trừ IE 11. Nó hoạt động bằng cách phân tích cú pháp chuỗi truy vấn của một URL và cung cấp một cách để truy cập các giá trị. Ví dụ:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page'); 

Một trong những nhược điểm của giao diện này là bạn phải chuyển nó chỉ chuỗi truy vấn của một URL. Nếu bạn đang làm việc với URL của trình duyệt hiện tại, điều đó rất dễ thực hiện vì bạn chỉ cần vượt qua window.location.search. Nếu bạn đang làm việc với bất kỳ URL nào khác, bạn cần phải phân tích cú pháp và chuyển chuỗi truy vấn riêng.

Để phân tích cú pháp các tham số truy vấn thành một đối tượng, hãy sử dụng URL.searchParams'S .entries() phương thức, trả về một Iterator trong số các cặp khóa / giá trị và Object.fromEntries để chuyển đổi nó thành một đối tượng.

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries); 

Đối tượng URL

Sản phẩm URL API cũng được hỗ trợ bởi tất cả các phiên bản trình duyệt chính ngoại trừ IE 11. Nó cung cấp một cách linh hoạt hơn để phân tích cú pháp URL và nó cũng cung cấp một cách để truy cập các giá trị chuỗi truy vấn. Ví dụ:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page'); 

url.searchParams là cùng một loại đối tượng thể hiện được trả về bởi URLSearchParams.

Sản phẩm url đối tượng trên cũng có tất cả các phần của URL được chia thành các phần của nó. Ví dụ:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash; 

JavaScript thuần túy

Nếu vì bất kỳ lý do gì mà bạn không thể truy cập các API ở trên hoặc muốn có nhiều quyền kiểm soát hơn đối với việc phân tích cú pháp, bạn có thể sử dụng mã sau để phân tích cú pháp chuỗi truy vấn thành một đối tượng.

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

Chú thích: Có nhiều cách để phân tích cú pháp các tham số truy vấn trong JS thuần túy, một số cách phức tạp hơn (và mạnh mẽ) hơn các cách khác. Đây chỉ là một cách và được điều chỉnh từ ý chính này.

Sau đó, chúng ta có thể sử dụng hàm JS đơn giản này để phân tích cú pháp một tham số truy vấn thành một chuỗi:

getQueryParams('https://stackabuse.com/search?q=node&page=2')