什麼是網址 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
留言分享你的想法!
avatar-img
Amber hh的沙龍
23會員
22內容數
Amber hh的沙龍的其他內容
2024/09/04
第三次月會來了!這個月的主題是「工程師的溝通秘訣」 很多人認為,當工程師只要跟電腦對話就好,在轉職之前我也這麼認為的,尤其是以前在服務業工作,從早到晚跟客戶對談、處理他們各種疑難雜症和情緒的過程,實在太容易讓我感到心累了,倒不如整天跟電腦對話,對錯很明顯,也不用顧及雙方情緒,肯定比處理客訴簡單
Thumbnail
2024/09/04
第三次月會來了!這個月的主題是「工程師的溝通秘訣」 很多人認為,當工程師只要跟電腦對話就好,在轉職之前我也這麼認為的,尤其是以前在服務業工作,從早到晚跟客戶對談、處理他們各種疑難雜症和情緒的過程,實在太容易讓我感到心累了,倒不如整天跟電腦對話,對錯很明顯,也不用顧及雙方情緒,肯定比處理客訴簡單
Thumbnail
2024/08/03
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
2024/08/03
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
2024/07/24
剛開始學前端都是跟著六角的課程進度走,雖然知道自己不會的技術很多,但至少有明確的學習目標,也會定期產出結果,當時的焦慮來源只覺得時間總是不夠,殊不知真正踏入實務工作後,除了焦慮時間不夠之外,甚至還有點迷失了方向。 轉職後的公司僅一人前端,我沒有 mentor 帶領,也找不到可以效仿學習的 Ro
Thumbnail
2024/07/24
剛開始學前端都是跟著六角的課程進度走,雖然知道自己不會的技術很多,但至少有明確的學習目標,也會定期產出結果,當時的焦慮來源只覺得時間總是不夠,殊不知真正踏入實務工作後,除了焦慮時間不夠之外,甚至還有點迷失了方向。 轉職後的公司僅一人前端,我沒有 mentor 帶領,也找不到可以效仿學習的 Ro
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
錨點文字是網站內容中的重要元素,它不僅可以引導讀者瀏覽網頁,還可以增加網站的SEO價值和流量。本文介紹了錨點文字的功用,並提出了幾項應用技巧,包括善用多樣化的錨點文字、使用相關的錨點文字和保持簡潔扼要。希望本文能幫助讀者更深入瞭解錨點文字的重要性,並能夠運用到自己的網站中。
Thumbnail
錨點文字是網站內容中的重要元素,它不僅可以引導讀者瀏覽網頁,還可以增加網站的SEO價值和流量。本文介紹了錨點文字的功用,並提出了幾項應用技巧,包括善用多樣化的錨點文字、使用相關的錨點文字和保持簡潔扼要。希望本文能幫助讀者更深入瞭解錨點文字的重要性,並能夠運用到自己的網站中。
Thumbnail
資訊架構就像是網站的地圖,讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時,需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構,才能確保用戶體驗。
Thumbnail
資訊架構就像是網站的地圖,讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時,需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構,才能確保用戶體驗。
Thumbnail
在今天的數字時代,網路不僅僅是資訊的來源,更是企業發展和個人品牌建立的關鍵所在。然而,無論你是管理自己的網站還是在數位行銷領域工作,若未能掌握搜索引擎優化(SEO)的精髓,你將面臨被淹沒在網路浪潮中的風險。 SEO不僅是提升網站排名的技術,更是通往持久流量和高質量訪客的大門。每一次的搜尋,背後都有
Thumbnail
在今天的數字時代,網路不僅僅是資訊的來源,更是企業發展和個人品牌建立的關鍵所在。然而,無論你是管理自己的網站還是在數位行銷領域工作,若未能掌握搜索引擎優化(SEO)的精髓,你將面臨被淹沒在網路浪潮中的風險。 SEO不僅是提升網站排名的技術,更是通往持久流量和高質量訪客的大門。每一次的搜尋,背後都有
Thumbnail
經常在社群上看到有人詢問為什麼我的「網站名稱」是網址?要如何修改出現在搜尋結果頁上的網站名稱?因此,本篇文章將解釋什麼是網站名稱、如何撰寫及新增網站名稱。
Thumbnail
經常在社群上看到有人詢問為什麼我的「網站名稱」是網址?要如何修改出現在搜尋結果頁上的網站名稱?因此,本篇文章將解釋什麼是網站名稱、如何撰寫及新增網站名稱。
Thumbnail
之前分享過【網路請求帶參數的方式】,開發者可以透過 URL 代入參數,來向伺服器請求特定的資源,我們當然也可以擷取 URL 的內容,來做為後續開發的判斷條件,這篇就來記錄一下,網址(URL) 和域名(Domain) 是什麼,以及如何取得網址的參數吧! 我們常說的網址連結 URL 完整名稱是 U
Thumbnail
之前分享過【網路請求帶參數的方式】,開發者可以透過 URL 代入參數,來向伺服器請求特定的資源,我們當然也可以擷取 URL 的內容,來做為後續開發的判斷條件,這篇就來記錄一下,網址(URL) 和域名(Domain) 是什麼,以及如何取得網址的參數吧! 我們常說的網址連結 URL 完整名稱是 U
Thumbnail
在當今數位時代,搜尋引擎排名對於各大企業、各式品牌,以及創作者的重要性已經不言而喻。然而,許多人在追求「高排名」時卻陷入了一些「誤區」,例如:砸大錢買不知所謂的社群廣告、常自......
Thumbnail
在當今數位時代,搜尋引擎排名對於各大企業、各式品牌,以及創作者的重要性已經不言而喻。然而,許多人在追求「高排名」時卻陷入了一些「誤區」,例如:砸大錢買不知所謂的社群廣告、常自......
Thumbnail
最近發現有很多的網站的做法都是先找到某個不錯的關鍵字,然後直接用關鍵字當作網域名稱。 接著把網站首頁作為主要頁面,然後其他頁面圍繞著相同主題然後堆廣首頁。 這樣做的好處是,因為首頁一般來說擁有最高的權重。如果可以把首頁作為主要頁面並集中推廣,那就有機會搶下這個關鍵字。 主要的關鍵字就是
Thumbnail
最近發現有很多的網站的做法都是先找到某個不錯的關鍵字,然後直接用關鍵字當作網域名稱。 接著把網站首頁作為主要頁面,然後其他頁面圍繞著相同主題然後堆廣首頁。 這樣做的好處是,因為首頁一般來說擁有最高的權重。如果可以把首頁作為主要頁面並集中推廣,那就有機會搶下這個關鍵字。 主要的關鍵字就是
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News