URLSearchParams 接口

URLSearchParams 接口定義了不少個用來處理 URL 參數串的方法。

---

基本使用方法以下

var paramsString = "q=URLUtils.searchParams&topic=api"  // location.search.slice(1)
var searchParams = new URLSearchParams(paramsString);

searchParams.has('topic') // true
searchParams.get('topic') // "api"
searchParams.getAll('topic') // ["api"]

searchParams.get('foo') // null，注意Firefox返回空字符串
searchParams.set('foo', 2);
searchParams.get('foo') // 2

searchParams.append('topic', 'webdev');
searchParams.toString() // "q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"

searchParams.append('foo', 3);
searchParams.getAll('foo') // [2, 3]

searchParams.delete('topic');
searchParams.toString() // "q=URLUtils.searchParams&foo=2&foo=3"

---

URLSearchParams 還有三個方法返回迭代器對象：
keys() 遍歷全部參數名
values() 遍歷全部參數值
entries() 遍歷全部參數的鍵值對

---

URLSearchParams實例能夠看成POST數據發送，全部數據都會URL編碼。

fetch('https://example.com/api', {
  method: 'POST',
  body: params
}).then(...)

---

DOM 的 a 元素節點的 searchParams 屬性，就是一個 URLSearchParams 實例。

var a = document.createElement('a');
a.href = 'https://example.com?filter=api';
a.searchParams.get('filter') // "api"

URLSearchParams 還能夠與 URL 接口結合使用。

var url = new URL(location);
var foo = url.searchParams.get('foo') || 'somedefault';