Lấy phần cuối của url javascript

Trong bài đăng này, chúng tôi sẽ đề cập đến cách lấy phân đoạn cuối cùng của một URL trong JavaScript với ít thuật ngữ kỹ thuật nhất có thể để bạn có mọi thứ mình cần ngay tại đây mà không cần phải tìm kiếm thêm.

Trong JavaScript, bạn có khả năng lấy URL hiện tại và chia nó thành các phần để hiển thị dữ liệu khác nhau tùy thuộc vào đường dẫn URL trong số nhiều trường hợp sử dụng khác

Tuy nhiên, để có thể thực hiện việc này, bạn sẽ cần trích xuất các phân đoạn khác nhau trên một URL bằng JavaScript, đó là nội dung chúng tôi sẽ đề cập trong bài đăng này

Một trong những phân đoạn chính của URL thường được sử dụng để xác định nội dung sẽ hiển thị trong số những thứ khác là phân đoạn cuối cùng của UR (hoặc đường dẫn)

Cách lấy đoạn cuối của URL trong JavaScript

Để có được phân đoạn hoặc đường dẫn cuối cùng của một URL trong JavaScript khá dễ thực hiện bằng cách sử dụng kết hợp các phương pháp khác nhau, chủ yếu liên quan đến việc tách URL bằng cách sử dụng ký tự

var filename = url.substring(url.lastIndexOf('/')+1);
alert(filename);

Đầu tiên, mặc dù chúng tôi cần truy cập đường dẫn URL trước khi có thể tách các phân đoạn

Chúng tôi có thể làm điều này bằng cách gọi

var secondLevelLocation = pathArray[0];

Tại thời điểm này, chúng tôi có nhiều tùy chọn, cách dễ sử dụng và phát triển nhất với hầu hết các trường hợp sử dụng là Chuỗi. nguyên mẫu. phương pháp phân chia

chuỗi. nguyên mẫu. phương thức split có thể được sử dụng để chia một chuỗi thành các phần khác nhau bằng cách cung cấp đối số dấu phân cách

Chúng ta có thể gọi phương thức này trên chuỗi và sau đó cung cấp ký tự

var filename = url.substring(url.lastIndexOf('/')+1);
alert(filename);

Chúng ta có thể làm điều này như vậy

window.location.pathname.split("/");
// ["", "blog", "javascript", "how-to-get-the-last-segment-of-a-url-in-javascript", ""]

Sau khi chúng tôi có mảng này, chúng tôi sẽ lọc ra bất kỳ chuỗi trống nào có thể xuất hiện trong mảng này nếu có dấu gạch chéo trong tên đường dẫn của URL ban đầu

Chúng ta có thể lọc ra các chuỗi rỗng bằng cách sử dụng Array. nguyên mẫu. phương thức lọc được thiết kế cho các trường hợp như thế này khi bạn muốn xóa một số phần tử nhất định khỏi một mảng

Đây là cách nó sẽ trông như thế nào

window.location.pathname.split("/").filter(entry => entry !== "");
// ["blog", "javascript", "how-to-get-the-last-segment-of-a-url-in-javascript"]

Và sau đó, bước cuối cùng để lấy phân đoạn cuối cùng của URL trong JavaScript sẽ là lấy mục cuối cùng trong mảng

Chúng ta có thể làm điều này bằng cách trước tiên tìm độ dài của mảng và trừ đi 1 vì cách các chỉ mục bắt đầu từ 0

Dưới đây là ví dụ đầy đủ về cách lấy phân đoạn cuối cùng của URL trong JavaScript

const { pathname } = window.location;
const paths = pathname.split("/").filter(entry => entry !== "");
const lastPath = paths[paths.length - 1];
console.log(lastPath); // how-to-get-the-last-segment-of-a-url-in-javascript

Giải pháp này là một giải pháp khá chung chung và bao gồm khá nhiều vòng lặp, trong khi nhìn chung bạn muốn tránh các vòng lặp không cần thiết nếu có thể nhưng có những trường hợp không phải như vậy

Trường hợp tên đường dẫn URL sẽ không bao giờ quá lớn đến mức sẽ có sự khác biệt đáng chú ý giữa các phương thức lặp và thay thế, điều đó sẽ không tạo ra sự khác biệt

Ngoài ra, trong giải pháp ở trên, nó đọc tốt và rất dễ làm theo, điều này sẽ cải thiện khả năng đọc và bảo trì mã

