什麼是網址 URL?如何取得網址的參數?

更新於 發佈於 閱讀時間約 2 分鐘

之前分享過【網路請求帶參數的方式】,開發者可以透過 URL 代入參數,來向伺服器請求特定的資源,我們當然也可以擷取 URL 的內容,來做為後續開發的判斷條件,這篇就來記錄一下,網址(URL) 和域名(Domain) 是什麼,以及如何取得網址的參數吧!


我們常說的網址連結 URL 完整名稱是 Uniform Resource Locator 直譯為「統一資源定位符」,指的是一個網站的位置,具有唯一性,網址的組成包含以下幾個部分

  • 通訊協定
  • 子網域
  • 域名 (也就是Domain)
  • 端口號 (port 號)
  • 路徑名稱
  • 網址參數


透過圖片來看會更清楚

raw-image

圖片來源:凱士網頁設計公司


我自己也整理了一份表格,範例網址:

https://www.google.com.tw/search?q=多啦A夢

raw-image

以上就是網址 URL 的組成啦,不過各個伺服器之間,並不是依靠網址來通訊連線的,而是透過一個 IP 地址,ex: http://192.XXX.XX.27:5003,只不過這樣一長串的數字並不利於人腦記憶,而且 IP 地址是浮動的,因此才會設置相對應的網域名稱!


我們透過瀏覽器輸入網址,並發出網路請求後,會先連線到 DNS (Domain Name Server),根據 URL 內的 Domain,去找到這個網域所對應的 IP 地址,再將我們的請求導入該 IP 地址,取得請求的資源。


那麼今天我有一組 URL ,我想在開發時取得 URL 上的字串來進行後續開發的判斷條件,執行不同的 function ,則可以使用瀏覽器本身的 Web api 來取得。


詳細作法參考 URLSearchParams MDN 裡面的範例就可以了,可以使用 get() 取得當前 query,用 append() 添加新的 query 等。


另外要注意的是,某些符號在 URL 上屬於保留字元,例如 &,如果一定要使用保留字元,就必須進行轉碼


encodeURIdecodeURI 對整個 URL 進行轉碼

encodeURIComponentdecodeURIComponent 僅對查詢參數進行轉碼


const uri ='https://mozilla.org/?x=шеллы';
const encodeUri = encodeURI(uri);

console.log(encodeUri);
// "https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"


今天的筆記就到這邊啦~

我是Amber,前端學習中,歡迎交流討論🧸


參考資料:

URL意思是什麼?一篇了解網址結構怎麼設計及使用!

URL中的保留和不安全字符



