不要再造輪子了:聊一聊 JavaScript 的 URL 對象是什麼?

来源:https://www.cnblogs.com/powertoolsteam/archive/2019/12/05/urlobject.html

本文由葡萄城技術團隊於博客園翻譯並首發 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 如果我們自己編寫從URL中分析和提取元素的代碼,那麼有可能會比較痛苦和麻煩。程式員作為這個社會中最“懶”的群體之一,無休止的重覆造輪子必然是令人難以容忍的,所以大多數瀏 ...


本文由葡萄城技術團隊於博客園翻譯並首發

轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

 

如果我們自己編寫從URL中分析和提取元素的代碼,那麼有可能會比較痛苦和麻煩。程式員作為這個社會中最“懶”的群體之一,無休止的重覆造輪子必然是令人難以容忍的,所以大多數瀏覽器的標準庫中都已經內置了URL對象。

那麼現在,有了它,我們就可以將URL字元串作為參數傳遞給URL的構造函數,並創建它的實例解析URL內容了嗎?答案是:“是的!”。

要使用URL構造函數創建URL對象,我們在以下代碼中使用new來創建:

new URL('https://www.grapecity.com.cn');

在上面的代碼中,我們創建了一個絕對地址的URL對象的實例。但同時,我們還可以傳入一個相對地址作為第一個參數,並把相對地址的基礎URL作為第二個參數來創建一個URL對象。可能比較拗口,我們舉個慄子:

new URL('/developer', 'https://www.grapecity.com.cn');

看上面的代碼,第二個基礎URL參數必須是一個有效的絕對地址,而不可以是一個相對的地址片段,它必須要以http://或https://開頭,我們還可以在下麵的代碼中以類似於鏈式定義的方式來使用:

const gcUrl = 'https://www.grapecity.com.cn/';

const gcDevUrl = new URL("/developer", gcUrl);

const gcUrl2 = new URL(gcUrl);

const gcSlnUrl = new URL('/solutions', gcUrl2);

const Url = new URL('aboutus', gcSlnUrl);

如果每個參數使用toString()的話,我們的執行結果應該如下:

https://www.grapecity.com.cn/

https://www.grapecity.com.cn/developer

https://www.grapecity.com.cn/

https://www.grapecity.com.cn/solutions

https://www.grapecity.com.cn/aboutus

第二個參數是可選參數,只有當第一個參數是相對地址時才應傳入。我們傳入的字元串或URL對象被轉換為USVString對象,該對象對應於一組Unicode標量值可能的序列集合。在我們的代碼中,我們可以將它們視為常規字元串。如果兩個參數都是相對地址,或者基礎URL和相對地址一起無效,則會拋出TypeError異常。我們可以直接將URL對象傳遞給第二個參數,因為URL對象的toString方法將在構造函數中操作之前將URL對象轉換為完整的URL字元串。

URL對象可以具有以下屬性:

Hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等屬性,接下來,讓我們一起來瞭解一下它們吧!

Hash屬性

hash屬性能獲得URL中位於#號後的部分。由於字元串沒有經過百分比解碼,因此仍然對如下所示的特殊符號進行編碼。它們使用下麵的映射進行編碼。在編碼過程中,左側的字元將轉換為右側的字元:

  • ‘:’ — %3A
  • ‘/’ — %2F
  • ‘?’ — %3F
  • ‘#’ — %23
  • ‘[‘ — %5B
  • ‘]’ — %5D
  • ‘@’ — %40
  • ‘!’ — %21
  • ‘$’ — %24
  • “‘“ — %27
  • ‘(‘ — %28
  • ‘)’ — %29
  • ‘*’ — %2A
  • ‘+’ — %2B
  • ‘,’ — %2C
  • ‘;’ — %3B
  • ‘=’ — %3D
  • ‘%’ — %25
  • ‘ ‘ — %20 或者 +

例如,我們有這樣的URL字元串,https://www.grapecity.com.cn/developer/spreadjs#price,然後我們可以直接取出Hash屬性值,如下所示:

const exampleUrl = new URL('https://www.grapecity.com.cn/developer/spreadjs#price');
console.log(exampleUrl.hash);

