【JavaScript】URLパラメータ(クエリ文字列)を取得する

JavaScriptでURLパラメータを取得する方法を紹介します。

URLパラメータとは

URLパラメータとは、URLに含まれる”?(クエスチョンマーク)”以降の文字列です。クエリ文字列とも呼ばれます。Webページへ情報を渡す際に使用されます。

http://www.hogemax.com/page?id=001&name=hoge_in_the_dark

上記例ではidとnameという情報を「http://www.hogemax.com/page」に渡しています。渡す情報が複数ある場合は”&”で区切ります。

JavaScriptでURLパラメータを取得する方法

URLで渡されたパラメータ情報はwindow.location.searchというプロパティに格納されています。ただし、window.location.searchには”?”以降が一つの文字列として入っているため、個々のパラメータ値を取得するためにはURLSearchParamsクラスのget関数を使用します。

// URL「http://www.hogemax.com/page?id=001&name=hoge_in_the_dark」
const params = new URLSearchParams(window.location.search);

// idパラメータの値を取得
const id = params.get("id");
console.log(id);

// nameパラメータの値を取得
const name= params.get("name");
console.log(name);

結果

001
hoge_in_the_dark

// URL「http://www.hogemax.com/page?id=001&name=hoge_in_the_dark」
const params = new URLSearchParams(window.location.search);

// 存在しないパラメータの値を取得
console.log(params.get("test"));

null