JavaScript における URL オブジェクトの素晴らしい使い方

JavaScript における URL オブジェクトの素晴らしい使い方

序文

URLオブジェクトはページ側ではあまり使用されないかもしれません。一般的に、ページ側でのURLの操作のほとんどは、URLパラメータを解析することです。URLパラメータを解析するためのライブラリは数多くあります。たとえばqsや、ブラウザのネイティブURLSearchParamsなどです。

// 現在の URL が 'https://www.test.com?a=1&b=2' であると仮定します
const b = 新しい URLSearchParams(location.search);
const aParam = b.get('a'); // 1
const bParam = b.get('b'); // 2
const エントリ = [...b];
// [['a', '1'], ['b', '2']]
// qs.parse のようなオブジェクトを取得したい場合は、次のようにします。const params = Object.fromEntries(entries);
// {a: 'c'、b: '2'}

解析パラメータ

URLSearchParams を介してパラメータを解析することは、URL オブジェクトと密接に関連しているようには見えませんが、URL オブジェクトがインスタンス化された後に返されるオブジェクトを確認することができます。

const a = 新しい URL ('https://www.test.com?a=1&b=2');
// ハッシュ: ""
// ホスト: "www.test.com"
// ホスト名: "www.test.com"
// href: "https://www.test.com/?a=1b=2"
// オリジン: "https://www.test.com"
// パスワード: ""
// パス名: "/"
// ポート: ""
// プロトコル: "https:"
// 検索: "?a=1&b=2"
// 検索パラメータ: URLSearchParams {}
// ユーザー名: ""
// [[プロトタイプ]]: URL

返されたオブジェクトから、URL がインスタンス化された後、返された属性 searchParams は実際にはインスタンス化された URLSearchParams オブジェクトであることがわかります。 URLオブジェクトを介してパラメータを取得する別の方法があります。たとえば、上記の操作は次のように変更できます。

const a = 新しい URL ('https://www.test.com?a=1&b=2');
const エントリ = [...a.searchParmas];
const パラメータ = Object.fromEntries(エントリ);

// ブラウザ コンソールで、1 行 [...new URL(location.href).searchParams];

URLパラメータを変更する

パラメータを解析するために URL を使用する必要はありません。 URLSearchParams オブジェクトを使用すれば十分です。では、URL オブジェクトで他に何ができるでしょうか。実際には、URLSearchParams は設定や追加などの書き込み操作を提供すると考えられます。同時に、URL オブジェクトによって返されるプロパティを変更することもできます。URL 内のパラメータを変更して URL を変更したり、URL を生成したりすることはできますか。結局のところ、多くの場合、URL の変更は文字列操作にとどまり、これも危険であり、エラーが報告されやすいものです。

const a = 新しい URL ('https://www.test.com?a=1&b=2');
a.searchParams.set('a', '18');
a.searchParams.set('b', '14');
a.searchParams.set('c', 'テスト');
newURL = a.toString(); // https://www.test.com/?a=18&b=14&c=test
a.hash = 'ハッシュ';
newURL = a.toString(); // 'https://www.test.com/?a=18&b=14&c=test#hasha'
a.host = 'www.init.com';
newURL = a.toString(); // https://www.init.com/?a=18&b=14&c=test#hasha

要約する

URL オブジェクトは URL を操作するのに非常に便利です。単純なカプセル化により、多くのパッケージを節約できます。いくつかの回避策を使用すると、URL を逆に変更できます。このオブジェクトはブラウザでも使えますが、互換性の問題が出る可能性があります。デスクトップであれば安心して使えます(IE とは)。モバイル端末であれば、ポリフィルの設定が必要になるかもしれません。このオブジェクトはDenoでも使用できます

これで、JavaScript URL オブジェクトの素晴らしい使用法に関するこの記事は終了です。JavaScript URL オブジェクトの素晴らしい使用法に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 異なるページ間のJavaScriptデータ転送(URLパラメータ取得)
  • Springboot で URL の後の jsessionid を削除する方法
  • vue.jsは画像のURLに従って画像をダウンロードします
  • JavaScript ライブラリ urlcat URL ビルダー ライブラリ

<<:  HTML 基本構造_Powernode Java アカデミー

>>:  DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明

推薦する

計算プロパティとリスナーの詳細

目次1. 計算されたプロパティ1.1 基本的な例1.2 計算プロパティキャッシュとメソッド1.3 計...

MySQL ツリー構造データベース テーブル設計

目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...

データベースクエリ、どのオブジェクトにどのフィールドが含まれているか、メソッドステートメント

データベースは、どのオブジェクトにどのフィールドが含まれているかを照会します。 *を選択 sysob...

美容・スタイリングウェブサイト向けのカラーマッチングテクニックと効果表示

色はあらゆるウェブサイトにとって最も重要な要素の 1 つであり、閲覧者に大きな影響を与えるため、色の...

MySQL の null 制約のケースの説明

目次テーブルを作成するときにNOT NULL制約を設定するテーブルを変更するときに非NULL制約を追...

Vueリストデータを削除した後、ページを自動的に更新する方法と更新方法の詳細な説明

問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...

MySQLクエリが遅い理由

目次1. 遅いところはどこですか? 2. 不要なデータをクエリしましたか? 1. 不要なレコードをク...

CSS で隠し要素を実現する 7 つの興味深い方法

序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...

CSSの使用に関する深い理解 clear:both

clear:both清除浮動これは私が常に持っていた印象ですが、私はこれをめったに使用せず、私の理...

docker での psql データベースのバックアップとリカバリの詳細な説明

1. DockerでのPostgresデータベースのバックアップ注文: docker exec it...

WeChatミニプログラムの開発をスピードアップするためのヒント

1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...

Vue の基本リスナーの詳細な説明

目次Vueのリスナーとは何かリスナーの使い方vue リスナーウォッチVue リスナー - ディープリ...

データベースクエリの最適化: サブクエリの最適化

1. 事例会社のトップ以外の従業員全員を年齢別にグループ化します。 t_emp で id が存在しな...

Navicat for MySQLのスケジュールされたデータベースバックアップとデータ復旧の詳細

データベースの変更または削除操作によってデータ エラーが発生したり、データベースがクラッシュしたりす...

MySQLの主キーと外部キーの使用と説明を簡単に説明します

目次1. 外部キー制約外部キーとは何ですか?外部キーを使用する条件:外部キーの定義構文は次のとおりで...