在運行結果中,我們在console.log語句中得到‘#price’。該屬性是一個USVString,當我們像上面那樣獲取它時,它會被轉換為字元串。因為它不是只讀屬性,所以我們也可以像下麵的代碼中那樣直接為它賦值:

exampleUrl.hash = '#newHash';

例如:

const exampleUrl = new URL('https://www.grapecity.com.cn/developer/spreadjs#price'); 
exampleUrl.hash ='#newPrice'; 
console.log(exampleUrl.hash);

我們通過href屬性就能獲得更新後的URL https://www.grapecity.com.cn/developer/spreadjs#newHash

Host 屬性

URL對象的host屬性是包含主機名的USVString。如果埠包含在: 之後,則我們還將獲得主機的埠號。例如,如果我們有:

const exampleUrl = new URL('http://huozige.grapecity.com.cn:8080/');
console.log(exampleUrl.host);

我們就能獲得huozige.grapecity.com.cn:8080。與其他USVString屬性一樣,當我們檢索它時,它會轉換為字元串。同樣的,它也不是只讀屬性,所以我們也可以像hash屬性一樣為它賦值:

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功能演示');
exampleUrl.host = 'es.grapecity.com.cn:80';
console.log(exampleUrl);

這樣我們一樣能夠獲得全新的URL。

Hostname 屬性

使用hostname屬性,可以從URL得到埠外的主機名:

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功能演示');
console.log(exampleUrl.hostname)

你同樣也可以像修改其他屬性一樣修改hostname屬性,例如:

exampleUrl.hostname = ‘newExample.com’;

Href 屬性

URL對象的href屬性包含了傳入URL對象的整個地址字元串,例如:

const exampleUrl = new URL('https://www.grapecity.com.cn/developer/spreadjs#price');
console.log(exampleUrl.href);

打出來的就是我們傳給URL構造函數的內容,和其他屬性一樣,href屬性也不是只讀的。

Origin 屬性

