URLパラメータとJSオブジェクトの相互変換方法についてお話します

フロントエンド開発のプロセスでは、JavaScript の URL パラメーターとオブジェクトを相互に変換する必要がある状況によく遭遇します。たとえば、ページの動作を制御するために URL クエリ パラメータを使用する必要がある場合、操作のために URL パラメータを JavaScript のオブジェクトに解析する必要がある場合、またはページ上のデータをサーバーに渡す必要がある場合、オブジェクトをリクエストの URL パラメータに変換します。

この記事では、JavaScript における URL パラメータとオブジェクトの相互変換方法を紹介し、実践的なコード例をいくつか示します。

1. URL パラメーターを JavaScript オブジェクトに変換する

URL パラメーターを JavaScript オブジェクトに変換するには、まず URL パラメーターを文字列に解析し、次にそれを文字列に解析する必要があります。物体。

1.1 URL パラメータを文字列として解析する

JavaScript で window.location.search メソッドを使用して、現在のページ URL のクエリ パラメータを取得できます。このメソッドによって返される文字列には、URL の ? 以降のすべてが含まれますが、# とそれに続くアンカー パラメーターは含まれません。

以下は、現在のページ URL のクエリ パラメーターを取得するサンプル コードです。

const queryString = window.location.search;

他のページの URL のクエリ パラメーターを取得したい場合は、## を使用できます。 #new URL(urlString).search メソッドでは、解析する必要がある URL を渡すだけです。例:

const url = "https://example.com/page/?name=John&age=20";
const queryString = new URL(url).search; // 返回"?name=John&age=20"

1.2 クエリ パラメータをオブジェクトに解析する

次に、クエリ パラメータ文字列を JavaScript のオブジェクトに解析する必要があります。解析関数を手動で作成することもできますが、便利な解析方法を提供するサードパーティ ライブラリ

query-string を使用することをお勧めします。

まず、npm または Yarn を使用して、

query-string ライブラリをプロジェクトに追加する必要があります。

npm install query-string --save
# 或者
yarn add query-string

その後、ライブラリで提供される ## を使用できます。 #parse

メソッドは、URL クエリ パラメーターの文字列をオブジェクトに変換します。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import queryString from 'query-string'; const values = queryString.parse(queryString);</pre><div class="contentsignin">ログイン後にコピー</div></div>このうち、

values

は解析されたオブジェクトです。たとえば、queryString が "?name=John&age=20" の場合、values は {name: "John"、age: "20" となります。 "}。

JavaScript オブジェクトを URL パラメータに変換する

2. JavaScript のオブジェクトを URL パラメータに変換する必要がある場合、オブジェクトの各キーと値のペアを Concatenate に変換する必要があります。 URL クエリ パラメータの文字列を形成します。

2.1 オブジェクトを文字列に変換する

変換関数を手動で作成し、まずオブジェクト内のすべてのキーと値のペアを走査し、それらを「key=value」形式に変換します。次に、「&」記号を使用して接続します。例:

function toQueryString(obj) {
  const parts = [];
  
  for (const [key, value] of Object.entries(obj)) {
    parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
  }
  
  return parts.join('&');
}

const values = {
  name: "John",
  age: 20
};

const queryString = toQueryString(values);
// 返回 "name=John&age=20"

各キーと値のペアを文字列にエンコードするときに、

encodeURIComponent

メソッドを使用することに注意してください。このメソッドは、文字列内の特殊文字をエンコードして、不正な URL クエリ パラメーターを防ぐことができます。たとえば、キーと値のペアに特殊文字「?」が含まれている場合、「?」のようなエンコードされた文字列に変換されます。 2.2 URL に文字列を追加する

JavaScript オブジェクトを文字列に変換したので、次のタスクはそれを URL に追加することです。

現在のウィンドウ URL のクエリ パラメーターを直接変更したい場合は、

window.location.search

プロパティを使用して変更できます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const queryString = toQueryString(values); window.location.search = queryString;</pre><div class="contentsignin">ログイン後にコピー</div></div> 新しい URL を構築してジャンプする場合は、

window.location.href

属性または window.location.replace メソッドを使用できます。 。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const queryString = toQueryString(values); const url = `https://example.com/page/?${queryString}`; window.location.href = url; // 或者 window.location.replace(url);</pre><div class="contentsignin">ログイン後にコピー</div></div> ここでは、単純に

window.location.search

を使用するのではなく、完全な URL を自分で結合する必要があることに注意してください。 search 属性は現在の URL のクエリ パラメーター部分のみを返すため、ホスト名、パス名、アンカー パラメーターなどを手動で結合する必要もあります。 まとめ

この記事では、JavaScriptにおけるURLパラメータとオブジェクトの相互変換方法を紹介します。

location.search

メソッドを通じて URL 内のクエリ パラメーターを取得し、query-string ライブラリを使用してクエリ パラメーター文字列を JavaScript オブジェクトに解析できます。逆に、ヘルパー関数を手動で作成して、JavaScript オブジェクトをクエリ パラメーター文字列に変換し、URL に追加することもできます。 上記の操作は非常に簡単ですが、実際のフロントエンド開発でよく使われる操作ですので、読者の参考になれば幸いです。

以上がURLパラメータとJSオブジェクトの相互変換方法についてお話しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。