JavaScript獲取地址欄查詢參數方式彙總

面試官：獲取地址欄查詢參數的方式有哪些？能手寫一個嗎？

本身先想一分鐘

曾幾什麼時候，當我去一家公司面試，面試官問過我這道面試題，我回答上來了卻沒有手寫出來。因此這篇文章只是爲了之後便於學習，故蒐集整理，與君共勉之！線上代碼：Codepen。

1. 正則替換

// 來自掘金前端冒菜師的分享：https://juejin.im/pin/5d19b4fc518825026ec4c34c
// 兼容性更好，IE6+
function getURLParams() {
  const q = {}
  const url = 'https://codepen.io/gongph/pen/YoaJBK?editors=0010&type=new&uuid=2'
  url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => {
    console.log(_, k, v)
    // -> `editors=0010`, `editors`, `0010`
    q[k] = v
  })
  return q
}
複製代碼

該方法返回一個對象。形如：

q = {
  'editors': '0010',
  'type': 'new',
  'uuid': '2'
}

// 所以，若是你想獲取某個查詢參數，好比 `editors`, 直接:
console.log(q['editors'])
// -> '0010'
複製代碼

2. 正則匹配

// 兼容性更好，IE6+
function getUrlParamByName(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 獲取地址欄的查詢參數字符串
  const search = window.location.search;
  if (search) {
    const r = decodeURIComponent(search).substring(1).match(reg);
    if (r) return unescape(r[2]);
  }
  return '';
}
複製代碼

經過參數名便可獲取想要的值，好比：

const val = getUrlParamByName('editors')
console.log(val)
// -> '0010'
複製代碼

3. URL對象

// 來自掘金 Allan91 的分享：https://juejin.im/pin/5d197b8c518825026ec4c311
// 兼容指數：IE10+
function getURLParamByKey(key) {
  const url = 'https://codepen.io/gongph/pen/YoaJBK?editors=0010&type=new&uuid=2'
  return new URL(url).searchParams.get(key)
}
複製代碼

一樣，若是你想獲取某個查詢參數的值，只須要：

const val = getURLParamByKey('editors')
console.log(val)
// -> '0010'
複製代碼

瀏覽器自帶的 URL 處理接口，瞭解更多請參考 MDN。若是採用這種方式獲取，須要作一下 polyfill，你懂得。

4. URLSearchParams 對象

// MDN：https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
// 兼容性：IE尚不支持
function getURLParamByKey (key) {
  const searchParams = new URLSearchParams(location.search)
  return searchParams.get(key)
}
複製代碼

一樣，若是你想獲取某個查詢參數的值，只須要：

const val = getURLParamByKey('editors')
console.log(val)
// -> '0010'
複製代碼

瀏覽器自帶的 URLSearchParams 接口，瞭解更多請參考 MDN。因爲 IE 不支持此接口，須要作兼容性處理。

5. split

這種方式是效率最差，代碼量最多的一種，不推薦。

// 效率最差，代碼量最多
// 面試的時候最好最後一個再說它
// 不要一上來就說它，對面試官的印象很差
function getURLParamsBySplit () {
  // 獲取查詢參數
  var search = location.search
  // 截取`?`後面的參數
  var paramStr = decodeURIComponent(search).substring(1)
  // 經過 split 截取
  var params = paramStr.split('&')
  // 遍歷獲取每一個參數
  var searchObj = {}
  for (let i = 0; i < params.length; i++) {
    // 經過 `=` 截取獲取 key 和 value
    var arr = params[i].split('=')
    // 保存到新對象裏
    // 格式：{ key: value, key2: value2 }
    searchObj[arr[0]] = unescape(arr[1])
   }
   return searchObj
}
複製代碼

這種方式也是將查詢參數轉成對象，獲取時傳對應的 key 便可：

searchObj = {
  'editors': '0010',
  'type': 'edit',
  'uuid': '2'
}

console.log(searchObj['editors'])
// -> '0010'
複製代碼

Enjoy it !

最後

囉嗦了這麼多，但願看到的同窗或多或少有點收穫吧。不對的地方還請留言指正，謝謝。在學習的道路上，只要天天看看社區，看看文檔，寫寫Demo，天天進步一點點，總會有收穫的。俗話說，三人行則必有我師，但願更多志同道合的小夥伴能聚在一塊兒交流技術！下面的羣我在維護，感興趣能夠進來哦！備註來自掘金便可。也能夠加我微信G911214255拉你進羣。