[TOC] ## URLSearchParams ``` // 方法一：傳入字符串 var params = new URLSearchParams('?foo=1&bar=2'); // 等同于 var params = new URLSearchParams(document.location.search); // 方法二：傳入數組 var params = new URLSearchParams([['foo', 1], ['bar', 2]]); // 方法三：傳入對象 var params = new URLSearchParams({'foo' : 1 , 'bar' : 2}); ``` 轉為url 參數 當參數中有漢字時,會進行自動轉義 ``` var params = new URLSearchParams({'foo': '你好'}); params.toString() // "foo=%E4%BD%A0%E5%A5%BD" ``` ### .toString() ### append() 改方法不會檢查是否存在重復的鍵名 ``` var params = new URLSearchParams({'foo': 1 , 'bar': 2}); params.append('foo', 3); params.toString() // "foo=1&bar=2&foo=3" ``` ### delete() `params.delete('bar'); ` ### has() `params.has('bar') // true ` ### set() 存在則覆蓋,否則添加 `params.set('foo', 2); ` ### get()/getAll() 存在返回值,不存在返回`null` ### sort() 按`Unicode`排序 ### keys() / values() / entries() 返回遍歷器對象 ``` var params = new URLSearchParams('a=1&b=2'); for(var p of params.keys()) { console.log(p); } // a // b for(var p of params.values()) { console.log(p); } // 1 // 2 for(var p of params.entries()) { console.log(p); } // ["a", "1"] // ["b", "2"] ``` ### 實例 #### 快速獲取當前參數值 ``` var url = new URL(window.location); var foo = url.searchParams.get('foo') || 'somedefault'; ``` #### 快速并接post 的body ``` const params = new URLSearchParams({foo: 1, bar: 2}); fetch('https://example.com/api', { method: 'POST', body: params }).then(...) ```