URL是Web應(yīng)用的關(guān)鍵部分。所有現(xiàn)代瀏覽器都支持URLAPI，它提供了一種解析和操作URL的方法。提供了對(duì)URL各個(gè)部分的訪問。
了解URL的組成部分
考慮以下URL：
https://example.com/api/search?query=foo&sort=asc
使用現(xiàn)代JavaScript，我們可以解析URL并根據(jù)需要提取這些不同的部分。
解析URL
在URLAPI可用之前，開發(fā)人員解析URL的一種方法是使用 <a> 元素。這個(gè)元素提供了一些基本的URL解析。例如，這里有一種方法可以從URL中查詢字符串：
function getQueryString(url) { const link = document.createElement('a'); link.href = url; return url.search;}
您也可以使用正則表達(dá)式來解析URL的各個(gè)部分，但這很繁瑣且容易出錯(cuò)。
使用URLAPI來解析URL非常簡(jiǎn)單。只需將您想要解析的URL傳遞給URL構(gòu)造函數(shù)。如果URL字符串是有效的，您將返回一個(gè)URL對(duì)象，其中包含URL各個(gè)部分的屬性：
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的字符串：
如果你對(duì)查詢字符串中某個(gè)特定參數(shù)的值感興趣，你可以使用它的 get 方法獲取該參數(shù)：const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');console.log(url.searchParams.get('query'); console.log(url.searchParams.get('maxResults'); // 10
如果有多個(gè)參數(shù)具有相同的名稱，可以使用 getAll 獲取一個(gè)所有包含該名稱的數(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']
生成查詢字符串
手動(dòng)構(gòu)建查詢字符串可能比較棘手，尤其是當(dāng)查詢參數(shù)包含需要轉(zhuǎn)義的特殊字符時(shí)。例如，如果查詢參數(shù)包含一個(gè)特殊字符，則需要將其編碼為%26。為了解決這些問題，你需要使用encodeURIComponent函數(shù)：
let queryString = 'foo=bar';queryString += '&baz=qux';queryString += '&tag=' + encodeURIComponent('one&two');console.log(queryString);
您可以使用 URLSearchParams 對(duì)象更安全地構(gòu)建查詢字符串：const params = new URLSearchParams();params.append('foo', 'bar');params.append('baz', 'qux');params.append('tag', 'one&two');console.log(params.toString());
使用 URLSearchParams 的優(yōu)點(diǎn)包括：
遍歷查詢參數(shù)
如果沒有URLSearchParams對(duì)象，那么在字符串中遍歷參數(shù)就有點(diǎn)棘手。你需要多次拆分字符串。
function listQueryParams(queryString) { queryString.split('&').forEach(param => { const [key, value] = param.split('='); console.log(`${key}: ${value}`); });}
如果參數(shù)包含編碼字符，則還需要對(duì)它們進(jìn)行解碼：function listQueryParams(queryString) { queryString.split('&').forEach(param => { const [key, value] = param.split('='); console.log(`${key}: ${decodeURIComponent(value)}`); });}
相反，您可以使用 URLSearchParams 的 entries 方法來遍歷鍵/值對(duì)：function listQueryParams(queryString) { const params = new URLSearchParams(queryString); params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));}
創(chuàng)建完整的URL
下面是一個(gè)使用基本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');console.log(url.toString());
檢查有效的URL
您可以使用URLAPI。如果你給它一個(gè)無效的URL，URL構(gòu)造函數(shù)將拋出一個(gè)錯(cuò)誤。
function isValidURL(url) { try { new URL(url); return true; } catch (error) { return false; }}
使用較新的瀏覽器，這甚至更容易。新的URL.canParse靜態(tài)方法，與上面的isValidURL函數(shù)類似。它接受一個(gè)URL字符串，并根據(jù)URL字符串的有效性，返回true或false 。
創(chuàng)建相對(duì)URL
URLAPI有一個(gè)強(qiáng)大的機(jī)制來解析相對(duì)URL。通常，如果URL構(gòu)造函數(shù)的參數(shù)不是完整、有效的URL，則會(huì)拋出錯(cuò)誤。但是，您可以指定第二個(gè)參數(shù)，作為構(gòu)建相對(duì)URL的基礎(chǔ)。第一個(gè)參數(shù)不必是有效的URL，但第二個(gè)參數(shù)必須是有效的URL。
我們先來看一個(gè)簡(jiǎn)單的案例：
new URL('/about', 'https://example.com').href;
URL構(gòu)造函數(shù)采用https://example.com的基URL，并添加相對(duì)路徑/about，得到https://example.com/about 。
這個(gè)呢?
new URL('profile', 'https://example.com/users').href;
您可能認(rèn)為這是https://example.com/users/profile，但實(shí)際上它是https://example.com/profile。它的行為就像一個(gè)相對(duì)鏈接; 它采用父路徑段，即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 。如果我們只想從這個(gè)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);
當(dāng)您在URLPattern上調(diào)用exec時(shí)，它需要一個(gè)有效的URL。它返回一個(gè)匹配器對(duì)象，其中包含URL的每個(gè)部分（ 協(xié)議 、主機(jī) 、 路徑名 等）的屬性。這些屬性中的每一個(gè)都有一個(gè)groups屬性，它將占位符名稱（如 :userId ）映射到URL中的值。
URLPatternAPI仍然不能在所有瀏覽器中使用。在撰寫本文時(shí)，F(xiàn)irefox或Safari還不支持它。您可以在CanIUse.com上查看最新的瀏覽器支持信息。
閱讀原文：原文鏈接
該文章在 2024/12/30 16:04:06 編輯過
400 186 1886
