2020-7-14 seo達人
統(tǒng)一資源定位符,縮寫為URL,是對網(wǎng)絡(luò)資源(網(wǎng)頁、圖像、文件)的引用。URL指定資源位置和檢索資源的機制(http、ftp、mailto)。
舉個例子,這里是這篇文章的 URL 地址:
https://dmitripavlutin.com/parse-url-javascript
很多時候你需要獲取到一段 URL 的某個組成部分。它們可能是 hostname(例如 dmitripavlutin.com),或者 pathname(例如 /parse-url-javascript)。
一個方便的用于獲取 URL 組成部分的辦法是通過 URL() 構(gòu)造函數(shù)。
在這篇文章中,我將給大家展示一段 URL 的結(jié)構(gòu),以及它的主要組成部分。
接著,我會告訴你如何使用 URL() 構(gòu)造函數(shù)來輕松獲取 URL 的組成部分,比如 hostname,pathname,query 或者 hash。
1. URL 結(jié)構(gòu)
一圖勝千言。不需要過多的文字描述,通過下面的圖片你就可以理解一段 URL 的各個組成部分:
image
2. URL() 構(gòu)造函數(shù)
URL() 構(gòu)造函數(shù)允許我們用它來解析一段 URL:
const url = new URL(relativeOrAbsolute [, absoluteBase]);
參數(shù) relativeOrAbsolute 既可以是絕對路徑,也可以是相對路徑。如果第一個參數(shù)是相對路徑的話,那么第二個參數(shù) absoluteBase 則必傳,且必須為第一個參數(shù)的絕對路徑。
舉個例子,讓我們用一個絕對路徑的 URL 來初始化 URL() 函數(shù):
const url = new URL('http://example.com/path/index.html');
url.href; // => 'http://example.com/path/index.html'
或者我們可以使用相對路徑和絕對路徑:
const url = new URL('/path/index.html', 'http://example.com');
url.href; // => 'http://example.com/path/index.html'
URL() 實例中的 href 屬性返回了完整的 URL 字符串。
在新建了 URL() 的實例以后,你可以用它來訪問前文圖片中的任意 URL 組成部分。作為參考,下面是 URL() 實例的接口列表:
interface URL {
href: USVString;
protocol: USVString;
username: USVString;
password: USVString;
host: USVString;
hostname: USVString;
port: USVString;
pathname: USVString;
search: USVString;
hash: USVString;
readonly origin: USVString;
readonly searchParams: URLSearchParams;
toJSON(): USVString;
}
上述的 USVString 參數(shù)在 JavaScript 中會映射成字符串。
3. Query 字符串
url.search 可以獲取到 URL 當中 ? 后面的 query 字符串:
const url = new URL(
'http://example.com/path/index.html?message=hello&who=world'
);
url.search; // => '?message=hello&who=world'
如果 query 參數(shù)不存在,url.search 默認會返回一個空字符串 '':
const url1 = new URL('http://example.com/path/index.html');
const url2 = new URL('http://example.com/path/index.html?');
url1.search; // => ''
url2.search; // => ''
3.1 解析 query 字符串
相比于獲得原生的 query 字符串,更實用的場景是獲取到具體的 query 參數(shù)。
獲取具體 query 參數(shù)的一個簡單的方法是利用 url.searchParams 屬性。這個屬性是 URLSearchParams 的實例。
URLSearchParams 對象提供了許多用于獲取 query 參數(shù)的方法,如get(param),has(param)等。
下面來看個例子:
const url = new URL(
'http://example.com/path/index.html?message=hello&who=world'
);
url.searchParams.get('message'); // => 'hello'
url.searchParams.get('missing'); // => null
url.searchParams.get('message') 返回了 message 這個 query 參數(shù)的值——hello。
如果使用 url.searchParams.get('missing') 來獲取一個不存在的參數(shù),則得到一個 null。
4. hostname
url.hostname 屬性返回一段 URL 的 hostname 部分:
const url = new URL('http://example.com/path/index.html');
url.hostname; // => 'example.com'
5. pathname
url. pathname 屬性返回一段 URL 的 pathname 部分:
const url = new URL('http://example.com/path/index.html?param=value');
url.pathname; // => '/path/index.html'
如果這段 URL 不含 path,則該屬性返回一個斜杠 /:
const url = new URL('http://example.com/');
url.pathname; // => '/'
6. hash
最后,我們可以通過 url.hash 屬性來獲取 URL 中的 hash 值:
const url = new URL('http://example.com/path/index.html#bottom');
url.hash; // => '#bottom'
當 URL 中的 hash 不存在時,url.hash 屬性會返回一個空字符串 '':
const url = new URL('http://example.com/path/index.html');
url.hash; // => ''
7. URL 校驗
當使用 new URL() 構(gòu)造函數(shù)來新建實例的時候,作為一種副作用,它同時也會對 URL 進行校驗。如果 URL 不合法,則會拋出一個 TypeError。
舉個例子,http ://example.com 是一段非法 URL,因為它在 http 后面多寫了一個空格。
讓我們用這個非法 URL 來初始化 URL() 構(gòu)造函數(shù):
try {
const url = new URL('http ://example.com');
} catch (error) {
error; // => TypeError, "Failed to construct URL: Invalid URL"
}
因為 http ://example.com 是一段非法 URL,跟我們想的一樣,new URL() 拋出了一個 TypeError。
8. 修改 URL
除了獲取 URL 的組成部分以外,像 search,hostname,pathname 和 hash 這些屬性都是可寫的——這也意味著你可以修改 URL。
舉個例子,讓我們把一段 URL 從 red.com 修改成 blue.io:
const url = new URL('http://red.com/path/index.html');
url.href; // => 'http://red.com/path/index.html'
url.hostname = 'blue.io';
url.href; // => 'http://blue.io/path/index.html'
注意,在 URL() 實例中只有 origin 和 searchParams 屬性是只讀的,其他所有的屬性都是可寫的,并且會修改原來的 URL。
9. 總結(jié)
URL() 構(gòu)造函數(shù)是 JavaScript 中的一個能夠很方便地用于解析(或者校驗)URL 的工具。
new URL(relativeOrAbsolute [, absoluteBase]) 中的第一個參數(shù)接收 URL 的絕對路徑或者相對路徑。當?shù)谝粋€參數(shù)是相對路徑時,第二個參數(shù)必傳且必須為第一個參數(shù)的基路徑。
在新建 URL() 的實例以后,你就能很輕易地獲得 URL 當中的大部分組成部分了,比如:
url.search 獲取原生的 query 字符串
url.searchParams 通過 URLSearchParams 的實例去獲取具體的 query 參數(shù)
url.hostname獲取 hostname
url.pathname 獲取 pathname
url.hash 獲取 hash 值
那么你最愛用的解析 URL 的 JavaScript 工具又是什么呢?
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://tweetduck.com