搜尋

首頁 >web前端 >js教程 >在 JavaScript 中使用 URL

在 JavaScript 中使用 URL

DDD
DDD原創
2024-12-30 10:11:10842瀏覽

Working with URLs in JavaScript

作者：喬·阿塔迪✏️

URL 是任何網路應用程式的關鍵部分。如果您的應用程式向 API 發出請求，則為這些請求建立正確的 URL 非常重要。所有現代瀏覽器都支援 URL API，它提供了一種解析和操作 URL 的方法。它提供了對 URL 各個部分的輕鬆存取。

了解 URL 的各個部分

考慮以下 URL：

https://example.com/api/search?query=foo&sort=asc#results

此 URL 由以下部分組成：

  • 協議：https
  • 主辦單位：example.com
  • 路徑名稱：/api/search
  • 查詢字串：?query=foo&sort=asc
  • 雜湊值：#results

使用現代 JavaScript，我們可以解析 URL 並根據需要提取這些不同的部分。

解析 URL

在舊版瀏覽器中，在 URL API 可用之前，開發人員解析 URL 的一種方法是使用 。元素。該元素提供一些基本的 URL 解析。例如，以下是從 URL 中提取查詢字串的方法：

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

但是，這種方法有一些缺點：

  • 需要 DOM 環境，這表示它無法在 Node.js 等環境中運作
  • 它也沒有錯誤處理 - 如果將無效的 URL 傳遞給 href 屬性，則不會拋出錯誤

您也可以使用正規表示式來解析 URL 的各個部分，但這很乏味且容易出錯。

使用 URL API 解析 URL 非常簡單。只需將要解析的 URL 傳遞給 URL 建構函數即可。如果 URL 字串有效，您將獲得一個 URL 對象，其中包含 URL 各個部分的屬性：

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

解析查詢字串

您可以透過兩種方式存取 URL 的查詢字串：

  • 搜尋屬性，它是一個包含完整查詢字串（包括 ? 字元）的字串
  • searchParams 屬性，它是一個 URLSearchParams 物件

如果您對查詢字串中特定參數的值感興趣，可以使用其 get 方法透過參數名稱取得參數：

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

如果有多個同名參數，可以使用 getAll 來取得包含該名稱的所有值的陣列：

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

建構查詢字串

手動建立查詢字串可能很棘手，特別是如果任何查詢參數包含需要轉義的特殊字元。例如，如果查詢參數需要包含 & 字符，則需要將其編碼為 &。為了涵蓋這些情況，您需要使用encodeURIComponent函數：

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

您可以使用 URLSearchParams 物件更安全地建立查詢字串：

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

使用 URLSearchParams 的優點包括：

  • 您不必擔心分隔參數的 & 字元
  • 您不需要對參數值進行 URI 編碼
  • 不需要使用字串連接

迭代查詢參數

如果沒有 URLSearchParams 對象，迭代查詢字串中的參數會有點棘手。您需要多次拆分字串 - 首先分成鍵/值對組，然後再次拆分鍵和值：

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

如果參數可能包含編碼字符，您還需要對它們進行解碼：

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

相反，您可以使用 URLSearchParams 的條目方法來迭代鍵/值對：

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

建立完整的 URL

這是使用基本 URL 和一些查詢參數建立 URL 的完整範例：

const params = new URLSearchParams();
params.append('foo', 'bar');
params.append('baz', 'qux');
params.append('tag', 'one&two');
console.log(params.toString()); // foo=bar&baz=qux&tag=one%26two

檢查有效 URL

您可能會嘗試使用正規表示式來驗證 URL，但眾所周知，建立完全捕獲有效 URL 字串的正規表示式非常困難。

相反，您可以存取 URL API。如果您給了 URL 建構函數無效的 URL，則它會拋出錯誤。您可以使用它來檢查 URL 是否有效：

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${value}`);
  });
}

使用較新的瀏覽器，甚至更容易。有一個較新的 URL.canParse 靜態方法，可以使用一行程式碼執行類似的驗證。與上面的 isValidURL 函數類似，它接受一個潛在的 URL 字串，並根據 URL 字串的有效性傳回 true 或 false。

建立相對 URL

URL API 具有強大的解析相對 URL 的機制。通常，如果 URL 建構函數的參數不是完整、有效的 URL，則會拋出錯誤。但是，您可以指定第二個參數作為建立相對 URL 的基礎。如果您使用雙參數方法，第一個參數不必是有效的 URL，但第二個參數必須是有效的 URL。

我們先來看一個簡單的案例：

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${decodeURIComponent(value)}`);
  });
}

