JavaScriptでURLパラメーターを取得する方法

URLパラメーター（クエリ文字列パラメーターまたはURL変数とも呼ばれます）を使用して、ページ間、またはURLを介してクライアントとサーバー間で少量のデータを送信します。検索クエリ、リンクの推奨事項、製品情報、ユーザー設定など、さまざまな便利な情報を含めることができます。

この記事では、JavaScriptを使用してURLパラメーターを解析および操作する方法を示します。

キーポイント

• URLパラメーター、またはクエリ文字列パラメーターは、URLを介してページ間またはクライアントとサーバー間で少量のデータを送信するために使用され、検索クエリ、リンクの推奨事項、製品情報、ユーザー設定などの有用な情報を含めることができます。
• 最新のブラウザのurlsearchparamsインターフェースは、次のようなURLパラメーターの簡単な解析と操作を可能にします。特定のパラメーターに関連付けられたすべての値を返すために使用されます。 get() 古いブラウザーの場合、PolyFillを使用するか、開発者はURLのクエリ文字列を受信して​​オブジェクト形式でデータを返す独自のクエリ文字列解析機能を作成できます。 has() getAll()URLパラメーター形式は明確に定義されておらず、変化する可能性があることに注意することが重要であり、開発者は特定のユースケースに基づいてコードをテストおよび調整する必要があります。 URLをより複雑に操作する必要がある場合は、Query-stringなどの特定のライブラリを使用してURI.JSを内側に使用できます。
• urlパラメーターを取得

これは、urlsearchparamsインターフェイスのおかげで、最新のブラウザではるかに簡単になりました。 URLのクエリ文字列を処理する一連のユーティリティメソッドを定義します。 urlが

であると仮定して、

を使用してクエリ文字列を取得できます。

urlsearchparamsを使用してクエリ文字列のパラメーターを解析できます。 https://example.com/?product=shirt&color=blue&newuser&size=m window.location.searchその後、結果のいずれかの方法を呼び出すことができます。

たとえば、

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

指定された検索パラメーターに関連付けられた最初の値を返します。

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

その他の便利な方法

URLSearchParams.get()パラメーターが存在するかどうかを確認します

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

を使用して、特定のパラメーターが存在するかどうかを確認できます。 パラメーターのすべての値を取得

を使用して、特定のパラメーターに関連付けられているすべての値を返すことができます：

URLSearchParams.has()

反復パラメーター

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

urlsearchparamsは、キー、値、およびエントリを反復することができる一般的に使用されるオブジェクトイテレータメソッドも提供します。

URLSearchParams.getAll()ブラウザサポート

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']</code>

urlsearchparamsのブラウザのサポートは良いです。執筆時点では、すべての主要なブラウザによってサポートされています。

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

古いブラウザー（Internet Explorerなど）をサポートする必要がある場合は、PolyFillを使用できます。 または、このチュートリアルの残りの部分を読み続けて、自分で書く方法を学ぶことができます。

独自のクエリ文字列解析関数を書く

前のセクションで使用したURLを続けてみましょう：

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

これは、すべてのURLパラメーターを簡潔なオブジェクトとして提供する関数です。

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

あなたはそれがすぐにどのように機能するかを見るでしょうが、最初に、いくつかの使用例があります：

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

（Codepenコードを直接埋め込むことができないため、Codepenデモの部分はここで省略されています） この関数を使用する前に

私たちの関数は、W3C仕様に示すように、パラメーターが文字によって分離されていると想定しています。ただし、通常、URLパラメーター形式は明確に定義されていないため、または

がデリミターとして表示される場合があります。

• パラメーターに等しい符号がないか、等しい符号がないが値がない場合、私たちの関数はまだ有効です。 & ;繰り返しパラメーターの値は配列に配置されます。 &
• コードに入れることができる関数のみが必要な場合は、今すぐ実行されます。関数の仕組みを理解したい場合は、読んでください。
• 次のセクションでは、関数、オブジェクト、配列など、いくつかのJavaScriptを理解していると想定しています。レビューが必要な場合は、MDN JavaScriptリファレンスをご覧ください。

関数はどのように機能しますか

一般に、この関数は、URLのクエリ文字列（疑問マーク

およびポンドマークの前のパーツ）を取得し、簡潔なオブジェクト形式でデータを出力します。

まず、このコード行は、URLを指定すると、疑問符の後にすべてを取得することを意味します。そうでなければ、ウィンドウのURLを使用するだけです。

次に、パラメーターを保存するオブジェクトを作成します。

?クエリ文字列が存在する場合、解析を開始します。まず、クエリ文字列の一部ではないため、#で始まる部品を削除する必要があります。

ここで、クエリ文字列をコンポーネントに分割できます。

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

これにより、以下に示すように配列が表示されます。

次に、この配列を繰り返し、各アイテムをキーと値に分割します。これをすぐにオブジェクトに入れます。

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']</code>

キーと値を単一の変数に割り当てましょう。パラメーター値がない場合は、パラメーター名が存在することを示すように#に設定します。ユースケースに応じて、この設定を好きなように変更できます：

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

オプションで、すべてのパラメーター名と値を小文字に設定できます。このようにして、誰かが

の代わりに

<code>http://example.com/?product=shirt&color=blue&newuser&size=m</code>

やスクリプトが壊れるなど、誰かがURLにトラフィックを送信している状況を避けることができます。 （これが起こるのを見てきました。）しかし、クエリ文字列がケースに敏感である必要がある場合は、この部分を自由に省略できます。

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

次に、paramNameで受け取ることができるさまざまな種類の入力を処理する必要があります。これは、インデックス付き配列、インデックスなし配列、または通常の文字列です。

インデックスアレイの場合、対応するparamValueが配列になり、値を正しい位置に挿入する必要があります。それがインデックスされていない配列である場合、対応するparamValueが配列になり、要素をそれに押し込むことを望みます。文字列の場合は、paramValueプロパティが既に存在しない限り、オブジェクト上に通常のプロパティを作成し、を割り当てます。渡されたをその配列に押し込みます。 paramValue これを説明するために、ここにいくつかの入力の例を示します。 paramValue

これは、この関数を実装するコードです：

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

最後に、パラメーターと値を含むオブジェクトを返します。

URLにスペース（

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

としてエンコード）などのエンコードされた特殊文字がある場合、以下に示すように元の値を取得するようにデコードすることもできます。

デコードされたものをデコードしないように注意してください。特に割合が関係する場合は、スクリプトがうまくいかない場合があります。

とにかく 、おめでとうございます！これで、URLパラメーターを取得する方法を知っており、途中で他のヒントを学びたいと考えています。

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

結論

この記事のコードは、URLクエリパラメーターを取得する最も一般的なユースケースに適しています。まれなセパレーターや特別なフォーマットなどのエッジケースに対処する場合は、必ずテストして調整してください。

URLでもっとやりたい場合は、Query-stringなどの特定のライブラリを使用してURI.JSを内側に使用できます。ただし、基本的に文字列操作であるため、一般的に純粋なJavaScriptを使用する方が理にかなっています。独自のコードを使用する場合でも、ライブラリを使用する場合でも、すべてを確認して、ユースケースで機能することを確認してください。 文字列で遊ぶのが好きな場合は、文字列をサブストリングに分割し、文字列を数字に変換し、文字列と順序数に変換する記事をチェックしてください。詳細なJavaScriptの知識については、本「JavaScript：NewbieからNinja、Second Edition」を読んでください。

（コンテンツがテキストから高度に複製されているため、FAQの部分はここで省略されています）

以上がJavaScriptでURLパラメーターを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。