序文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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTML 基本構造_Powernode Java アカデミー
>>: DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明
HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...
目次一般的な配列メソッド配列要素の追加と削除配列ヘッダーの操作配列の末尾を操作する任意の場所に追加ま...
目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...
目次1. はじめに2. 解決策2.1 ファイアウォールを設定してポートを開く2.3 ポートを確認し、...
相対パスの概念現在のファイルの場所を参照ポイントとして使用して、ターゲット ファイルへのパスを確立し...
目次MySQL ベースの検索エンジンの実装1. ngram全文パーサー2. 全文インデックスを作成す...
次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...
<br />まずアイデアを考え、次にスケッチを描き、次にマウスでスケッチし、最後にフラッ...
この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...
// これをインストールするのに丸一日かかったので、記録するためにメモを書きました。 //何か問題が...
このブログ投稿は、ブロガーが数日前に取り組んだプロジェクトで遭遇した困難についてです。これを学んだ後...
1.docker search mysql查看mysql版本 2. docker pull mysq...
目次基本的なHTTPリクエストの設定async/await を使用した Axios Axios によ...
目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...
Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...