先追這段程式
加入兩個 topic：html、css，再加 note「A&B C」。轉成參數文字後重新讀取，核對能否完整還原，不用開啟任何網址。
const params=new URLSearchParams();params.append('topic','html');params.append('topic','css');params.set('note','A&B C');
const encoded=params.toString();const parsed=new URLSearchParams(encoded);
console.log(JSON.stringify({encoded,topics:parsed.getAll('topic'),note:parsed.get('note')}));
{"encoded":"topic=html&topic=css¬e=A%26B+C","topics":["html","css"],"note":"A&B C"}| 資料 | 序列化 | 讀回值 |
|---|---|---|
| topic: html, css | topic=html&topic=css | ["html","css"] |
| note: A&B C | note=A%26B+C | A&B C |
結果為何如此
URLSearchParams 保留有次序的名稱和值。append 加一組，getAll 取該名稱全部值；序列化時 & 變 %26，空格用 +。set 會取代同名值，重複篩選不能隨意改用 set。
比較另一種寫法
手拼文字時，& 被當作分隔符，note 便斷開。重複項目轉成普通物件，也只剩最後一個 topic。
const broken=new URLSearchParams('note=A&B C');const repeated=new URLSearchParams('topic=html&topic=css');
console.log(JSON.stringify({note:broken.get('note'),extraKeys:[...broken.keys()],object:Object.fromEntries(repeated)}));
{"note":"A","extraKeys":["note","B C"],"object":{"topic":"css"}}試清邊界
note 是空字串會否消失？真正的加號又如何保留？
查看參考答案
空 note 仍存在，寫成 note=。用 append 加入的加號會變 %2B，再還原成 +；直接讀參數文字的 + 則表示空格。
const params=new URLSearchParams();params.append('note','');params.append('symbol','+');const parsed=new URLSearchParams(params.toString());
console.log(JSON.stringify({encoded:params.toString(),hasNote:parsed.has('note'),note:parsed.get('note'),symbol:parsed.get('symbol'),rawPlus:new URLSearchParams('symbol=+').get('symbol')}));
{"encoded":"note=&symbol=%2B","hasNote":true,"note":"","symbol":"+","rawPlus":" "}