location.search詳解

一、location.search方法

location.search方法用於獲取URL中的查詢字元串部分，即URL中「？」後面的字元串，如果沒有則返回空字元串「」。

// 獲取當前頁面的查詢字元串
const queryString = location.search;
console.log(queryString);

該方法可以直接對查詢字元串進行修改，也可以通過location.href進行跳轉。

// 修改當前URL的查詢字元串為"id=12345"
location.search = "id=12345";

// 跳轉到/url路徑並帶上查詢字元串"name=John&age=20"
location.href = "/url" + "?name=John&age=20";

二、location.search怎麼讀

要讀取查詢字元串中的參數值，需要先將查詢字元串進行解析，解析出來的結果是一個參數名與參數值之間的映射關係。

// 將查詢字元串解析為參數名和參數值對應關係的對象
function parseQueryString(queryString) {
  const params = {};
  queryString
    .substring(1)
    .split("&")
    .forEach((param) => {
      const [key, value] = param.split("=");
      params[decodeURIComponent(key)] = decodeURIComponent(value);
    });
  return params;
}

// 獲取當前URL的查詢字元串，並解析為參數名和參數值對應關係
const params = parseQueryString(location.search);

// 獲取相應參數的值
console.log(params["id"]);
console.log(params["name"]);
console.log(params["age"]);

當參數值為數組時，可以通過在參數名後面添加「[]」來表示，例如「http://example.com/?id[]=1&id[]=2&id[]=3」。

// 將查詢字元串解析為參數名和參數值對應關係的對象
function parseQueryString(queryString) {
  const params = {};
  queryString
    .substring(1)
    .split("&")
    .forEach((param) => {
      const [key, value] = param.split("=");
      const decodedKey = decodeURIComponent(key);
      if (/\[\]$/.test(decodedKey)) {
        const realKey = decodedKey.substring(0, decodedKey.length - 2);
        if (params[realKey]) {
          params[realKey].push(decodeURIComponent(value));
        } else {
          params[realKey] = [decodeURIComponent(value)];
        }
      } else {
        params[decodedKey] = decodeURIComponent(value);
      }
    });
  return params;
}

// 解析URL中的查詢字元串
const params = parseQueryString(location.search);

// 獲取id參數的所有值
console.log(params["id"]);

三、location.search是什麼

location.search是窗口(window)對象的一個屬性，表示窗口當前所在URL的查詢字元串部分。如果URL中沒有查詢字元串，則該屬性值為「」。

// 判斷當前URL是否包含查詢字元串
if (location.search) {
  console.log("當前URL包含查詢字元串");
} else {
  console.log("當前URL不包含查詢字元串");
}

該屬性值可以直接修改，修改後會重新載入頁面。

// 修改當前URL的查詢字元串為"id=12345"
location.search = "id=12345";

四、location.search什麼意思

location.search表示URL中的查詢字元串部分，即URL中「？」後面的字元串。查詢字元串通常用於向伺服器請求特定的數據或頁面。

例如，以下URL請求了伺服器上名稱為”user”的頁面，並將查詢字元串”id=1234″作為參數傳遞給伺服器：

http://example.com/user?id=1234

伺服器可以根據查詢字元串中的參數值，返回不同的響應結果。前端可以通過location.search獲取當前URL中的查詢字元串，並根據參數值的不同來展現不同的內容。

五、總結

通過對location.search方法的詳細分析，我們了解了如何獲取和設置URL中的查詢字元串，如何解析查詢字元串中的參數名和參數值，以及查詢字元串的應用場景等。這對於我們在開發中使用URL傳遞參數和獲取參數具有一定的實用價值。