JS解析URL參數為對象

一、為什麼需要進行URL參數解析

在Web開發中，我們經常需要從URL中獲取參數，以便進行相應的業務邏輯處理。比如搜索引擎的關鍵詞、商品列表的排序方式等。這些參數都需要從URL中進行解析，並轉化為對象，方便後續的處理。因此，進行URL參數解析是Web開發中非常基礎且重要的一步。

二、URL參數的格式

URL參數格式一般為?key1=value1&key2=value2&key3=value3，其中每個參數由「=」連接key和value，不同參數之間以「&」連接。需要注意的是，value中可能會存在特殊字元，需要進行URL編碼，比如空格（%20）、斜杠（%2F）等。

三、使用正則表達式進行URL參數解析

function parseUrl(url) {
  const reg = /([^?&=]+)=([^?&=]*)/g;
  const obj = {};
  url.replace(reg, (match, key, value) => {
    obj[key] = decodeURIComponent(value);
  });
  return obj;
}

以上代碼通過正則表達式對URL參數進行解析，解析後的結果存儲在一個對象中，該對象的key為參數名，value為參數值。其中，正則表達式的含義為匹配「非?&=」字元 一或多次+「=」+「非?&=」字元零或多次」，g代表全局匹配。使用replace方法對URL參數進行替換，並調用decodeURIComponent方法對value進行解碼。

四、使用URLSearchParams進行URL參數解析

const searchParams = new URLSearchParams('?key1=value1&key2=value2');
const obj = {};
for (let [key, value] of searchParams.entries()) {
  obj[key] = value;
}

以上代碼使用URLSearchParams對象進行URL參數解析，將解析後的結果存儲在一個對象中，該對象的key為參數名，value為參數值。使用URLSearchParams的entries方法遍歷所有的參數，並將其存儲到對象中。

五、封裝成工具函數

function parseUrl(url) {
  const searchParams = new URLSearchParams(url.split('?')[1]);
  const obj = {};
  for (let [key, value] of searchParams.entries()) {  
    obj[key] = value;
  }
  return obj;
}

以上代碼將URL參數解析的邏輯封裝成一個工具函數，方便在項目中進行調用。