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の中国語版をデプロイしてインストールする方法の詳細な説明

推薦する

HTML タグのリストと使用方法

HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...

JavaScript 配列メソッド - 体系的な概要と詳細な説明

目次一般的な配列メソッド配列要素の追加と削除配列ヘッダーの操作配列の末尾を操作する任意の場所に追加ま...

VMware ESXi 5.5 の展開および構成図のプロセス

目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...

Alibaba Cloud Server Tomcatにアクセスできません

目次1. はじめに2. 解決策2.1 ファイアウォールを設定してポートを開く2.3 ポートを確認し、...

HTML で相対パスを使用してディレクトリのすべてのレベルのファイルを取得する方法の詳細な説明

相対パスの概念現在のファイルの場所を参照ポイントとして使用して、ターゲット ファイルへのパスを確立し...

MySQL をベースにしたシンプルな検索エンジンを実装する

目次MySQL ベースの検索エンジンの実装1. ngram全文パーサー2. 全文インデックスを作成す...

MySQL ピボットテーブルについての簡単な説明

次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...

アリババの中秋節ロゴとウェブサイトのデザインプロセス

<br />まずアイデアを考え、次にスケッチを描き、次にマウスでスケッチし、最後にフラッ...

MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...

Linux での MySql centos7 のバイナリコンパイルとインストールに関するチュートリアル

// これをインストールするのに丸一日かかったので、記録するためにメモを書きました。 //何か問題が...

JSは要素のドラッグとプレースホルダー機能を実装します

このブログ投稿は、ブロガーが数日前に取り組んだプロジェクトで遭遇した困難についてです。これを学んだ後...

Vue で Axios 非同期リクエスト API を使用する方法

目次基本的なHTTPリクエストの設定async/await を使用した Axios Axios によ...

Vue でフルスクリーンを実装し、フルスクリーン終了を監視する

目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...

Linux 上の Vim で色とテーマを変更する方法

Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...