URLのクエリパラメータを取得する

URLのクエリパラメータを取得する処理を、汎用的に使えるようにまとめてみます。

サンプルコード

今回の実装は、URLのクエリパラメータのうち使用したいキーのみを取得する想定になります。

const params = getQueryParams('user', 'id');
console.log(params); // { user: "sophia", id: "214" }

/**
 * 指定したクエリパラメータのキーに対応する値を取得
 *
 * @param {...string} keys - 取得したいクエリパラメータのキー(複数可)
 * @returns {Object} キーとその値のオブジェクト。該当する値がない場合はnull
 *
 * @example
 * // URL: https://example.com/?user=sophia&id=214
 * const params = getQueryParams('user', 'id');
 * console.log(params); // { user: "sophia", id: "214" }
 */
function getQueryParams(...keys) {
  const urlParams = new URLSearchParams(window.location.search);
  const result = {};
  keys.forEach(key => {
    result[key] = urlParams.get(key);
  });
  return result;
}

これでURLのクエリパラメータのうち、使用したいキーの値のみをオブジェクト形式で取得できました。
URLのクエリパラメータを取得するデモページ

補足として、分割代入を使うことで変数として直接使用することもできます。

const {user, id} = getQueryParams('user', 'id');
console.log(user, id); // "sophia" "214"

分割代入で取得するデモページ