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構造函數內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！