JavaScriptでqsを使わずに簡単なクエリストリングをパースしてオブジェクトに変換する 📝

普段、クエリストリングをパースしたい場合は qs を使っています。

www.npmjs.com

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' } ❌