2020 ES6 / 7/8以降
ES6以降では、この問題のパフォーマンスの高いソリューションを作成するために、JavaScriptにはいくつかの構成要素が用意されています。
これには、URLSearchParamsとイテレータの使用が含まれます
let params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
params.get("abc"); // "foo"
ユースケースで実際にオブジェクトに変換する必要がある場合は、次の関数を実装できます。
function paramsToObject(entries) {
let result = {}
for(let entry of entries) { // each 'entry' is a [key, value] tupple
const [key, value] = entry;
result[key] = value;
}
return result;
}
基本デモ
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const entries = urlParams.entries(); //returns an iterator of decoded [key,value] tuples
const params = paramsToObject(entries); //{abc:"foo",def:"[asf]",xyz:"5"}
Object.fromEntriesとspreadを使用する
Object.fromEntries（現在はステージ4にあります）をに置き換えparamsToObjectて使用できますObject.fromEntries(entries)。
反復する値のペアは、リストの名前と値のペアであり、キーは名前、値は値です。
URLParamsは反復可能なオブジェクトを返すため、呼び出す代わりに拡散演算子を使用する.entriesと、仕様に従ってエントリも生成されます。
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}
注：すべての値は、URLSearchParams仕様に従って自動的に文字列になります。
複数の同じキー
以下のよう@siipeは指摘し、複数の同じキー値を含む文字列は、使用可能な最後の値に強制されます。foo=first_value&foo=second_value本質的になります：{foo: "second_value"}。
この回答に従って：https : //stackoverflow.com/a/1746566/1194694それをどうするかを決定するための仕様はなく、各フレームワークは異なる動作をすることができます。
一般的な使用例は、2つの同じ値を配列に結合して、出力オブジェクトを次のようにすることです。
{foo: ["first_value", "second_value"]}
これは、次のコードで実現できます。
const groupParamsByKey = (params) => [...params.entries()].reduce((acc, tuple) => {
// getting the key and value from each tuple
const [key, val] = tuple;
if(acc.hasOwnProperty(key)) {
// if the current key is already an array, we'll add the value to it
if(Array.isArray(acc[key])) {
acc[key] = [...acc[key], val]
} else {
// if it's not an array, but contains a value, we'll convert it into an array
// and add the current value to it
acc[key] = [acc[key], val];
}
} else {
// plain assignment if no special case is present
acc[key] = val;
}
return acc;
}, {});
const params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5&def=dude');
const output = groupParamsByKey(params) // {abc: "foo", def: ["[asf]", "dude"], xyz: 5}