JavaScriptでクエリ文字列を取得する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 26, 2023 pm 05:13 PM

javascript方法クエリ文字列

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます