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/pa...