このブログでは、JavaScript でクエリ文字列の値を取得する手順を定義します。
JavaScript でクエリ文字列値を取得する方法は?
JavaScript でクエリ文字列の値を取得するには、次のメソッドを使用します。
方法 1: URL API と get() メソッドを使用してクエリ文字列値を取得する
使用 ' URL API ' とともに ' 得る（） 」メソッドを使用して、JavaScript でクエリ文字列値を取得します。 URL (Uniform Resource Locator) は、特定のインターネット リソースを見つける方法です。通常、プロトコルで構成されます（「 http ' また ' https “)、ドメイン名 (“ example.com 」)、およびパス (「 /パス/へ/リソース 」）。 URL は、Web ページへのアクセス、ファイルのダウンロード、およびインターネット上のクエリ文字列値を含むその他のリソースへのアクセスに使用されます。
例
クエリ文字列を含む URL を格納する変数を作成します。
だった urlQueryString = 'https://www.example.com/page.html?keyword=SearchText &fullname=jennyConvey &click=Submit' ;
「」を渡して URL オブジェクトを呼び出します。 urlQueryString 」：
だった クエリ文字列 = 新着 URL ( urlQueryString ) ;
キーを渡して get() メソッドを使用します。 キーワード 」を使用して、searchParams 属性でその値を取得します。 JavaScript の URL オブジェクトの searchParams プロパティは、URL のクエリ文字列を表します。 URL のクエリ文字列を文字列ではなくオブジェクトとして操作する方法を提供します。
だった 値1 = クエリ文字列。 検索パラメータ . 得る ( 'キーワード' ) ;コンソール。 ログ ( 'キーワードの値: ' + 値1 ) ;
キーを get() メソッドに渡してクエリ文字列から 2 番目の値を取得し、コンソールに出力します。
だった 値2 = クエリ文字列。 検索パラメータ . 得る ( 'フルネーム' ) ;
コンソール。 ログ ( 'フルネームの値: ' + 値2 ) ;
同様に、文字列の 3 番目の値をフェッチします。
だった 値3 = クエリ文字列。 検索パラメータ . 得る ( 'クリック' ) ;コンソール。 ログ ( 'クリックの値: ' + 値3 ) ;
クエリ文字列の値が正常に取得されていることがわかります。
方法 2: get() メソッドで URLSearchParams を使用してクエリ文字列値を取得する
「 URLSearchParams 」インターフェイスを JavaScript で使用して、クエリ文字列から値を取得できます。 URL のクエリ文字列を評価し、値にアクセスする手段を提供します。 URL のクエリ文字列部分のみを送信する必要があることに注意してください。 window.location.search 」を URLSearchParams() のパラメーターとして指定します。
例
クエリ文字列を格納する変数を作成します。
文字列を「 URLSearchParams ' インターフェース：
だった クエリ文字列 = 新着 URLSearchParams ( urlQueryString ) ;キーの値を取得する ' フルネーム 」を使用してクエリ文字列から 得る（） ' 方法：
だった 値1 = クエリ文字列。 得る ( 'フルネーム' ) ;コンソール。 ログ ( 'フルネームの値: ' + 値1 ) ;
出力
ノート ： 使用する ' const queryString = 新しい URLSearchParams(window.location.search) 」 ライブ/現在の URL を取得します。
現在の URL を取得したら、そこからクエリ文字列を取得し、URLSearchParams のインスタンスを作成して、クエリ文字列を渡します。最後に、get() メソッドを使用して、クエリ文字列内の特定のパラメーターの値を取得します。
方法 2: URLSearchParams と values() メソッドを使用してクエリ文字列値を取得する
また、「 値() 」メソッドを URLSearchParams インターフェイスとともに使用して、クエリ文字列の値を取得します。文字列のすべての値に一度にアクセスするのに役立ちます。
例
クエリ文字列を URLSearchParams インターフェイスに渡し、変数「 クエリ文字列 」：
“ で values() メソッドを呼び出します。 にとって 」 ループして、クエリ文字列のすべての値を取得します。
にとって ( 定数 queryString の値。 値 ( ) ) {コンソール。 ログ ( 価値 ) ;
}
すべての文字列値が取得されていることがわかります。
JavaScript でクエリ文字列の値を取得するのはこれですべてです。
結論
クエリ文字列値を取得するには、「 URL API ' とともに ' 得る（） 「メソッドと」 検索パラメータ ' 属性。 JavaScript の URL オブジェクトの searchParams プロパティは、URL のクエリ文字列を表します。また、「 URLSearchParams 」とのインターフェース「 得る（） 」メソッドまたは「 値() ' 方法。このブログでは、JavaScript でクエリ文字列の値を取得する手順について説明しました。