JavaScriptでクエリ文字列を取得する方法

この短い記事では、JavaScript でクエリ文字列を取得するいくつかの異なる方法について説明します。

JavaScript を使用する場合、スクリプト内のクエリ文字列パラメータにアクセスする必要がある場合があります。これを実現できる組み込みの JavaScript 関数やメソッドがないため、これを直接達成する方法はありません。もちろん、要件に合ったサードパーティのユーティリティ スクリプトはたくさんありますが、プレーンな JavaScript を使用して実行することをお勧めします。

この記事では、プレーンな JavaScript でクエリ文字列パラメータを取得するカスタム関数を構築する方法について説明します。後で、URLSearchParams インターフェイスについても調べて、その仕組みとクエリ文字列パラメータの処理にどのように役立つかを理解します。

バニラJavaScriptでクエリ文字列を取得する方法

このセクションでは、プレーンな JavaScript を使用してクエリ文字列値を取得する方法を説明します。

次の JavaScript の例を見てみましょう。

リーリー

URL で使用可能なクエリ文字列パラメータの値を取得するために使用できる getQueryStringValues 関数を作成しました。

関数を見て、それがどのように機能するかを見てみましょう。

次のコード スニペットは、この関数の最も重要なコード スニペットの 1 つです。

リーリー

まず、indexOf メソッドを使用して、URL 内の ? 文字の位置を見つけます。次に、slice メソッドを使用して、URL のクエリ文字列部分を抽出します。最後に、split メソッドを使用して、クエリ文字列を & 文字で分割します。したがって、url 変数はクエリ文字列パラメータ配列を使用して初期化されます。

次に、url 配列のすべての要素をループします。ループ内では、split メソッドを使用して、配列値を = 文字で分割します。このように、arrParamInfo 変数は配列で初期化されます。配列キーはパラメーター名、配列値はパラメーター値です。これは以下のコード スニペットで確認できます。

リーリー

次に、関数に渡されたパラメータと比較します。渡されたパラメーターと一致する場合、パラメーター値を arrParamValues 配列にプッシュします。ご覧のとおり、単一パラメータと配列パラメータも導入しました。

リーリー

最後に、arrParamValues 変数に値が含まれている場合はその値が返され、そうでない場合は null が返されます。

リーリー

別の値を使用して getQueryStringValues 関数のテストを続行できます。

上の例に示すように、さまざまな値で呼び出し、console.log 関数を使用して出力を記録します。注意すべき点は、getQueryStringValues 関数で渡したパラメータがクエリ文字列に配列として存在する場合、応答として配列を取得し、そのパラメータのすべての値を返すことです。

URLSearchParams メソッド

これは、JavaScript でクエリ文字列値を取得する最も簡単な方法の 1 つです。 URLSearchParams このインターフェイスは、URL のクエリ文字列を処理するためのユーティリティ メソッドを提供します。 「使用できますか?」でブラウザのサポートを確認できます。

仕組みを簡単に見てみましょう。

リーリー

クエリ文字列を使用して URLSearchParams オブジェクトを初期化した後、URLSearchParams オブジェクトが提供するユーティリティ メソッドを使用できます。

この記事では、いくつかの便利な方法を紹介しましょう。

get メソッド

名前が示すように、get メソッドはクエリ文字列パラメータの値を取得するために使用されます。

次の例でそれを理解してみましょう。

リーリー

上記の例では、keyword クエリ文字列パラメーターの値を取得し、検索テキスト を出力します。

これにより、get メソッドを使用してクエリ文字列パラメータの値を取得できます。

にはメソッド

があります

has メソッドは、クエリ文字列にパラメータが存在するかどうかを確認するために使用されます。

リーリー

上記の例では、has メソッドを使用して、異なるパラメーターが存在するかどうかを確認しました。

getAll メソッド

getAll メソッドは、パラメーターが複数存在する場合に、そのパラメーターのすべての値を取得するために使用されます。

次の例で確認してみましょう。

リーリー

ご覧のとおり、getAll メソッドを使用すると、そのパラメーターに関連付けられたすべての値が返されます。

＃＃＃結論は＃＃＃

今日は、JavaScript でクエリ文字列を取得するために使用できるさまざまな方法について説明しました。プレーンな JavaScript に加えて、

URLSearchParams

インターフェイスを使用してクエリ文字列変数を取得する方法についても説明しました。

以上がJavaScriptでクエリ文字列を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。