淺談JavaScript中你可能不知道URL建構函式的屬性
URL
URL 是統一資源定位符，對可以從網際網路上得到的資源的位置和訪問方法的一種簡潔的表示，是網際網路上標準資源的地址。網際網路上的每個檔案都有一個唯一的 URL，它包含的資訊指出檔案的位置以及瀏覽器應該怎麼處理它,
在 Web 開發中，有許多情況需要解析 URL,這篇主要學習如何使用 URL 物件實現這一點
例如，這裡是這篇部落格文章的路徑:
https://www.vipbic.com/thread.html?id=101
通常您需要訪問 URL 的特定屬性。這些可能是主機名(例如 vipbic.com ) ，或者路徑名(例如/thread)
JavaScript用於訪問URL物件的提供一個URL()建構函式，很方便解析
一個完整URL
用一張圖片來解釋，沒有太多的文字描述，在下面的圖片中你可以找到一個 URL 的主要包含屬性:
URL constructor
URL ()是一個 constuctor 函式，它可以解析 URL 的物件:
const url = new URL(relativeOrAbsolute [,absoluteBase]);
relativeOrAbsolute引數可以是絕對 URL，也可以是相對 URL。如果第一個引數是相對的，那麼第二個引數 absoluteBase 必須是絕對 URL，它必須是第一個引數的基礎
例如，讓我們用一個絕對 URL 初始化 URL():
const url = new URL('http://example.com/path/index.html');
url.href; // => 'http://example.com/path/index.html'或者合併相對和絕對的 url:
const url = new URL('/path/index.html','http://example.com');
url.href; // => 'http://example.com/path/index.html'
建立 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;
}可以嘗試在瀏覽中列印
Query string
Search 屬性訪問字首為? : 的 URL 的查詢字串:
const url = new URL( 'http://example.com/path/index.html?message=hello&who=world' ); url.search; // => '?message=hello&who=world'
如果查詢字串不存在的字串，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; // => ''
Parsing query string
訪問查詢引數比訪問原始查詢字串更方便
一種簡單的查詢引數選擇方法提供了 url.searchParams 屬性，該屬性包含 URLSearchParams 的例項
URLSearchParams 物件提供了許多方法(如 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
get.('message'),返回訊息查詢引數的值-‘ hello',當去嘗試，訪問一個不存在的引數 url.searchParams.get('missing')的結果為 null
hostname
Hostname 屬性包含 URL 的主機名:
const url = new URL('http://example.com/path/index.html');
url.hostname; // => 'example.com'
pathname
屬性獲取 URL 的路徑名:
const url = new URL('http://example.com/path/index.html?param=value');
url.pathname; // => '/path/index.html'
如果 URL 沒有路徑，URL.pathname 屬性將返回斜槓字元/:
const url = new URL('http://example.com/');
url.pathname; // => '/'
hash
可以使用 url.hash 屬性訪問#後面的引數:
const url = new URL('http://example.com/path/index.html#bottom');
url.hash; // => '#bottom'
當 URL 中的雜湊#時，URL.hash 計算為空字串” :
const url = new URL('http://example.com/path/index.html');
url.hash; // => ''
URL validation
當new URL ()建構函式建立一個例項時，作為副作用，它還驗證 URL 的正確性。如果 URL 值無效，則丟擲 TypeError
例如，http ://example. com 是一個無效的 URL，因為 http 後面的空格字元
讓我們使用這個無效的 URL 來初始化解析器:
try {
const url = new URL('http ://example.com');
} catch (error) {
error; // => TypeError,"Failed to construct URL: Invalid URL"
}
因為'http ://example. com'是一個無效的 URL，正如預期的那樣，new URL ('http ://example. com')丟擲一個 TypeError
URL manipulation
除了訪問 URL 屬性之外，搜尋、主機名、路徑名、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
總結
URL()建構函式可以方便地在 JavaScript 中解析(和驗證) URL
new URL (relativeOrAbsolute [ ，absolute base ])接受作為第一個引數的絕對或相對 URL。如果第一個引數是相對的，則必須將第二個引數指
示為一個作為第一個引數基礎的URL
建立 URL()例項後，可以獲取到以下實列方法
- url.search 原始查詢字串
- url.searchParams 選擇查詢字串引數
- url.hostname 訪問主機名
- url.pathname 讀取路徑名
- url.hash #後面的引數
文章屬於翻譯，作者部分有所改動，
作者：羊先生
英文原文， https://dmitripavlutin.com/parse-url-javascript/
到此這篇關於淺談JavaScript中你可能不知道URL建構函式的屬性的文章就介紹到這了,更多相關JavaScript URL建構函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！