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

2019年9月18日

URLのパラメータを取得する方法を解説します！

パラメータによってページの内容を出し分けたり動作を変更したりできるので覚えておくといろいろ使い道があって便利です。

まずはコードから。下の方でパラメータについて解説していきます。

//URLの"?"より後ろを取得
var prmAry = location.search;

//"?"を削除
prmAry = prmAry.slice(1);

//"&"で切って配列に入れる
prmAry = prmAry.split('&');

prmOBJ = new Object();

//パラメータの数だけ繰り返し
for(var i = 0; i&lt;prmAry.length;i++){
    var prmKV = prmAry[i];

    //"="で切って配列に入れる
    prmKV = prmKV.split('=');

    //連想配列に値を格納する
    prmOBJ[prmKV[0]] = prmKV[1];
}
if(prmOBJ.aaa == "bbb"){
    console.log("ok")
}else{
    console.log("ng")
}

//URLの"?"より後ろを取得

var prmAry = location.search;

//"?"を削除

prmAry = prmAry.slice(1);

//"&"で切って配列に入れる

prmAry = prmAry.split('&');

prmOBJ = new Object();

//パラメータの数だけ繰り返し

for(var i = 0; i<prmAry.length;i++){

var prmKV = prmAry[i];

//"="で切って配列に入れる

prmKV = prmKV.split('=');

//連想配列に値を格納する

prmOBJ[prmKV[0]] = prmKV[1];

}

if(prmOBJ.aaa == "bbb"){

console.log("ok")

}else{

console.log("ng")

}

クエリパラメータとは？

URLのうしろにつく文字列で、パラメータ名と値で１つのセットになっている。
aaaがパラメータ名でbbbが値です。
https://xxxxxx.com/?aaa=bbb

複数ある場合は “&” でつなぎます。
https://xxxxxx.com/?aaa=bbb&ccc=ddd

クエリパラメータはどんな時に使う？

例えばリンク1とリンク2で同じURLに飛ばしたいけど表示する内容を変えたい時などは飛び先に、パラメータ aaa の値が bbb だった時、○○するなどとJavaScriptを書くことで表示内容を出し分けることが可能です。

よく使われるので覚えておくととても便利です。