JavaScriptのURLオブジェクトとは何かについて話しましょう

概要

URL から要素を解析して抽出する独自のコードを記述すると、面倒で面倒な作業になる可能性があります。プログラマーは社会で最も怠惰なグループの 1 つであり、車輪の再発明を際限なく繰り返すことは耐え難いものであるため、ほとんどのブラウザには標準ライブラリに URL オブジェクトが組み込まれています。

これで、URL 文字列をパラメータとして URL コンストラクターに渡し、そのインスタンスを作成して URL コンテンツを解析できるようになりますか?答えは「はい」です。

URL コンストラクターを使用して URL オブジェクトを作成するには、次のコードで new を使用します。

新しいURL('https://www.grapecity.com.cn');

上記のコードでは、絶対アドレスを持つ URL オブジェクトのインスタンスを作成します。しかし同時に、相対アドレスを最初のパラメータとして渡し、相対アドレスのベース URL を 2 番目のパラメータとして渡して、URL オブジェクトを作成することもできます。少し理解しにくいかもしれないので、例を見てみましょう。

新しい URL('/developer', 'https://www.grapecity.com.cn');

上記のコードを見ると、2 番目の基本 URL パラメータは、相対アドレス フラグメントではなく、有効な絶対アドレスである必要があります。http:// または https:// で始まる必要があります。次のコードのように、チェーンのような方法で使用することもできます。

const gcUrl = 'https://www.grapecity.com.cn/';
const gcDevUrl = 新しい URL("/developer", gcUrl);
const gcUrl2 = 新しい URL(gcUrl);
const gcSlnUrl = 新しい URL('/solutions', gcUrl2);
const Url = 新しい URL('aboutus', gcSlnUrl);

各パラメータで toString() を使用する場合、実行結果は次のようになります。

https://www.grapecity.com.cn/developer

https://www.grapecity.com.cn/

https://www.grapecity.com.cn/solutions

https://www.grapecity.com.cn/aboutus

2 番目のパラメータはオプションであり、最初のパラメータが相対アドレスの場合にのみ渡す必要があります。渡される文字列または URL オブジェクトは、Unicode スカラー値の可能なシーケンスのセットに対応する USVString オブジェクトに変換されます。私たちのコードでは、それらを通常の文字列として扱うことができます。両方の引数が相対 URL の場合、またはベース URL と相対 URL の両方が無効な場合は、TypeError 例外がスローされます。 URL オブジェクトの toString メソッドは、コンストラクターで操作する前に URL オブジェクトを完全な URL 文字列に変換するため、URL オブジェクトを 2 番目のパラメーターに直接渡すことができます。

URL オブジェクトには次のプロパティがあります。

ハッシュ、ホスト、ホスト名、href、オリジン、ユーザー名/パスワード、パス名、ポート、プロトコル、検索、その他の属性。次は、一緒にそれらについて学んでいきましょう。

ハッシュプロパティ

ハッシュ属性は、# 記号の後の URL の部分を取得できます。文字列はパーセントデコードされていないため、以下のような特殊記号は引き続きエンコードされます。これらは次のマッピングを使用してエンコードされます。エンコード中に、左側の文字が右側の文字に変換されます。

':' — %3A

'/' — %2F

'?' — %3F

'＃' - ％23

'[' — %5B

']' — %5D

'@' — %40

'！' - ％21

'$' — %24

「'“ — %27

'(' — %28

')' — %29

'*' — %2A

'+' — %2B

',' — %2C

';' — %3B

'=' — %3D

'%' — %25

' ' — %20 または +

たとえば、https://www.grapecity.com.cn/developer/spreadjs#price のような URL 文字列がある場合、次のようにしてハッシュ属性値を直接取り出すことができます。

const exampleUrl = 新しい URL('https://www.grapecity.com.cn/developer/spreadjs#price');
console.log(exampleUrl.hash);

実行結果では、console.log ステートメントに '#price' が表示されます。プロパティは USVString であり、上記のように取得すると文字列に変換されます。これは読み取り専用プロパティではないため、次のコードに示すように、値を直接割り当てることもできます。

exampleUrl.hash = '#newHash';

例えば：

const exampleUrl = 新しい URL('https://www.grapecity.com.cn/developer/spreadjs#price');
exampleUrl.hash = '#newPrice';
console.log(exampleUrl.hash);

href属性を通じて更新されたURL https://www.grapecity.com.cn/developer/spreadjs#newHash を取得できます。

ホストプロパティ

URL オブジェクトのホスト プロパティは、ホスト名を含む USVString です。 : の後にポートが含まれている場合は、ホストのポート番号も取得されます。たとえば、次のような場合です。

const exampleUrl = 新しい URL('http://huozige.grapecity.com.cn:8080/');
console.log(exampleUrl.host);

huozige.grapecity.com.cn:8080 を取得できます。他の USVString プロパティと同様に、取得時に文字列に変換されます。同様に、読み取り専用プロパティではないため、ハッシュ プロパティのように値を割り当てることができます。

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功演示');
exampleUrl.host = 'es.grapecity.com.cn:80';
コンソールにログ出力します。

この方法で、まったく新しい URL を取得することもできます。

ホスト名属性

hostname プロパティを使用すると、URL からポートに加えてホスト名を取得できます。

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功演示');
console.log(exampleUrl.ホスト名)

他のプロパティと同様に、ホスト名プロパティを変更することもできます。次に例を示します。

exampleUrl.hostname = 'newExample.com';

Href属性

URL オブジェクトの href 属性には、URL オブジェクトに渡されるアドレス文字列全体が含まれます。次に例を示します。

const exampleUrl = 新しい URL('https://www.grapecity.com.cn/developer/spreadjs#price');
コンソールにログ出力します。

出力されるのは、URL コンストラクターに渡したコンテンツです。他の属性と同様に、href 属性は読み取り専用ではありません。

起源のプロパティ

他のプロパティとは異なり、Origin は読み取り専用プロパティであり、URL オリジンを含む Unicode シリアル化された USVString を返します。 Origin の構造は、渡される URL の種類によって決まります。http または https リンクの場合、Origin はプロトコル (http/https) + (://) + ドメイン名 + (:port) になります。通常、デフォルトのポートは無視されます。 BLOB リンクの場合、Origin は BLOB: の後の部分を返します。例えば：

const url1 = 新しい URL("https://www.grapecity.com.cn/:443")
const url2 = 新しい URL("blob:https://www.grapecity.com.cn/:443")
コンソールにログ出力します。
コンソールログ(url2.origin)

ユーザー名とパスワードのプロパティ

UserName プロパティと Password プロパティも書き込み可能なプロパティであり、ドメイン名の前のユーザー名とパスワード部分を抽出できます。次に例を示します。

const url = 新しい URL('https://username:[email protected]');
console.log(url.ユーザー名);
console.log(url.password);

url.username = "ユーザー名1";
url.password = "パスワード1";
console.log(url.ユーザー名);
console.log(url.password);

パス名属性

このプロパティは、パラメータを除いた受信 URL の最初のスラッシュ (/) の後の部分を取得します。例:

const url = 新しい URL ("https://www.grapecity.com.cn/developer/spreadjs#price")
console.log(url.パス名);

ポートプロパティ

Port プロパティは、受信 URL アドレスを取得するために使用できるポート値を参照します。このプロパティも書き込み可能です。

const url = new URL('http://huozige.grapecity.com.cn:8080/功演示');

コンソールにログ出力します。

プロトコルのプロパティ

受信 URL アドレス パラメータのプロトコル名を取得できます。これは通常、http:、https:、ftp:、file: などのプロトコルを指します。

const url = 新しい URL('https://www.grapecity.com.cn/');

console.log(url.protocol);

検索属性

受信 URL アドレス パラメータを取得できますか?ただし、このプロパティではクエリ文字列全体しか取得できません。各パラメータの値を知る必要がある場合は、searchParams プロパティを使用できます。

const url = 新しい URL('https://www.grapecity.com.cn:443?key1=value1&key2=value2');

console.log(url.search);

searchParams プロパティ

search プロパティは、パラメータ文字列全体のみを取得します。文字列をキーと値のペアに解析する必要がある場合は、searchParams プロパティが便利です。このプロパティは、クエリ文字列のキーと値のペアをリストする機能を持つ URLSearchParams オブジェクトを取得します。たとえば、パラメータ リストを取得するには、次のように使用できます。

const url = 新しい URL('https://www.grapecity.com.cn/?key1=value1&key2=value2');
コンソールにログ出力します。
console.log(url.searchParams.get('key2'));

最初の console.log ステートメントから value1 を取得し、2 番目の console.log ステートメントから value2 を取得します。 URLSearchParams オブジェクトには、キー名によって指定されたクエリ文字列キーの値を取得する get メソッドがあります。

静的メソッド

URL コンストラクターには、createObjectURL() メソッドと revokeObjectURL() メソッドの 2 つの静的メソッドがあります。

URL.createObjectURL() 静的メソッドは、パラメータとして指定されたオブジェクトを表す URL を含む DOMString を作成します。この URL のライフサイクルは、それが作成されたウィンドウ内のドキュメントに関連付けられています。この新しい URL オブジェクトは、指定された File オブジェクトまたは Blob オブジェクトを表します。

URL.revokeObjectURL() メソッドは、URL.createObjectURL() によって作成されたオブジェクト URL を解放します。このオブジェクト URL を使用し、この URL が対応するファイルを指さなくなったことをブラウザに通知する場合は、このメソッドを呼び出す必要があります。

要約する

最後に、表を用意しました。理解を深めるのに役立つと思います。

URL オブジェクトを使用すると、URL の操作や URL からの一部を抽出することが面倒な作業ではなくなります。これを行うためのすべてのコードを自分で記述する必要がないためです。ほとんどのブラウザには、標準ライブラリに URL オブジェクトが組み込まれています。これで、URL を文字列として URL コンストラクターに渡し、URL のインスタンスを作成できます。次に、便利な値プロパティとメソッドを使用して、URL の必要な部分を操作して取得できます。