JavaScript - Location 物件

Hello, 有志於網頁開發的各位！今天，我們將要深入探討 JavaScript 中最有用和最有趣的物件之一：Location 物件。作為你們親切友善的電腦老師，我很興奮能夠帶領你們進行這次旅程。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

Window Location 物件

Location 物件就像是你的網頁瀏覽器的 GPS。它包含了關於瀏覽器窗口當前 URL 的信息，並提供了更改該 URL 的方法。把它當作你在浩瀚的網絡海洋中的個人導航員吧！

要訪問 Location 物件，我們使用 window.location 或者簡單的 location。讓我們看一個簡單的例子：

console.log(window.location);
console.log(location); // 兩個都會給出相同的結果

如果你在瀏覽器的控制台中運行這段代碼，你會看到當前頁面 URL 的所有屬性。很酷，對吧？

JavaScript Location 物件屬性

現在，讓我們分解 Location 物件的不同的屬性。這些屬性就像是地址的不同部分，每個都給我們提供關於我們在網絡上的具體位置的信息。

1. href

href 屬性給我們當前頁面的完整 URL。

console.log(location.href);
// 輸出可能是：https://www.example.com/page?id=123#section

2. protocol

這個屬性告訴我們使用的是哪種協議（通常是 "http:" 或 "https:"）。

console.log(location.protocol);
// 輸出：https:

3. host

host 屬性給我們域名和端口號（如果指定了的話）。

console.log(location.host);
// 輸出可能是：www.example.com:8080

4. hostname

與 host 相似，但 hostname 只給我們域名，不包括端口。

console.log(location.hostname);
// 輸出：www.example.com

5. port

這個屬性指定 URL 的端口號。

console.log(location.port);
// 輸出可能是：8080（或者如果是默認端口，則為空）

6. pathname

pathname 屬性給我們 URL 的路徑（域名之後的一切）。

console.log(location.pathname);
// 輸出可能是：/page

7. search

這個屬性返回 URL 的查詢字符串部分（包括 '?'）。

console.log(location.search);
// 輸出可能是：?id=123

8. hash

hash 屬性給我們 URL 的锚點部分（包括 '#'）。

console.log(location.hash);
// 輸出可能是：#section

JavaScript Location 物件方法

現在，我們已經探索了屬性，讓我們看看一些讓我們與 Location 物件交互的方法。這些方法就像是我們網頁瀏覽器 GPS 的控制器。

1. assign()

assign() 方法加載新的文檔。

location.assign("https://www.example.com");

這就像是在你的地址欄中輸入一個新的 URL 然後按 enter 鍵。

2. reload()

正如其名所示，這個方法重新加載當前文檔。

location.reload();

這等於在你的瀏覽器中點擊刷新按鈕。

3. replace()

replace() 方法用新的文檔替換當前文檔。

location.replace("https://www.example.com");

replace() 和 assign() 的區別在於，replace() 不会在瀏覽器歷史中創建新的條目，所以用戶不能使用後退按鈕回到原始頁面。

Location 物件屬性列表

這裡有一個方便的表格，總結了我們討論過的所有 Location 物件屬性：

屬性	描述
href	完整的 URL
protocol	URL 的協議方案（例如，"http:" 或 "https:"）
host	URL 的主機名和端口
hostname	URL 的主機名
port	服務器為 URL 使用的端口號
pathname	URL 的路徑和文件名
search	URL 的查詢部分
hash	URL 的锚點部分

Location 物件方法列表

這裡有一個總結 Location 物件方法的表格：

方法	描述
assign()	加載新的文檔
reload()	重新加載當前文檔
replace()	用新的文檔替換當前文檔

至此，你已經對 JavaScript Location 物件進行了一次宏偉的巡禮。記住，就像任何好的 GPS 一樣，Location 物件在那裡幫助你導航和控制你的網頁。

當我們結束時，我想起了一個有趣的故鄉，在我教學的早期時候。我曾經有一個學生對使用 location.reload() 方法非常興奮，他不小心創造了一個無限循環，導致他的瀏覽器無休止地刷新。我們對此開玩笑，但它教給了我們一個重要的教訓：能力越大，責任越大！

我希望這個指南對你有幫助，並且你對在 JavaScript 冒險中使用 Location 物件感到更有信心。繼續練習，保持好奇心，並且快樂編程！

Credits: Image by storyset