avatar-img
23會員
22內容數
留言
avatar-img
留言分享你的想法!
Amber hh的沙龍 的其他內容
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
之前在 學習筆記 | 關於 Cookie、Session、Token 這篇筆記有提到,瀏覽器需要帶著使用者的身分訊息或經過身分驗證後取得的Token(令牌),才能向伺服器請求資源,那麼瀏覽器就必須有個空間來儲存這些 Token 資訊,這篇就是要來記錄瀏覽器常見的儲存空間啦~
上一篇筆記講到了瀏覽器與伺服器之間,經過身分驗證後,就會改以 Token 這個令牌作為通行證,不需要再反覆驗證,那麼這篇紀錄的就是目前最常使用的 JWT (JSON Web Token) 啦! 可以搭配 JWT 的網站來玩看看 JWT(JSON Web Token) 顧名思義就是以 JSON
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
之前在 學習筆記 | 關於 Cookie、Session、Token 這篇筆記有提到,瀏覽器需要帶著使用者的身分訊息或經過身分驗證後取得的Token(令牌),才能向伺服器請求資源,那麼瀏覽器就必須有個空間來儲存這些 Token 資訊,這篇就是要來記錄瀏覽器常見的儲存空間啦~
上一篇筆記講到了瀏覽器與伺服器之間,經過身分驗證後,就會改以 Token 這個令牌作為通行證,不需要再反覆驗證,那麼這篇紀錄的就是目前最常使用的 JWT (JSON Web Token) 啦! 可以搭配 JWT 的網站來玩看看 JWT(JSON Web Token) 顧名思義就是以 JSON
延續先前的筆記,「網路請求」是瀏覽器和伺服器的溝通橋梁,目的是為了取得資料庫內的資源,除了 CORS 這種瀏覽器本身的阻擋機制,伺服器也會需要進行「身分驗證或授權」這道阻擋,並不是使用者有帶上 header 告知身分,就一定可以把資料 response 回來的。
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
你可能也想看
Google News 追蹤
Thumbnail
全方位分析脫離繼承戰的方法,大膽猜測誰會成為卡丁國下一任國王。
Thumbnail
Token「代幣」的另一個名稱是 詞法單元 (Lexical unit)。 解釋: 在電腦科學中,代幣 (token) 指的是程式語言中具有語法意義的最小單位。它也被稱為詞法單元 (lexical unit) 或 詞素 (lexeme)。 代幣是編譯器或直譯器在詞法分析階段識別出的程式碼
什麼是網路創業?網路創業有哪些?十大網路創業類型完整解析 網路創業已經成為現代創業的主流選擇,尤其隨著科技和數位平台的進步,創業者擁有越來越多的機會在網上建立自己的事業。但「網路創業有哪些?」是許多新手創業者經常會問的問題。這篇文章將介紹十大常見的網路創業類型,幫助您找到適合自己的創業方向。
Thumbnail
人過世後去哪?如何知道往生者的去處? 佛家語有言:「有德為神,德少為鬼。」若人在世時沒有修行,不懂得斷惡修善,往生以後,百分之七十以上的人都會投胎到餓鬼道;業障更重者,甚至會到地獄受苦刑。 一個人往生後,他的神識會脫離肉體,在還沒有投生到六道前,會經歷中陰身的階段,這在《西藏度亡經》中有詳細介紹
Thumbnail
在股票市場,投資者需要謹慎選擇信賴的股票分析師來降低風險。翁士峻多次錯誤的股票預測已經損害了投資者的信任,顯示翁士峻並不是一個可靠的股票分析師,這篇文章提出了為什麼投資者不應該聽取翁士峻的分析。
Thumbnail
※ Params是什麼? 在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。 ※ Params的兩個功能:
Thumbnail
當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
Thumbnail
資訊架構就像是網站的地圖,讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時,需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構,才能確保用戶體驗。
Thumbnail
經常在社群上看到有人詢問為什麼我的「網站名稱」是網址?要如何修改出現在搜尋結果頁上的網站名稱?因此,本篇文章將解釋什麼是網站名稱、如何撰寫及新增網站名稱。
Thumbnail
我簡單談一下網址的國家代碼。 在網路上,有很多網站,每個網站都有一個網址。 每個網址後面,都有國家代碼(2個英文字),只有一個國家例外。 台灣的國家代碼是tw,看到網址後面是tw,就知道是台灣網站。 中國大陸的國家代碼是cn,看到網址後面是cn,就知道是中國大陸網站。
Thumbnail
之前分享過【網路請求帶參數的方式】,開發者可以透過 URL 代入參數,來向伺服器請求特定的資源,我們當然也可以擷取 URL 的內容,來做為後續開發的判斷條件,這篇就來記錄一下,網址(URL) 和域名(Domain) 是什麼,以及如何取得網址的參數吧! 我們常說的網址連結 URL 完整名稱是 U
Thumbnail
全方位分析脫離繼承戰的方法,大膽猜測誰會成為卡丁國下一任國王。
Thumbnail
Token「代幣」的另一個名稱是 詞法單元 (Lexical unit)。 解釋: 在電腦科學中,代幣 (token) 指的是程式語言中具有語法意義的最小單位。它也被稱為詞法單元 (lexical unit) 或 詞素 (lexeme)。 代幣是編譯器或直譯器在詞法分析階段識別出的程式碼
什麼是網路創業?網路創業有哪些?十大網路創業類型完整解析 網路創業已經成為現代創業的主流選擇,尤其隨著科技和數位平台的進步,創業者擁有越來越多的機會在網上建立自己的事業。但「網路創業有哪些?」是許多新手創業者經常會問的問題。這篇文章將介紹十大常見的網路創業類型,幫助您找到適合自己的創業方向。
Thumbnail
人過世後去哪?如何知道往生者的去處? 佛家語有言:「有德為神,德少為鬼。」若人在世時沒有修行,不懂得斷惡修善,往生以後,百分之七十以上的人都會投胎到餓鬼道;業障更重者,甚至會到地獄受苦刑。 一個人往生後,他的神識會脫離肉體,在還沒有投生到六道前,會經歷中陰身的階段,這在《西藏度亡經》中有詳細介紹
Thumbnail
在股票市場,投資者需要謹慎選擇信賴的股票分析師來降低風險。翁士峻多次錯誤的股票預測已經損害了投資者的信任,顯示翁士峻並不是一個可靠的股票分析師,這篇文章提出了為什麼投資者不應該聽取翁士峻的分析。
Thumbnail
※ Params是什麼? 在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。 ※ Params的兩個功能:
Thumbnail
當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
Thumbnail
資訊架構就像是網站的地圖,讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時,需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構,才能確保用戶體驗。
Thumbnail
經常在社群上看到有人詢問為什麼我的「網站名稱」是網址?要如何修改出現在搜尋結果頁上的網站名稱?因此,本篇文章將解釋什麼是網站名稱、如何撰寫及新增網站名稱。
Thumbnail
我簡單談一下網址的國家代碼。 在網路上,有很多網站,每個網站都有一個網址。 每個網址後面,都有國家代碼(2個英文字),只有一個國家例外。 台灣的國家代碼是tw,看到網址後面是tw,就知道是台灣網站。 中國大陸的國家代碼是cn,看到網址後面是cn,就知道是中國大陸網站。
Thumbnail
之前分享過【網路請求帶參數的方式】,開發者可以透過 URL 代入參數,來向伺服器請求特定的資源,我們當然也可以擷取 URL 的內容,來做為後續開發的判斷條件,這篇就來記錄一下,網址(URL) 和域名(Domain) 是什麼,以及如何取得網址的參數吧! 我們常說的網址連結 URL 完整名稱是 U