普段、クエリストリングをパースしたい場合は qs を使っています。
qs.parse('key=value'); // => { key: 'value' }
しかし、qsを読み込むほどでもない場合、例えば自分で決めたURLのパラメーターをパースしたい場合などは自作の関数を使っています。
function convertQueryStringToObject(query = '') { const obj = {}; const params = query.split(/[?&]/); for (let i = 0; i < params.length; ++i) { const array = params[i].split('='); const key = decode(array[0]); const value = decode(array[1]); if (key) { obj[key] = value; } } return obj; } function fixedDecodeURIComponent(str) { return decodeURIComponent(str.replace(/[!'()*]/g, unescape)); } function decode(arg) { return arg ? fixedDecodeURIComponent(arg) : null; }
convertQueryStringToObject('key=value'); // => { key: 'value' }
location.searchをパースすることを想定しているので、?が付いていたり、エンコードされていたりしても大丈夫なようになっています。
convertQueryStringToObject('?key=value'); // => { key: 'value' }
convertQueryStringToObject('?key=%E3%83%90%E3%83%AA%E3%83%A5%E3%83%BC'); // => { key: 'バリュー' }
ただし、ネストには対応していません。
これ以上の機能が必要になった場合は素直にqsを使うようにしています。
qs.parse('a%5Bb%5D=c'); // => { a: { b: 'c' } } ⭕️ convertQueryStringToObject(); // => { a[b]: 'c' } ❌