前言
現今網站製作，隨著前後端分離，JS被運用的越來越廣泛，在處裡頁面操作上，已經是算是普遍都會使用的工具。
其中 URL 的處裡，也算是常常會遇到的問題，這邊就來整理製作網頁中，常常用到的幾個 Javascript 取得目前 URL 與相關參數的語法。
Javascript 參數包含哪些
JS 的所有 URL 相關資料，都包含在 location 的語法中，其中包含了：
- location.href
- location.protocol
- location.host
- location.hostname
- location.origin
- location.port
- location.pathname
- location.search
- location.hash
這邊針對以上作個別說明，有需要可以點選以上連結觀看。
location 個參數
以下就針對上面列舉的，一一個別做介紹。
JavaScript 取得 URL 相關參數
這邊我們先假定，我們目前的網址是 :
https://www.website.com:80/type/page.html?id=111&t=9#template接下來，我們用 JS 進行以下操作，來取得上面假定的 URL 資訊。
JS 取得完整網址 : location.href
想取得目前當前完整的網址，使用 location 中的 href，如下：
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.href;
console.log(s)
// 輸出 : https://www.website.com/type/page.html?id=111&t=9#templat</code>JS 取得當前協議 : location.protocol
有時候，我們會需要用 JS 取得網站當前協議，用來判斷網頁目前是 http 還是 https，這時可以使用 location 中的 protocol ，如下：
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.protocol;
console.log(s)
// 輸出 : https:JS 取得目前的網域名稱 : location.host
取得目前網域名稱，在 location 中有兩個可以使用，分別為 host 與 hostname，host 的執行結果如下：
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.host;
console.log(s)
// 輸出 : www.websize.comJS 取得目前的網域名稱 : location.hostname
取得目前網域名稱 ，另一個的方法是使用 hostname 的執行結果如下：
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.hostname;
console.log(s)
// 輸出 : www.websize.comJS 取得包含協定(http/https)的網域名稱 : location.origin
如果你想取得包含前面協定的網址，一般情況可以這樣做
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.protocol + '//' + location.hostname
console.log(s)
// 輸出 : https://www.websize.com另一個較簡潔的作法，是使用 location 中的 origin ，來直接取得名稱， 用法如下 ：
let s = location.origin;
console.log(s)
// 輸出 : https://www.websize.comJS 取得目前端口號 : location.port
取得當前端口的 port ，可以使用 location 中的 port， 用法如下 ：
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.port;
console.log(s)
// 輸出 : 80JS 取得目前頁面路徑 : location.pathname
JS 要取得目前頁面的路徑，使用 location 中的 pathname， 用法如下 ：
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.pathname;
console.log(s)
// 輸出 : /type/page.htmlJS 取得 URL Get 參數字串 : location.search
這應該是製作網頁最常用到的一個，透過 JS 取得 Get 參數，再加以判斷，不過 JS 本身沒辦法單獨取得 Get 參數，通常是透過 location 中的 search 來取得所有 Get 參數的字串，再額外加工處裡。
想知道要如何加工處理，可以留言，有人想知道的話，會再另外發一篇說明。
location 中的 search 用法如下 :
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.search;
console.log(s)
// 輸出 : ?id=111&t=9JS 取得網址錨點名稱 : location.hash
網頁有時候會用錨點，來快速移動到指定的 id 區塊，當 JS 需要取得目前的錨點時，可使用 location 中的 hash，用法如下：
當前網址：
https://www.website.com:80/type/page.html?id=111&t=9#template取得範例：
let s = location.search;
console.log(s)
// 輸出 : #template查看 location 各語法於瀏覽器相容性
寫程式，最常遇見，也是最不願意遇到的，指令在瀏覽器中並不相容，這邊一併整理，location 中各項語法在各個瀏覽器中的相容性，如下
發表迴響