在JavaScript中使用URL API

admin

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

URL是Web應(yīng)用的關(guān)鍵部分。所有現(xiàn)代瀏覽器都支持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

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

解析URL

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

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

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

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

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

使用URLAPI來解析URL非常簡單。只需將您想要解析的URL傳遞給URL構(gòu)造函數(shù)。如果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對象

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

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

如果有多個參數(shù)具有相同的名稱，可以使用 getAll 獲取一個所有包含該名稱的數(shù)組：

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

生成查詢字符串

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

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

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

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 的優(yōu)點包括：

您不必?fù)?dān)心分隔參數(shù)的特殊字符
不需要對參數(shù)值進(jìn)行URI編碼
您不需要使用字符串連接

遍歷查詢參數(shù)

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

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

如果參數(shù)包含編碼字符，則還需要對它們進(jìn)行解碼：

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}`));}

創(chuàng)建完整的URL

下面是一個使用基本URL參數(shù)構(gòu)建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構(gòu)造函數(shù)將拋出一個錯誤。

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

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

創(chuàng)建相對URL

URLAPI有一個強(qiáng)大的機(jī)制來解析相對URL。通常，如果URL構(gòu)造函數(shù)的參數(shù)不是完整、有效的URL，則會拋出錯誤。但是，您可以指定第二個參數(shù)，作為構(gòu)建相對URL的基礎(chǔ)。第一個參數(shù)不必是有效的URL，但第二個參數(shù)必須是有效的URL。

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

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

URL構(gòu)造函數(shù)采用https://example.com的基URL，并添加相對路徑/about，得到https://example.com/about 。

這個呢?

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

您可能認(rèn)為這是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