聊聊URL參數和JS物件的相互轉換方法

在前端開發的過程中，我們常常會遇到 URL 參數與 JavaScript 中的物件之間需要相互轉換的情況。比方說，當我們需要利用URL 的查詢參數來控制頁面的行為時，我們就需要將URL 參數解析為JavaScript 中的物件進行操作；又或者，當我們需要將頁面上的一些資料傳遞給伺服器時，我們就需要將物件轉換為URL​​ 參數進行請求。

本文將介紹 URL 參數和 JavaScript 中物件的相互轉換方法，並提供一些實用的程式碼範例。

1. URL 參數轉換為JavaScript 物件

對於URL 參數轉換為JavaScript 對象，我們首先需要將URL 參數解析為一個字串，然後再解析為一個對象。

1.1 解析 URL 參數為字串

我們可以使用 JavaScript 中的 window.location.search 方法來取得目前頁面 URL 中的查詢參數。這個方法傳回的字串包含了 URL 中 ? 之後的所有內容，但不包括 # 以及其後面的錨點參數。

以下是一個取得目前頁面URL 查詢參數的範例程式碼：

const queryString = window.location.search;

如果我們希望取得其他頁面URL 中的查詢參數，可以使用new URL(urlString).search 方法，將需要解析的URL 傳入即可。例如：

const url = "https://example.com/page/?name=John&age=20";
const queryString = new URL(url).search; // 返回"?name=John&age=20"

1.2 解析查詢參數為物件

接下來，我們需要將查詢參數的字串解析為 JavaScript 中的物件。我們可以手動編寫一個解析函數，但這裡推薦使用第三方函式庫 query-string，該函式庫提供了一些便捷的解析方法。

首先，我們需要使用npm 或yarn 來將query-string 函式庫加入到專案中：

npm install query-string --save
# 或者
yarn add query-string

然後我們便可以使用該函式庫中提供的parse 方法，將URL 查詢參數的字串轉換為物件。例如：

import queryString from 'query-string';

const values = queryString.parse(queryString);

其中，values 就是一個解析後的物件。例如，如果queryString 為"?name=John&age=20"，那麼values 就為{name: "John", age: "20 "}。

2. JavaScript 物件轉換為URL​​ 參數

當我們需要將JavaScript 中的物件轉換為URL​​ 參數時，我們需要將物件中的每個鍵值對進行拼接，形成一個URL 查詢參數的字串。

2.1 將物件轉換為字串

我們可以手動編寫一個轉換函數，首先遍歷物件中的所有鍵值對，將它們轉換為"key=value" 格式，然後使用"&" 符號連接起來。例如：

function toQueryString(obj) {
  const parts = [];
  
  for (const [key, value] of Object.entries(obj)) {
    parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
  }
  
  return parts.join('&');
}

const values = {
  name: "John",
  age: 20
};

const queryString = toQueryString(values);
// 返回 "name=John&age=20"

注意，我們在將每個鍵值對編碼為字串時，使用了 encodeURIComponent 方法。這個方法可以將字串中的特殊字元進行編碼，防止出現非法的 URL 查詢參數。例如，如果鍵值對中包含一個特殊字元 "?", 它會被轉換為 "?" 這樣的編碼字串。

2.2 將字串加入到 URL 中

現在我們已經將 JavaScript 物件轉換為了一個字串，接下來的任務就是將它加入到 URL 中。

如果我們要直接修改目前視窗 URL 中的查詢參數，可以使用 window.location.search 屬性來修改。例如：

const queryString = toQueryString(values);
window.location.search = queryString;

如果我們是要建構一個新的URL，並且進行跳轉，可以使用window.location.href 屬性或window.location.replace方法。例如：

const queryString = toQueryString(values);
const url = `https://example.com/page/?${queryString}`;
window.location.href = url;
// 或者
window.location.replace(url);

注意，這裡我們需要自己拼接完整的 URL，而不能簡單地使用 window.location.search。因為 search 屬性只會傳回目前 URL 中的查詢參數部分，我們還需要手動拼接主機名稱、路徑名稱、錨點參數等。

總結

本文介紹了 URL 參數和 JavaScript 中物件的相互轉換方法。我們可以透過 location.search 方法來取得 URL 中的查詢參數，並使用 query-string 函式庫來將查詢參數字串解析為 JavaScript 物件。反之，我們也可以手動編寫輔助函數將 JavaScript 物件轉換為查詢參數字串，並將其新增到 URL 中。

以上操作都很簡單，但在實際的前端開發中會常用到，希望能幫助讀者們。

以上是聊聊URL參數和JS物件的相互轉換方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！