Trên hết, giải pháp này bao gồm một trường hợp cạnh mà các giải pháp khác có thể không có, đó là dấu gạch chéo

Như đã nói, chúng ta hãy xem xét một giải pháp thay thế bằng cách sử dụng cả chuỗi con

Cách lấy đoạn cuối của URL trong JavaScript bằng cách sử dụng chuỗi con và lát cắt

Để lấy phân đoạn cuối cùng của một URL trong JavaScript bằng cách sử dụng chuỗi con, tất cả những gì chúng ta cần làm là lấy chuỗi con sau ký tự

var filename = url.substring(url.lastIndexOf('/')+1);
alert(filename);

Phương thức chúng ta sẽ sử dụng để lấy các chuỗi con trong JavaScript là String. nguyên mẫu. lát cắt

Điều quan trọng cần nhớ là trước tiên chúng ta cần xóa mọi dấu gạch chéo ở cuối tên đường dẫn nếu không chúng ta có thể kết thúc bằng một chuỗi trống

Hãy xem một ví dụ về cách chúng ta có thể làm điều này

________số 8

Như bạn có thể thấy, trước tiên chúng tôi kiểm tra dấu gạch chéo ở cuối và nếu nó tồn tại với Chuỗi. nguyên mẫu. kết thúcVới sau đó chúng tôi loại bỏ nó bằng Chuỗi. nguyên mẫu. slice để chọn phần còn lại của chuỗi

Sau đó, chúng tôi tiếp tục sử dụng lát cắt một lần nữa để lấy đường dẫn hoặc đoạn cuối cùng của URL

Cách xóa phần cuối của URL trong JavaScript

Tiếp theo từ ví dụ đầu tiên của chúng tôi bằng cách sử dụng Chuỗi. nguyên mẫu. split, chúng ta cũng có thể dễ dàng xóa phần cuối của URL

Tất cả những gì chúng ta cần làm là bật mảng và sau đó nối nó sao lưu để có tên đường dẫn hoàn chỉnh không có phần cuối của URL

Đây là cách chúng tôi có thể xóa phần cuối của URL trong JavaScript

const { pathname } = window.location;
const paths = pathname.split("/").filter(entry => entry !== "");
paths.pop(); // how-to-get-the-last-segment-of-a-url-in-javascript
const newPathname = `/${paths.join("/")}/`;
console.log(newPathname); // "/blog/javascript/"

Bản tóm tắt

Ở đó, chúng tôi có cách lấy phân đoạn cuối cùng của URL trong JavaScript, nếu bạn muốn nhiều hơn như thế này, hãy nhớ xem một số bài đăng khác của tôi

Tôi hy vọng bài đăng này hữu ích, nhưng trước khi bạn tiếp tục, hãy đảm bảo rằng bạn đã thử bài kiểm tra tương tác thú vị của tôi để xem bạn là kỹ sư React mới vào nghề, trung cấp hay chuyên gia

Sẽ chỉ mất khoảng 1 - 3 phút, vì vậy bạn không có gì để mất, hãy kiểm tra khả năng của mình ngay bây giờ

làm bài kiểm tra

Bạn là kỹ sư phản ứng mới, trung cấp hay chuyên gia?

Tìm hiểu tại đây bằng cách làm bài kiểm tra nhanh, tương tác, vui nhộn của tôi, mất khoảng 1 - 3 phút. Bạn sẽ làm tốt đến mức nào?

Bài đăng này sẽ bao gồm mọi thứ bạn cần biết về React Fragment một cách rõ ràng và ngắn gọn và sẽ là nguồn tài nguyên cuối cùng cho bất kỳ truy vấn nào liên quan đến React Fragment

Will Mayger

Ngày 24 tháng 3 năm 2022

Bài báo

Bài đăng này sẽ đề cập đến cách đợi tất cả các lời hứa giải quyết trong JavaScript thay vì phải thực hiện từng lời hứa khi bạn có nhiều lời hứa cần giải quyết

Will Mayger

21 Tháng Ba, 2022

Bài báo

Trong hướng dẫn này, bạn sẽ khám phá mọi thứ bạn cần biết về React Keys để có thể sử dụng chúng đúng cách trong bất kỳ ứng dụng React nào cùng với thông tin chi tiết

Will Mayger

03 Tháng Ba, 2022

Bài báo

Trong bài đăng này, chúng tôi đề cập đến sự khác biệt giữa, React. Phân đoạn so với div, lợi ích của một phân đoạn và khi nào bạn nên sử dụng cái này hơn cái kia