Trong một URL, các giá trị chuỗi truy vấn thường cung cấp thông tin về yêu cầu, chẳng hạn như 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ý ở 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 trong số đó chúng ta sẽ thấy ở đây
URLTìm kiếmThông số
Giao diện URLSearchParams đượ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 cách truy cập các giá trị. Ví dụ
Một trong những nhược điểm của giao diện này là bạn chỉ phải truyền cho nó chuỗi truy vấn của một URL. Nếu bạn đang làm việc với URL trình duyệt hiện tại, điều đó rất dễ thực hiện vì bạn chỉ cần chuyển window.location.search. Nếu bạn đang làm việc với bất kỳ URL nào khác, bạn sẽ cần phân tích cú pháp và chuyển chuỗi truy vấn một cách riêng biệt
Để 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 phương thức .entries() của URL.searchParams, trả về một Iterator cặp khóa/giá trị và Object.fromEntries để chuyển đổi nó thành một đối tượng
Đối tượng URL
API URL 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ụ
url.searchParams là cùng một loại đối tượng thể hiện được trả về bởi URLSearchParams
Đối tượng URLSearchParams0 ở 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ụ
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 đoạn 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; }Ghi chú. Có nhiều cách để phân tích các tham số truy vấn trong JS đơn giản, một số 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
Phương thức split tách một chuỗi thành một mảng các chuỗi bằng cách tách nó thành các chuỗi con. Công cụ này cực kỳ hữu ích. Ví dụ: chúng tôi sẽ tách các tham số chuỗi truy vấn của một URL
var url = "//www.example.com/category/page?query=true&query2=false"; // Split off the query string parameters var query = url.split("?")[1]; // "query=true&query2=false" // Now split up the params var params = query.split("&"); // ["query=true", "query2=false"] // Loop through the params and split the key and the value for (var i=0; i < params.length; i++) { console.log(params[i].split("=")[0], params[i].split("=")[1]); } // query true // query2 falseChia sẻ
FacebookRedditTwitterPinterestEmailText message
Yêu thích
TIẾP THEO
Cách Làm Bánh Sandwich Ăn Sáng Ngon Nhất
Ăn chúng, đông lạnh chúng, thưởng thức chúng cả tuần
Ngày 21 tháng 8 năm 2021
35 phút
Không có gì nói chào buổi sáng giống như một chiếc bánh sandwich ăn sáng. Từ độ dẻo của bánh muffin đến độ xốp của trứng đến độ dẻo của phô mai, bánh mì ăn sáng là một khởi đầu tuyệt vời cho buổi sáng của bạn
Để lấy phần cuối cùng của URL trong JavaScript, hãy sử dụng .split('/') để chia chuỗi URL thành một mảng của mỗi phần, sau đó sử dụng .at(-1) để lấy phần cuối cùng từ mảng
Ví dụ
JavaScriptĐã sao chép.
function getLastPart(url) { const parts = url.split('/'); return parts.at(-1); } const url1 = '//codingbeautydev.com/blog/javascript-get-last-part-of-url'; console.log(getLastPart(url1)); // javascript-get-last-part-of-url const url2 = '//codingbeautydev.com/blog'; console.log(getLastPart(url2)); // blog const url3 = '//codingbeautydev.com'; console.log(getLastPart(url3)); // codingbeautydev.com
Phương thức Array split() nhận một ký tự và tách một chuỗi thành một mảng các chuỗi con được phân tách bởi ký tự đó trong chuỗi. Các phân đoạn của URL được phân tách bằng ký tự /, vì vậy chúng tôi chuyển ký tự này cho split() để tạo một mảng với mỗi phân đoạn URL là một phần tử
JavaScriptĐã sao chép.
console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
Sau khi lấy mảng này, chúng ta sử dụng phương thức Array
console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
1 để lấy một phần tử từ nó.console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
2 là phần bổ sung ES2022 mới chấp nhận cả số nguyên dương và số âmTruyền số nguyên âm cho
console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
1 làm cho nó được tính từ cuối mảng, vì vậyconsole.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
4 đưa ra phần tử đầu tiên từ cuối (phần tử cuối cùng) – phần cuối cùng của URLJavaScriptĐã sao chép.
Đăng ký bản tin Coding Beauty
Có được những hiểu biết hữu ích và nâng cao kiến thức phát triển web của bạn với các mẹo và hướng dẫn hàng tuần từ Coding Beauty. Hơn 2.000 nhà phát triển đăng ký
Xóa phần cuối của URL
Bạn có thể lấy phần cuối cùng của URL để xóa nó khỏi chuỗi URL. Nếu đó là những gì bạn muốn, thì không cần phải lấy phần cuối cùng của URL – chúng ta có thể xóa nó dễ dàng bằng các phương pháp
console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
5 vàconsole.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
6JavaScriptĐã sao chép.
function removeLastPart(url) { return url.slice(0, url.lastIndexOf('/')) } const url1 = '//codingbeautydev.com/blog/javascript-get-last-part-of-url'; // //codingbeautydev.com/blog console.log(removeLastPart(url1)); const url2 = '//codingbeautydev.com/blog'; // //codingbeautydev.com console.log(removeLastPart(url2));
Chúng tôi sử dụng phương thức
console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
7console.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
8 để lấy vị trí xuất hiện cuối cùng của ký tự /, bởi vì đây là điểm ngay trước khi phần cuối cùng của URL bắt đầu trong chuỗiconsole.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
7const urlParts = [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url', ]; console.log(urlParts.at(-1)); // javascript-get-last-part-of-url console.log(urlParts.at(-2)); // blog console.log(urlParts.at(-3)); // codingbeautydev.com
1 trả về một phần của chuỗi nằm giữa chỉ mục bắt đầu và chỉ mục kết thúc được chỉ định, được truyền dưới dạng đối số thứ nhất và thứ hai tương ứng. Chúng tôi chuyểnconst urlParts = [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url', ]; console.log(urlParts.at(-1)); // javascript-get-last-part-of-url console.log(urlParts.at(-2)); // blog console.log(urlParts.at(-3)); // codingbeautydev.com
2 làm đối số đầu tiên để chuỗi con kết quả bắt đầu từ ký tự đầu tiên và chúng tôi chuyển kết quả củaconsole.log('123-456-7890'.split('-')); // [ '123', '456', '7890' ] /* [ '', '', 'codingbeautydev.com', 'blog', 'javascript-get-last-part-of-url' ] */ console.log( '//codingbeautydev.com/blog/javascript-get-last-part-of-url'.split('/') );
8 làm đối số thứ hai để chuỗi con kết thúc tại chỉ mục trước khi phần cuối của URL bắt đầu trong chuỗiMọi điều điên rồ mà JavaScript làm
Hướng dẫn hấp dẫn về những cảnh báo tinh tế và những phần ít được biết đến của JavaScript
Đăng ký và nhận ngay một bản sao miễn phí
Ayibatari Ibaba
Ayibatari Ibaba là nhà phát triển phần mềm có nhiều năm kinh nghiệm xây dựng trang web và ứng dụng. Anh ấy đã viết rất nhiều về nhiều chủ đề lập trình và đã tạo ra hàng chục ứng dụng và thư viện mã nguồn mở