在JavaScript中使用URL API

admin

2024年12月28日 19:51 本文熱度 94

URL是Web應用的關鍵部分。所有現代瀏覽器都支持URLAPI，它提供了一種解析和操作URL的方法。提供了對URL各個部分的訪問。

了解URL的組成部分

考慮以下URL：

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

URL由以下組件組成：

Protocol:https
Host:example.com
Path name:/api/search
Query string:?query=foo&sort=asc
Hash:#results

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

解析URL

在URLAPI可用之前，開發人員解析URL的一種方法是使用 <a> 元素。這個元素提供了一些基本的URL解析。例如，這里有一種方法可以從URL中查詢字符串：

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

然而，這種方法有一些缺點：

它需要DOM環境，這意味著它不能在Node.js這樣的環境中工作
它也沒有錯誤處理--如果向href屬性傳遞了無效的URL，則不會拋出錯誤

您也可以使用正則表達式來解析URL的各個部分，但這很繁瑣且容易出錯。

使用URLAPI來解析URL非常簡單。只需將您想要解析的URL傳遞給URL構造函數。如果URL字符串是有效的，您將返回一個URL對象，其中包含URL各個部分的屬性：

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

解析查詢字符串

您可以通過兩種方式訪問URL的字符串：

search屬性，它是一個完整查詢字符串（包括？字符）
searchParams屬性，它是URLSearchParams對象

如果你對查詢字符串中某個特定參數的值感興趣，你可以使用它的 get 方法獲取該參數：

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');console.log(url.searchParams.get('query'); // foobarconsole.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']

生成查詢字符串

手動構建查詢字符串可能比較棘手，尤其是當查詢參數包含需要轉義的特殊字符時。例如，如果查詢參數包含一個特殊字符，則需要將其編碼為%26。為了解決這些問題，你需要使用encodeURIComponent函數：

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

您可以使用 URLSearchParams 對象更安全地構建查詢字符串：

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

使用 URLSearchParams 的優點包括：

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

遍歷查詢參數

如果沒有URLSearchParams對象，那么在字符串中遍歷參數就有點棘手。你需要多次拆分字符串。

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

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

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

相反，您可以使用 URLSearchParams 的 entries 方法來遍歷鍵/值對：

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

創建完整的URL

下面是一個使用基本URL參數構建URL的完整示例：

const url = new URL('https://example.com/api/search');url.searchParams.append('query', 'test');url.searchParams.append('tag', 'tag1');url.searchParams.append('tag', 'tag2');// https://example.com/api/search?query=test&tag=tag1&tag=tag2console.log(url.toString());

檢查有效的URL

您可以使用URLAPI。如果你給它一個無效的URL，URL構造函數將拋出一個錯誤。

function isValidURL(url) {  try {    new URL(url);    return true;  } catch (error) {    return false;  }}

使用較新的瀏覽器，這甚至更容易。新的URL.canParse靜態方法，與上面的isValidURL函數類似。它接受一個URL字符串，并根據URL字符串的有效性，返回true或false 。

創建相對URL

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

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

new URL('/about', 'https://example.com').href;

URL構造函數采用https://example.com的基URL，并添加相對路徑/about，得到https://example.com/about 。

這個呢?

new URL('profile', 'https://example.com/users').href;

您可能認為這是https://example.com/users/profile，但實際上它是https://example.com/profile。它的行為就像一個相對鏈接; 它采用父路徑段，即example的根.com，然后添加profile 。

在 window.location工作

new URL('/profile', window.location).href;

使用URLPattern匹配URL中的模式

使用URL可以很容易地從URL獲取路徑。例如，在URL https://example.com/api/users/123/profile中，路徑名為/API/users/123/profile 。如果我們只想從這個URL中獲取用戶ID 123 呢？

const pattern = new URLPattern('https://example.com/api/users/:userId/profile');const matcher = pattern.exec('https://example.com/api/users/123/profile');console.log(matcher.pathname.groups.userId); // 123