Как получить значение после последнего слэша в URL используя JavaScript

Существует несколько способов достать значение после последнего слэша "/" в URL используя JavaScript. Ниже представлены несколько вариантов решения.

const url = "https://geekrainian.com/a/b/c/d";
const parts = url.split("/");
const valueAfterSlash = parts[parts.length - 1];
console.log(valueAfterSlash); // Результат: "d"

const url = "https://geekrainian.com/a/b/c/d";
const lastSlashIndex = url.lastIndexOf("/");
const valueAfterLastSlash = url.substring(lastSlashIndex + 1);
console.log(valueAfterLastSlash); // Результат: "d"

const url = "https://geekrainian.com/a/b/c/d";
const regex = /\/([^/]+)$/; // находит последний слеш и захватывает текст после него
const match = url.match(regex);
const valueAfterLastSlash = match ? match[1] : null;
console.log(valueAfterLastSlash); // Результат: "d"

const url = "https://geekrainian.com/a/b/c/d";
const urlObject = new URL(url);
const valueAfterLastSlash = urlObject.pathname.split("/").pop();
console.log(valueAfterLastSlash); // Результат: "d"

Если ваша строка заканчивается на слэш без значения (напр. https://geekrainian.com/a/b/c/d/), нам понадобится немного доработать решения выше, чтобы код отрабатывал в таких случаях корректно.

const url = "https://geekrainian.com/a/b/c/d/";
const parts = url.split("/");
const lastPart = parts[parts.length - 1];
const valueAfterLastSlash = lastPart === "" ? parts[parts.length - 2] : lastPart;
console.log(valueAfterLastSlash); // Результат: "d"

const url = "https://geekrainian.com/a/b/c/d/";
const lastSlashIndex = url.lastIndexOf("/");
const valueAfterLastSlash = lastSlashIndex === url.length - 1 
  ? url.substring(url.lastIndexOf("/", url.length - 2) + 1, url.length - 1) 
  : url.substring(lastSlashIndex + 1);
console.log(valueAfterLastSlash); // Результат: "d"

const url = "https://geekrainian.com/a/b/c/d/";
const regex = /\/([^/]+)\/?$/; // находит последний слеш и захватывает текст после него (игнорируя пустые слэши)
const match = url.match(regex);
const valueAfterLastSlash = match ? match[1] : null;
console.log(valueAfterLastSlash); // Результат: "d"

const url = "https://geekrainian.com/a/b/c/d/";
const urlObject = new URL(url);
const pathParts = urlObject.pathname.split("/").filter(part => part !== ""); // убираем пустые значения
const valueAfterLastSlash = pathParts[pathParts.length - 1];
console.log(valueAfterLastSlash); // Результат: "d"

Все предоставленные выше решения позволяют корректно достать значение идущее за последним слэшем в строке. Но вас наверняка интересует какой же метод лучше?

Я рекомендую использовать обьект URL, поскольку он предназначен для работы со ссылками такого типа и способен правильно обработать некоторые крайние случаи применения, такие как:

• Двойной слэш в строке https://geekrainian.com/a/b/c//
• Наличие строки запроса https://geekrainian.com/a/b/c/d/?a=b&c=d
• Наличие фрагмента https://geekrainian.com/a/b/c/d#test