JavaScript使用URLSearchParams優(yōu)雅獲取URL攜帶的參數(shù)

更新時間：2025年08月18日 08:20:35 作者：南風(fēng)晚來晚相識

這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用URLSearchParams優(yōu)雅獲取URL攜帶的參數(shù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下

需求描述

今天遇見一個問題，再請求接口的時候。

需要知道返回來的url中某個參數(shù)的值與返回來的數(shù)據(jù)是否匹配。

因此我們需要獲取URL攜帶的參數(shù)的參數(shù)值。

我知道這個需求對很多小伙伴來說，非常簡單。三下五除二就寫下了如下的代碼

獲取url地址欄中的參數(shù)

思路如下：

1，通過string.split方法通過?分割成為2部分，得到aaa=newList&regionDd=12345&user=zhangsan

2，然后在通過 & 分割成為2部分，得到aaa=newList， regionDd=12345， user=zhangsan

3，最后在通過 = 分割成為key:value的形式

const responseURL  = "http://localhost:8088/list/query-list/?aaa=newList&regionDd=12345&user=zhangsan"
// 上面這個字符串，我想獲取到aaa的值是 newList。應(yīng)該如何實現(xiàn)
function parseUrlParams(url,keyName) {
  const queryString = url.split('?')[1];
  if (!queryString) return undefined;
  const params = {};
  const pairs = queryString.split('&');
  console.log('pairs', pairs)
  for (let pairItem of pairs) {
    const [key, value] = pairItem.split('=');
    params[decodeURIComponent(key)] = decodeURIComponent(value || '');
  }
  return params[keyName];
}

console.log(parseUrlParams(responseURL,'user'))

decodeURIComponent 的作用

有的小伙伴看見我使用了decodeURIComponent，想知道decodeURIComponent的作用？

decodeURIComponent 的作用是將 URL 編碼后的參數(shù)名和參數(shù)值還原為人類可讀的原始字符。

確保解析后的參數(shù)值符合預(yù)期。

具體說明:

URL 中某些特殊字符（如空格、&, =, 中文等）會被編碼成 % 開頭的格式（例如空格變成 %20，中文可能變成 %E4%B8%AD）。

decodeURIComponent 兼容性非常好。

encodeURIComponent 的作用說明

假設(shè) URL 是：

"http://example.com?user=abc%20test&name=%E5%BC%A0%E4%B8%89"

原始參數(shù)值：

user = abc test
name= '張三'

未解碼的結(jié)果

{user: 'abc%20test', name: '%E5%BC%A0%E4%B8%89'}

使用 decodeURIComponent 解碼后：

{user: 'abc test', name: '張三'}

URLSearchParams 的簡單說明

除了使用上面的方法，其實還有一個方法可以更加優(yōu)雅的實現(xiàn)。

掌聲有請我們今天的主角。URLSearchParams 閃亮登場。

URLSearchParams 是 ECMAScript 2015(ES6)引入的內(nèi)置對象，用于解析和操作 URL 中的查詢參數(shù)（即 URL 地址欄中 "?" 后面的部分）

URLSearchParams 是瀏覽器原生 API，能自動處理 URL 編碼（如 %20 轉(zhuǎn)空格）。

通過 .get(name) 獲取參數(shù)值，若參數(shù)不存在則返回 null

如果 URL 中存在多個同名參數(shù)（如 dim=abc&dim=cvm）, get() 會返回第一個值abc

params.set(key, value) 如果key不存在就是新增參數(shù)，如果key存在就是修改參數(shù)值

params.del(key) 刪除某個參數(shù)

URLSearchParams 新增，修改，刪除參數(shù)

const responseURL  = "http://example.com?user=abc%20test&name=%E5%BC%A0%E4%B8%89"
const queryString = responseURL.split('?')[1];
if(queryString){
  const params = new URLSearchParams(queryString);
  // name存在，更改參數(shù)
  params.set('name', '華佗'); 
  // sex不存在，設(shè)置新的參數(shù)  
  params.set('sex', '男'); 
  // 刪除user這個參數(shù)
  params.delete('user')
  console.log(22, params)
}

使用 URLSearchParams 解析參數(shù)

// url還是之前那個參數(shù)
const responseURL  = "http://example.com?user=abc%20test&name=%E5%BC%A0%E4%B8%89"
function parseUrlParams(url) {
  // 分割出查詢參數(shù)部分
  const queryString = url.split('?')[1];
  if (!queryString) return undefined;
 
  // 使用 URLSearchParams 解析參數(shù)
  const params = new URLSearchParams(queryString);
  // 直接獲取 user 參數(shù)值
  return params.get('user'); // 返回 "abc test"
}
console.log(parseUrlParams(responseURL))

URLSearchParams瀏覽器的兼容性

Chrome 49+
Firefox 18+
Edge 14+
Safari 10.1+
Opera 36+

以上支持。

不支持：Internet Explorer 全系列（包括 IE11）

兼容性處理

const responseURL  = "http://localhost:8088/list/query-list/?aaa=newList&regionDd=12345&user=zhangsan"
function parseUrlParams(url, keyName) {
  try {
    const queryString = url.split('?')[1];
    if (!queryString) return undefined;
    
    // 優(yōu)先使用原生 API
    if (window.URLSearchParams) {
      return new URLSearchParams(queryString).get(keyName);
    }
    // 兼容舊版瀏覽器的解析方案
    const params = {};
    queryString.split('&').forEach(pairItem => {
      const [key, value] = pairItem.split('=');
      params[decodeURIComponent(key)] = decodeURIComponent(value || '');
    });
    return params[keyName];
  } catch (e) {
    console.error('URL 解析失敗:', e);
    return undefined;
  }
}
console.log(parseUrlParams(responseURL, 'aaa'));

到此這篇關(guān)于JavaScript使用URLSearchParams優(yōu)雅獲取URL攜帶的參數(shù)的文章就介紹到這了,更多相關(guān)JavaScript獲取URL攜帶參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: