URL および URLSearchParams オブジェクトの使用に関する詳細な説明

プログラミング 2023-05-05 16:00:05 訪問数: null

URL は、Uniform Resource Locator として知られ、インターネット上のリソースを検索するために使用できる文字列を指します。一般的なコンテキストでは、ネットワーク アドレスまたはリンクとも呼ばれます.特定の Web ページにアクセスする必要がある場合、対応する URL 文字列を入力する必要があり、この URL が URL です。
URL リンクの場合、フロント エンドは、URL 文字列情報の作成または解析に使用できる URL オブジェクトを提供します。Nodejs には、URL オブジェクトをサポートし、ブラウザー環境と互換性のある、URL を処理するための対応するモジュールもあります。
URL オブジェクトを紹介する前に、URL URL 文字列について簡単に説明しましょう。

URL 文字列

URL 文字列は通常、さまざまな部分で構成されています. 以下は、ブラウザの入力ボックスに入力され、バイドゥで検索された単純な URL です中国:

https://www.baidu.com/s?wd=中国

URLからわかるように、次の部分の内容：

  • protocol: 使用されているネットワーク プロトコルを示します。httpsプロトコルは
  • ホスト: 要求された Web サーバーを示します。これはwww.baidu.comバイドゥの
  • port: ポート番号を示します。ここには表示されていません。省略可能なデフォルトの80ポート番号です。
  • pathname: ネットワーク リソース パスを示します。ここにsパスが
  • search: 提供されたネットワーク パラメータのクエリ文字列。?wd=中国

これらのコンテンツは、一般的にページの場所を指定するために使用されるハッシュ アンカーに加えて、最も一般的なものです。
もちろん、絶対 URL や相対 URL など、さまざまな複雑な URL も見られますが、それらは本質的に基本構造から切り離すことはできません。

URL 文字列のエンコード

上記の百度検索中国のURL は、ブラウザの入力ボックスに正常に表示できますが、文字列をコピーすると、次のように少し異なります。

https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD

これは、漢字が中国エスケープされてエンコードされるためです。

URL文字列（url）には、使用できる文字に一定の規定があり、一般的にメタ文字と意味文字に分けられます。

  • メタ文字: セミコロン ( ;)、カンマ (,)、スラッシュ (/)、疑問符 (?)、コロン ( :)、アットマーク (@)、アンパサンド (&)、等号 (=)、プラス記号 (+ )、記号($)、ポンド記号 (#);
  • セマンティック文字: az、AZ、0-9、ハイフン (-)、アンダースコア (_)、ドット (.)、感嘆符 (!)、チルダ (~)、アスタリスク (*)、単一引用符 (')、括弧(())。

上記の文字以外の文字を使用する場合は、他の文字をエンコードしてエスケープする必要があります. エンコード規則は、通常、システムのデフォルトのエンコードに基づいており、各文字の各バイトをパーセント記号と 2 つの大文字の 16 進数文字に変換します. . エスケープ エンコーディングに関する知識については、フロント エンドが理解する必要がある文字エンコーディングとエスケープ文字についてのブログ投稿。

したがって、URL 文字列に他の特殊文字がある場合、それらはエンコードおよびエスケープされ、後でURLオブジェクト
上記のペアはすべて URL URL 文字列の紹介ですが、以下では JavaScript が提供する API と URL オブジェクトを正式に紹介します。

URL

JavaScript は、URL 文字列を解析、標準化、およびエンコードするための URL インターフェイス オブジェクトを提供します.これは、URL を簡単に解析または変更し、URL 文字列を処理するのに役立ちます. URL オブジェクトはWeb Worker、Nodejsおよび でも使用できます。

URL は、新しく作成された URL オブジェクトを返すコンストラクターを提供します: new URL(url [, base]).

  • URL:
    URL URL 文字列を示します.
    相対 URL の場合, base は base URL として使用されます
    . 絶対 URL の場合, base は自動的に無視されます.
  • base:
    ベースに使用する URL 文字列。デフォルトは空です。

上記の URL に対して、URL オブジェクトを作成できます。

const myUrl = new URL('https://www.baidu.com/s?wd=中国')

URL インスタンスをコンソールに表示するmyUrlと、オブジェクトのプロパティが前述の URL 文字列構造と一致していることがわかります。URL オブジェクト自体が URL を解析できるため、さまざまな URL 文字列を解析するのに非常に便利です。

ここに画像の説明を挿入

URL インスタンスのプロパティとメソッド

次に、これらの URL オブジェクトのインスタンス プロパティとメソッドを簡単に紹介します。

hash: フラグメント識別子#を含む
host: ドメイン名 (ホスト名 | IP アドレスなど)、ポート (存在する場合) を含む 文字列
hostname: ドメイン名 (ホスト名 | IP アドレスなど) 文字列、 port
href: 完全な URL 文字列
origin: プロトコル、ドメイン名、およびポート文字列を含む読み取り専用
password: ドメイン名の前に指定されたパスワード。現在は一般的にまれです。
pathname:/記号(おおよそ
port: ポート番号 string
protocol: ネットワーク プロトコル文字列
search:?シンボル
searchParams: 読み取り専用、URLSearchParamsオブジェクト、パラメータ文字列へのアクセスに使用
username:ドメイン名、現在は一般的にまれです
toString() : 完全な URL 文字列、URL.href と同じ
toJSON() : 完全な URL 文字列URL.href、toString()基本的には および と同じ

インスタンス メソッドは主に URL の変更と解析に使用されます。これは処理に便利です。URL オブジェクトは作成用の静的メソッドも提供しますObject URL。

URL.createObjectURL()

Object URLとも呼ばれBlob URL、ブラウザ内で生成されたURLから へのBlob、URL を生成して現在のページにロードできます。

ただしURL.createObjectURL()、指定されたオブジェクト (通常はFileまたはBlobWeb サイトの URL を作成すると、この URL は現在のウィンドウ (ドキュメント) にバインドされ、現在のウィンドウが閉じられると無効になります。

構文:objectURL = URL.createObjectURL(object);
パラメータは次の値を取ることができます: File, Blobobject. な

const url = URL.createObjectURL(file)

ファイルの場合、次のような URL が生成されます: をblob:http://localhost:8080/29c75da5-9b55-4b9f-2383-1a643c9b5a1c読み込んで、現在のウィンドウ ページに表示できます。

URL.createObjectURL()を呼び出すとObject URL、毎回新しいオブジェクトが作成されます. 現在のウィンドウ ページが閉じられると、ブラウザは自動的にオブジェクトを解放しますが、積極的にオブジェクトを解放することもできます. URL オブジェクトの別の静的メソッドを呼び出す必要があります: URL.revokeObjectURL().

URL.revokeObjectURL(url)

The above statement can release the current object. このコンテンツの知識については、前のブログ投稿を参照して、フロントエンド バイナリの詳細
を説明して: Blob, File, FileReader, ArrayBuffer, TypeArray, DataView .

URLSearchParams

URLSearchParamsこのオブジェクトは、url URL 情報のクエリ文字列を処理するために特別に使用され、通常、URL 文字列の内容は?疑問符(疑問符は含まれません)。
URL オブジェクトには、オブジェクトsearchParamsを返す、クエリ文字列が解析され、等号で区切られてkey-value、キーと値のペアの対応するデータ形式が生成されます。

次のように：

const myUrl = new URL('https://www.baidu.com/s?wd=中国')
// myUrl.searchParams 返回的是包含 `wd=中国` 内容的对象
myUrl.searchParams.get('wd') // 输出：'中国'

URLSearchParamsオブジェクトは、コンストラクターを使用してインスタンスをカスタマイズすることもできます。

const urlSearchParams = new URLSearchParams('wd=中国&city=上海')
urlSearchParams.get('city') // 输出：'上海'

URLSearchParamsオブジェクト インスタンスは Iterator オブジェクトであり、JavaScript のトラバーサル構文を使用して各項目の [キー、値] を出力できます。

for (const usp of urlSearchParams) {
    
    
  console.log(usp)
}
// ['wd', '中国']
// ['city', '上海']

URLSearchParams インスタンス メソッド

URLSearchParamsこのオブジェクトは、クエリ文字列データを読み取ったり変更したりするための複数のインスタンス メソッドを提供し、データを走査するための 3 つのメソッドも提供します。

append(): 新しいキー値パラメーターを追加する
delete(key): 対応するキー値を削除する
get(key): 最初の値を返す
getAll(key): すべての値の配列を返す
has(key): 存在するかどうかa キー値
set(key, value): 指定されたキーと値のペア パラメータを設定する
sort(): キー名でソートする
toString(): クエリ文字列を返す
keys(): すべてのキー名を含むイテレータ オブジェクトを返す
values(): 戻り値すべての値を含む iterator オブジェクト
entries(): すべてのキーと値を含む iterator オブジェクトを返します

const urlSearchParams = new URLSearchParams('wd=中国&city=上海')
urlSearchParams.append('city', '北京')
urlSearchParams.getAll('city') // ['上海', '北京']
for (const key of urlSearchParams.keys()) {
    
    
  console.log(key)
}
// 输出：wd city city

上記のコードは、いくつかのメソッドの使用例です. これらのメソッドを通じて、クエリ パラメータを読み取ったり、現在の URL のクエリ パラメータを変更したりできます. さらに、POST 非同期データとしてサーバーに送信することもできます.

POST リクエストのデータ パラメータとして

const url = 'https://www.test.com/api/update'
const params = new URLSearchParams()
params.append('wd', '中国')
const xhr = new XMLHttpRequest()
xhr.open('POST', url)
xhr.send(params)

POST リクエストは AJAX 非同期リクエストを介して送信され、URLSearchParamsインスタンス。

ここに画像の説明を挿入
上の図からわかるように、設定されたURLSearchParamsオブジェクトパラメータはForm Data、POST リクエストのデータとして使用されます。

NodejsもURLとURLSearchParamsクラスのオブジェクトを提供しており、定義と属性のメソッドは基本的に同じであり、使用方法も同じで、直接使用できるため、繰り返し学習のコストを削減できます。

Web の URL 関連の属性

ブラウザ環境では、URL に関連する Web ウィンドウで定義された複数の属性があります. たとえば、documentオブジェクトに複数の属性があり、そのすべてが URL に関連しています. 以下で詳しく見てみましょう.

document.URL と document.documentURI

  • document.URL
    プロパティは、現在の Web ページ ドキュメントの url URL 文字列を直接返します。
    URL オブジェクトと同じではなく、文字列を返すだけであることに注意してください。
  • document.documentURI
    この属性は、現在のドキュメントを直接返す url URL 文字列でもあります。

これらは Web (HTML) ドキュメントで同等であり、どちらも現在の URL の文字列を返します。

document.documentURI === document.URL
// true

違いは、documentURIこの属性はすべてのドキュメントに適用されるのに対し、URLこの属性は HTML ドキュメントでしか使用できないことです。

document.domain と document.referrer

  • document.domain
    プロパティは、現在の Web ドキュメントのドメイン名を返します。
    ページhttps://www.baidu.com/s?wd=中国の、document.domain値は ですwww.baidu.com。

  • document.referrer
    この属性は、Web ページのジャンプ リンクを対象として、現在のページにジャンプする前のページの URL 文字列を返します。リンク ジャンプがなく、ブラウザの入力ボックスに URL を直接入力した場合、値は空の文字列になります。

位置

locationこれは、ウィンドウ オブジェクトとドキュメント オブジェクトの両方のプロパティです。直接呼び出すことができ、現在のドキュメントの URL 情報を記述するLocationオブジェクト。これには、より多くのコンテンツが含まれています。

window.location
document.location
// 返回Location对象

位置オブジェクト

Locationオブジェクトのプロパティは、上記で紹介した URL オブジェクトと同じです。上記のセクションを参照してくださいURL实例属性和方法。
Location オブジェクトには、現在のページ URL に対してさまざまな操作を実行できる固有のメソッドがあります。

  • location.assign(url): 別の URL にジャンプ
  • location.reload(boolean): 現在の URL を再読み込みします。パラメーターが true の場合はサーバーから読み込まれます。パラメーターが false の場合はキャッシュから読み込まれます。
  • location.replace(url): 現在のページをパラメーターで指定された URL に置き換えます。履歴セッションには記録されず、ブラウザーの戻るボタン機能は役に立ちません。
  • location.toString(): 現在の Web ページを返しますlocation.href。

場所に値を割り当てる

location 属性に値を直接割り当てることもできます. URL を指定すると、その URL にジャンプします.これは、location.href値を割り当てるの:

location = 'https://baidu.com'
location.href = 'https://baidu.com'

// 也可以使用相对URL
location = 'other.html'

// 指定锚点，浏览器会自动滚动到页面锚点处
location = '#footer'

おすすめ

転載: blog.csdn.net/jimojianghu/article/details/129125543
おすすめ
米国は中国とロシアへの大型AIモデルの輸出を制限する計画
Apple、ChatGPTをiPhoneに導入することでOpenAIと合意に達する
ランキング
エコー、Linuxは最も悲しいコマンドです
OpenCVの目標追跡 - 黄Chaoxian
インターバルマージ [ペア、ソート]
Javaの8並行プログラミング
時間を[行く]包
2つのソリューションCSS揃えテキスト
ASP.NET MVCのコアアプリケーションのバックグラウンドタスク
JAVAのドキュメントは、カスタムプロパティを記述する
オーディオとビデオに基づくビデオの主なコンセプト
phpstudyバックドアRCE使用バッチスクリプト
アーカイブ
もっと
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)

コードワールド

© 2018 codetd.com