URL 建構函式採用 https://example.com 的基本 URL 並加入相對路徑 /about，從而得到 https://example.com/about。

這樣怎麼樣：

function listQueryParams(queryString) {
  const params = new URLSearchParams(queryString);
  params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));
}

您可能認為這是 https://example.com/users/profile，但實際上它是 https://example.com/profile。這就像相對連結一樣；它採用父路徑段，即 example.com 的根，然後新增設定檔。

讓我們再看一個使用相對 URL 的範例。您也可以使用 .. 返迴路徑層次結構：

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

此內容發佈於 https://example.com/profile。請記住，相對 URL 從父路徑段開始。然後，這個裡面有 ..，它又上升了一個路徑段。

如果您使用相對 URL 呼叫 URL 建構函式並為基本 URL 指定無效或不完整的 URL，您將收到錯誤。如果您使用沒有完整基本 URL 的相對 URL，您也會收到錯誤：

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

使用 window.location 對象

您可能熟悉 window.location 對象，它代表目前頁面的 URL。該物件還具有 href 和 pathname 等屬性，因此您可能會認為它是 URL 物件。這是一個不同的對象，一個 Location，它具有一些與 URL 相同的屬性，但也缺少一些屬性（例如 searchParams 屬性）。

即使它不是 URL 對象，您仍然可以使用 window.location 建構新的 URL 對象。您可以將 window.location 傳遞給 URL 建構函數，以根據目前 URL 建立一個包含 searchParams 等的新的完整 URL，或者您甚至可以在建立相對 URL 時將其用作基本 URL：

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

使用 URLPattern 來符合 URL 中的模式

使用 URL 可以輕鬆地從 URL 取得路徑。例如，在 URL https://example.com/api/users/123/profile 中，路徑名稱為 /api/users/123/profile。如果我們只想從此 URL 取得使用者 ID 123 該怎麼辦？

正如我們之前討論的，創建正確的正規表示式來驗證和提取 URL 的各個部分可能很困難。

目前尚未在所有瀏覽器中使用，但您可以使用 URLPattern API 來匹配和提取 URL 的部分內容，以匹配您指定的模式。這對於單頁應用程式 (SPA) 中的客戶端路由之類的事情特別有用。

以使用者個人資料 URL 為例，讓我們建立一個 URLPattern 來取得使用者 ID。我們可以使用前導 : 字元來表示命名佔位符，稍後可以使用它來匹配 URL 的該部分：

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

當您對 URLPattern 呼叫 exec 時，它需要一個有效的 URL。它會傳回一個匹配器對象，其中包含 URL 每個部分（協定、主機、路徑名稱等）的屬性。其中每個屬性還有一個 groups 屬性，它將佔位符名稱（如 :userId）對應到 URL 中的值。

如果您只關心符合 URL 的一部分，例如我們在這裡所做的路徑名，您也可以在 URL 模式中指定通配符。或者，您可以傳遞一個包含您感興趣匹配的 URL 部分的對象，而不是 URL 字串：

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

URLPattern API 仍然無法在所有瀏覽器中使用。在撰寫本文時，Firefox 或 Safari 尚不支援它。您可以在 CanIUse.com 查看最新的瀏覽器支援資訊。

概括

URL API 是一個通用接口，用於在 JavaScript 中建置、驗證和操作 URL。與手動解析或正規表示式相比，它使用起來更安全且不易出錯。透過使用 URLSearchParams 對象，您可以建立查詢字串，而無需擔心字串連接或特殊字元編碼。

URLPattern API 更進一步，支援通配符和命名佔位符，因此您可以對 URL 進行切片和切塊以滿足應用程式的需求！ 延伸閱讀：

  • URL 介面 (MDN)
  • URLPattern API (MDN)

只需幾分鐘即可設定 LogRocket 的現代錯誤追蹤：

  1. 造訪 https://logrocket.com/signup/ 以取得應用程式 ID。
  2. 透過 NPM 或 script 標籤安裝 LogRocket。 LogRocket.init() 必須在客戶端調用，而不是伺服器端。

NPM：

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

腳本標籤：

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

3.（可選）安裝插件以與您的堆疊進行更深入的整合：

  • Redux 中介軟體
  • ngrx 中介軟體
  • Vuex 外掛程式

立即開始

以上是在 JavaScript 中使用 URL的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript firefox safari less npm Static String Array Object if sort for include try throw Validating Error using Interface Attribute Property JS function constructor dom this location href web app https Access vuex
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JavaScript 中的「new」關鍵字如何運作？下一篇：JavaScript 中的「new」關鍵字如何運作？

相關文章

看更多