JavaScriptでURLパラメータを取得する関数

最終更新日:

Webページにおいてパフォーマンスを向上させるための一つのカギになるのが「URLパラメータ」です。ベースとなる静的なURLに「?」を付け加えて、それ以降の文字列をパラメータとして定義することができます。

通常、URLパラメータの取得はPHPファイルにて「$_GET[”]」を使って行われることが多いですが、JavaScriptでも取得することができます。

今回はJavaScriptでURLパラメータを取得する関数を紹介します。

 

 

サンプルコード

それでは早速自作のサンプルコードを紹介します。

 

URL

https://example.com/sample.php?s=hello%20everyone

 

JavaScript

 

Console(結果)

hello everyone

 

 

解説

URLの構成

あくまでもサンプルのURLになります。実在するものとは関係はありません。このURLではベースのURLパスの後ろに「?」が付いています。ここからがパラメータです。

上のURLでは「s = “hello everyone”」という内容になっています。

%20はURLにおける半角スペースで、文字列として取得するためにはデコードする必要があります

 

get_url_query()

この関数には引数はありません。ページURLの?以降の文字列を取得し、複数のパラメータに対応するために「&」で分割して配列に格納します。

そしてそれぞれのパラメータを「=」で分割して、インデックスと内容を取得し、辞書配列に格納します。

最後にその辞書配列を返します。この時、URLパラメータが存在しなかった場合は空の配列が返されます。

 

関数の利用

関数の利用方法はいたってシンプルです。呼び出すことでパラメータの辞書配列を取得し、該当のパラメータが存在するかをifで判定します。

そして存在したらその内容をコンソールに出力するプログラムになっています。%20はデコードされているので、半角スペースとなっています。

 

 

活用例

この方法が最適なのかはよくわからないですが、当サイトの一部の機能でもこの手法を利用しています。 以下は当サイトの、CPUベンチマーク表(Passmark)ページになります。URLにて「cpu」という名前のパラメータを設定するとその内容を検索した状態にアクセスできます。

試しに「Core i7」などと入力して「Go!」を押してみてください。

 

https://bablishe.com/benchmarks/cpu-passmark?cpu=

 

使い道は他にもきっとあるはずです。







アンケート

期限:2020/11/30

こちらの記事に興味があるかもしれません


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


検索

Googleアドセンス

JUNKI

純輝
ちなみに私は富岡義勇推しですよ

Twitter Youtube Instagram