ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScriptでURLパラメータを取得するにはどうすればよいですか?一般的な4つの方法を詳しく解説

著者：Eve Cole 更新時間：2022-07-29 08:46:44
ネイティブ JavaScript を使用して URL リンク パラメーターを取得するにはどうすればよいですか?次の記事では、一般的な 4 つのネイティブ JS メソッドを詳しく紹介します。お役に立てれば幸いです。

フロントエンド開発者として、URL を操作および処理する必要があることがよくあります。最も一般的なのは、URL リンクに含まれるパラメーター値を取得することです。フレームワーク開発を使用している友人は、これが非常に簡単であると感じるかもしれません。フレームワークには、URL リンクによって運ばれるパラメータを簡単に取得するための多くのメソッドが用意されているからです。しかし、場合によってはフレームワークに依存できず、ネイティブ JS を使用してパラメータを取得する必要があることもあります。これは面接でもよく聞かれる質問です。今日はコードを手動で分割し、ネイティブ JS を使用して URL リンク パラメーター値を取得します。

1. 取得方法のまとめ

ネイティブJSでURLリンクパラメータを取得する方法はいくつかありますが、

  • 通常のマッチングを利用する方法、

  • タグ組み込みメソッドを利用する方法

    • 、

  • URLSearchParamsを利用する

  • 方法

の順に説明していきます。

  • 方法

2. 具体的な実装方法

2.1 正規一致方法

これは非常に標準的な方法です。重要な点は、正規表現を理解する必要があるということです。

コードは次のとおりです:

<スクリプト>
  //正規表現を使用します let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  // // パラメータオブジェクト関数を返す queryURLParams(url) {
    let pattern = /(w+)=(w+)/ig; //正規表現を定義 let parames = {}; //パラメータ オブジェクトを定義 url.replace(pattern, ($, $1, $2) => {
      パラメータ[$1] = $2;
    });
    パラメータを返す。
  }
  console.log(queryURLParams(url))
</script>

上記のコードの焦点は、正規表現の定義と replace メソッドの使用です。

、

、

1、$2 はそれぞれ name=elephant、name、elephant などを表します。正規表現と組み合わせた replace のより詳細な使用法については、自分で学習することができます。

実現効果：

1.png

2.2 タグを使用するこの方法は、

結局のところ、少しブラック テクノロジー的な意味を持つため、ほとんどの人が使用しません。その原則は、主に a タグを使用して、href、ハッシュ、検索、その他の属性などの組み込み属性を取得することです。

2.png

3.png

コードは次のとおりです:

<スクリプト>
  URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig" にします
  関数 queryURLParams(url) {
    // 1. タグを作成します let link = document.createElement('a');
    リンク.href = URL;
    let searchUrl = link.search.substr(1); // 疑問符の後の文字列を取得します let hashUrl = link.hash.substr(1); // 後の値を取得します # let obj = {}; object/ / 2. hashUrl をオブジェクトに格納しますか? obj['HASH'] = hashUrl : null; // # let list = searchUrl.split("&"); の後ろに値がありますか?
    for (let i = 0; i < list.length; i++) {
      let arr = list[i].split("=");
      obj[arr[0]] = arr[1];
    }
    オブジェクトを返します。
  }
  console.log(queryURLParams(URL))
</script>

上記のコードでは、最初に a タグが作成され、次に a タグの属性に基づいて URL の各部分が取得されます。これは実際には、パラメーターを取得するための Vue のルーティング ジャンプに似ています。

実現効果：

4.png

2.3 split メソッド

このメソッドは、split が文字列を特定の文字に基づいて配列に分割できることを利用して、パラメータごとに巧妙に分割します。

コードは次のとおりです:

<スクリプト>
  URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100" にします
  関数 queryURLParams(URL) {
    // const url = location.search; // プロジェクトでは、検索メソッド let url = URL.split("?")[1]; を使用して URL の「?」文字の後の文字列を直接取得できます。
    let obj = {}; // パラメータオブジェクトを宣言 let arr = url.split("&"); // アンパサンドで配列に分割 for (let i = 0; i < arr.length; i++)
      let arrNew = arr[i].split("="); // "=" で配列に分割 obj[arrNew[0]] = arrNew[1];
    }
    オブジェクトを返します。
  }
  console.log(queryURLParams(URL))
</script>

実際のプロジェクトでアップロードコードを使用する場合は、location.search を使用して「?」以降の文字列を直接取得できます。デモの便宜上、以下を分割するために使用します。

実現効果：

5.png

2.4 URLSearchParams メソッド

URLSearchParams メソッドを使用すると、URL パラメータを非常に簡単に取得できますが、互換性の問題がいくつかあります。公式 Web サイトでは次のように説明されています。

URLSearchParams インターフェイスは、URL クエリ文字列を処理するためのいくつかの実用的なメソッドを定義します。

このインターフェイスは、URL パラメーターを処理するための特別なメソッドを提供します。ここでは、URL パラメーターの値を取得する方法のみを紹介します。詳細な使用方法については、公式 Web サイトを参照してください。

コードは次のとおりです:

<スクリプト>
  URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100" にします
  関数 queryURLParams(URL) {
    let url = URL.split("?")[1];
    const urlSearchParams = 新しい URLSearchParams(url);
    const params = Object.fromEntries(urlSearchParams.entries());
    パラメータを返す
  }
  console.log(queryURLParams(URL))
ここ

では基本的に 2 行のメイン コードのみを使用してパラメータ解析を実装します。 urlSearchParams.entries() は反復プロトコル イテレータを返すため、Object.fromEntries() メソッドを使用してキーと値のペアのリストをオブジェクトに変換する必要があることに注意してください。

反復プロトコルに関しては、公式 Web サイト:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols

を参照して

、効果を実現できます。

6.png

互換性:

7.png

私たちのインターフェースは諸悪の根源である IE と互換性がないことがわかります。

概要:

ここでは、URL リンク パラメータ値の解析を実現する 4 つの方法を紹介します。その中で最も広く使用されているのは、split 方法です。 urlSearchParams は新星として徐々に誰もが認識するようになり、IE と互換性を持たせる方法は数多くあります。

【おすすめ関連動画チュートリアル：Webフロントエンド】

以上はJavaScriptでURLパラメータを取得する方法でした。 4 つの一般的な方法の詳細な説明については、PHP 中国語 Web サイトの他の関連記事に注目してください。
関連記事