區別於其他屬性,Origin是一個只讀屬性,它將為你返回具有URL來源的Unicode序列化USVString。Origin的結構是由傳入的URL類型決定的,對於http或https 的鏈接,得到的Origin將會為 協議(http/https)+ (://) + 功能變數名稱 + (:埠),一般情況下,預設埠將會被忽略。對於BLOB 鏈接,Origin返回的則是BLOB:後面的部分。例如:

const url1 = new URL("https://www.grapecity.com.cn/:443")
const url2 = new URL("blob:https://www.grapecity.com.cn/:443")
console.log(url1.origin);
console.log(url2.origin)

你將會得到

https://www.grapecity.com.cn

UserName & Password屬性

UserName和Password屬性也是可寫屬性,它能提取功能變數名稱前的用戶名和密碼部分的內容,例如:

const url = new URL('https://username:[email protected]');
console.log(url.username);
console.log(url.password);
url.username = “username1”;
url.password = “password1”;
console.log(url.username);
console.log(url.password);

Pathname屬性

這個屬性是指獲得傳入url的第一個斜杠(/) 後面除參數外的部分,例如:

const url = new URL ("https://www.grapecity.com.cn/developer/spreadjs#price")
console.log(url.pathname);

Port屬性

Port屬性是指可以獲得傳入Url地址的埠值,這個屬性也是可寫的。

const url = new URL('http://huozige.grapecity.com.cn:8080/功能演示');
console.log(url.port);

Protocol屬性

可以獲得傳入Url地址參數的協議名,一般是指類似http:,https:,ftp:,file:等這樣的協議。

const url = new URL('https://www.grapecity.com.cn/');
console.log(url.protocol);

Search屬性

可以獲得傳入Url地址參數?後的部分,但該屬性只能獲得整個查詢字元串,如若需要瞭解各個參數的值,可以使用searchParams屬性。

const url = new URL('https://www.grapecity.com.cn:443?key1=value1&key2=value2');
console.log(url.search);

searchParams屬性

search屬性只為我們獲取了整個參數字元串,如果有把字元串解析為鍵值對,這時候searchParams屬性就派上了用場,該屬性將獲得一個URLSearchParams對象,該對象具有列出查詢字元串鍵值對列表的能力,例如,要獲取參數列表,我們可以這樣使用。

const url = new URL(' https://www.grapecity.com.cn/?key1=value1&key2=value2'); 
console.log(url.searchParams.get('key1')); 
console.log(url.searchParams.get('key2'));

從第一個console.log語句中獲得value1,從第二個console.log語句中獲得value2。URLSearchParams對象有一個get方法,通過鍵名獲取給定查詢字元串鍵的值。

靜態方法

URL構造函數里有2個靜態方法,它有createObjectURL()方法和revokeObjectURL()方法。

URL.createObjectURL()靜態方法會創建一個 DOMString,其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的視窗中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

URL.revokeObjectURL()方法會釋放一個通過URL.createObjectURL()創建的對象URL. 當你要已經用過了這個對象URL,然後要讓瀏覽器知道這個URL已經不再需要指向對應的文件的時候,就需要調用這個方法。

總結

最後為大家帶來一張表,希望能更好的幫助大家通覽

 

有了URL對象,操縱和從URL中提取部分不再是一件痛苦的事情,因為我們不必自己編寫所有代碼來完成這項工作。大多數瀏覽器的標準庫中都內置了URL對象。現在我們可以將URL作為字元串傳遞給URL構造函數並創建URL的實例。然後,我們可以使用方便的值屬性和方法來操作並獲得我們想要的URL部分。

最後,有什麼問題,歡迎直接留言。

 


您的分享是我們最大的動力!

更多相關文章
  • 總結:在html標簽中添加的自定義屬性, 如果想要獲取這個屬性的值, 需要使用getAttribute("自定義屬性的名字")才能獲取這個屬性的值 html標簽中有沒有什麼自帶的屬性可以存儲成績的 沒有 本身html標簽沒有這個屬性, 自己(程式員)添加的 自定義屬性 為了存儲一些數據 <!DOCT ...
  • 計算屬性get set方法 在vue的計算屬性中,所定義的都是屬性,可以直接調用 正常情況下,計算屬性中的每一個屬性對應的都是一個對象,對象中包括了set方法與get方法 而絕大多數情況下,計算屬性沒有set方法,是一個只讀屬性 此時計算屬性可以簡寫 ...
  • 基於ES6語法手寫promise A+ 規範,源碼實現 class Promise { constructor(excutorCallBack) { this.status = 'pending'; this.value = undefined; this.fulfilledAry = []; th ...
  • 設置和獲取 標簽內容和文本內容 總結 設置: 使用innerText主要是設置文本的, 設置標簽內容, 是沒有標簽的效果的 innerHTML是可以設置文本內容 innerHTML主要的作用是在標簽中設置新的html標簽內容, 是有標簽效果的 想要設置標簽內容, 使用innerHTML 想要設置文本 ...
  • 一、HTML概述 htyper text markup language 即超文本標記語言。 超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程式等非文字元素。 標記語言: 標記(標簽)構成的語言。 1、網頁的組成 一個網頁一般由兩部分組成即: HTML(Hypertext Markup Lan ...
  • 當我們執行 JS 代碼的時候其實就是往執行棧中放入函數,那麼遇到非同步代碼的時候該怎麼辦?其實當遇到非同步的代碼時,會被掛起併在需要執行的時候加入到 Task(有多種 Task) 隊列中。一旦執行棧為空,Event Loop 就會從 Task 隊列中拿出需要執行的代碼並放入執行棧中執行,所以本質上來說 ...
  • 這裡介紹的是Win平臺的安裝方法,其他平臺請至Github>Puppeteer. 首先要安裝node.js 可以看我這篇的開頭>【Angular】學習筆記-環境部署、項目建立相關 1.新建項目目錄 2.打開gitbush(常用的Terminal都可以) 3.鍵入 npm i puppeteer 4. ...
  • 總結獲取元素的方式 1. 根據id屬性的值獲取元素,返回來的是一個元素對象 document.getElementById("id屬性的值"); document.getElementById("btn"); 2. 根據標簽名字獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 docume ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...