KnowHub

URLオブジェクト

ブラウザーの組み込み URL オブジェクトは Web アドレスを表します。このオブジェクトを通じて、URL を生成および操作できます。

コンストラクター

URL は、インスタンス オブジェクトを生成するためのコンストラクターとして使用できます。

URL 文字列をパラメータとして受け取ります。

let url = 新しい URL('https://example.com');

URL 文字列を解析できない場合はエラーが報告されるため、「try...catch」コード ブロック内に配置する必要があります。

このパラメータが「/foo/index.html」などの単なる Web サイトのパスである場合、ベース URL を 2 番目のパラメータとして指定する必要があります。

const url1 = 新しい URL('page2.html', 'http://example.com/page1.html');
url1.href // "http://example.com/page2.html"

const url2 = 新しい URL('..', 'http://example.com/a/b.html')
url2.href // "http://example.com/"

この書き方は、既存の URL に基づいて新しい URL を構築する場合に非常に便利です。

URL() への引数には、別の URL インスタンスを指定することもできます。このとき、URL() はインスタンスの href 属性を実パラメータとして自動的に読み込みます。

##インスタンスのプロパティ

URL インスタンス オブジェクトを取得すると、そのさまざまなプロパティから URL のさまざまなコンポーネントを簡単に取得できます。

  • href: 完全な URL
  • プロトコル: アクセスプロトコル。末尾にコロン「:」が付きます。
  • 検索: 疑問符「?」で始まるクエリ文字列。
  • ハッシュ: # で始まるハッシュ文字列。
  • ユーザー名: 認証が必要な URL のユーザー名。
  • パスワード: 認証が必要なURLのパスワード。
  • host: プロトコルなし、ポートありのホスト名。
  • ホスト名: プロトコルとポートを含まないホスト名。
  • ポート: ポート。
  • 発信元: プロトコル、ドメイン名、ポートを含む。
  • パス名: ルート パス / で始まり、クエリ文字列を含まないサーバー パス。
  • searchParams: URLSearchParams インスタンスを指します。これは、クエリ文字列の構築と操作に便利です。

以下に使用例を示します。

const url = 新しい URL('http://user:pass@example.com:8080/resource/path?q=1#hash');

url.href // http://user:pass@example.com:8080/resource/path?q=1#hash
url.protocol // http:
url.username // ユーザー
url.password // パス
url.host // example.com:8080
url.hostname // example.com
URL.ポート // 8080
URL.パス名 // /リソース/パス
url.search // ?q=1
url.hash // #ハッシュ
url.origin // http://example.com:8080

これらのプロパティのうち、「origin」プロパティのみが読み取り専用で、他のプロパティは書き込み可能であり、すぐに有効になります。

const url = 新しい URL('http://example.com/index.html#part1');

url.pathname = 'index2.html';
url.href // "http://example.com/index2.html#part1"

url.hash = '#part2';
url.href // "http://example.com/index2.html#part2"

上記の例では、URL インスタンスの「pathname」属性と「hash」属性への変更は、リアルタイムで URL インスタンスに反映されます。

以下は searchParams 属性の使用例です。その特定の属性とメソッドの概要については、「URLSearchParams」の章を参照してください。

const url = 新しい URL('http://example.com/path?a=1&b=2');

url.searchParams.get('a') // 1
url.searchParams.get('b') // 2

for (const [k, v] of url.searchParams) {
  console.log(k, v);
}
// 1
//b2

静的メソッド

URL.createObjectURL()

URL.createObjectURL() メソッドは、パラメータとして URL を必要とするメソッドで使用するファイル データの一時 URL (URL 文字列) を生成するために使用されます。メソッドの引数は Blob 型 (つまり、ファイルを表すバイナリ データ) である必要があります。

// HTMLコードは以下の通り
// <div id="表示"/>
// <入力
// type="ファイル"
// id="ファイルエレム"
// 複数
// accept="画像/*"
// onchange="handleFiles(this.files)"
// >
const div = document.getElementById('display');

関数ハンドルファイル(ファイル) {
  for (let i = 0; i < files.length; i++) {
    let img = document.createElement('img');
    img.src = window.URL.createObjectURL(files[i]);
    div.appendChild(img);
  }
}

上記の例では、URL.createObjectURL() メソッドを使用して、アップロードされたファイルの一時 URL を <img> 要素の画像ソースとして生成します。

このメソッドで生成されるURLは以下のようになります。

BLOB:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1

URL.createObjectURL() メソッドが使用されるたびに、URL インスタンスがメモリ内に生成されることに注意してください。このメソッドによって生成された一時 URL が不要になった場合は、メモリを節約するために、URL.revokeObjectURL() メソッドを使用してこのインスタンスを解放できます。

以下は、ワーカー プロセスを生成する例です。

<script id='code' type='text/plain'>
  postMessage('foo');
</script>
<スクリプト>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([コード], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var ワーカー = 新しいワーカー(url);
  URL.revokeObjectURL(url);

  worker.onmessage = function(e) {
    console.log('ワーカーが返しました: ', e.data);
  };
</script>

URL.revokeObjectURL()

URL.revokeObjectURL() メソッドは、URL.createObjectURL() によって生成された一時 URL を解放するために使用されます。そのパラメータは、「URL.createObjectURL()」メソッドによって返される URL 文字列です。

以下では、前のセクションの例に URL.revokeObjectURL() を追加します。

var div = document.getElementById('display');

関数ハンドルファイル(ファイル) {
  for (var i = 0; i < files.length; i++) {
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(files[i]);
    div.appendChild(img);
    img.onload = function() {
      window.URL.revokeObjectURL(this.src);
    }
  }
}

上記のコードでは、画像が正常にロードされると、ローカル ファイル用に生成された一時 URL は役に立たないため、リソースは img.onload コールバック関数の URL.revokeObjectURL() メソッドを通じて解放できます。

URL.canParse()

URL() コンストラクターが不正な URL を解析するとエラーがスローされ、これは try...catch コード ブロックで処理する必要がありますが、これは結局あまり便利ではありません。したがって、URL オブジェクトには、現在の文字列が有効な URL かどうかを示すブール値を返す URL.canParse() メソッドが導入されています。

URL.canParse(url)
URL.canParse(url, ベース)

URL.canParse() は 2 つのパラメータを受け入れることができます。

  • url: URL を表す文字列またはオブジェクト (<a> 要素の DOM オブジェクトなど)。
  • base: URL のベース位置を示す文字列または URL インスタンス オブジェクト。最初のパラメータ url が相対 URL の場合、このパラメータは完全な URL を計算して判断するために使用されます。
URL.canParse("https://developer.mozilla.org/") // true
URL.canParse("/en-US/docs") // false
URL.canParse("/en-US/docs", "https://developer.mozilla.org/") // true

上記の例では、最初のパラメータが相対 URL の場合、2 番目のパラメータが必要です。そうでない場合は、「false」が返されます。

次の例では、URL インスタンス オブジェクトを 2 番目のパラメーターとして受け取ります。

letbaseUrl = 新しいURL("https://developer.mozilla.org/");
URL = "/en-US/docs";

URL.canParse(url,baseUrl) // true

このメソッドは内部で URL() コンストラクターと同じ解析アルゴリズムを使用するため、URL() コンストラクターで置き換えることができます。

関数 isUrlValid(string) {
  試す {
    新しい URL(文字列);
    true を返します。
  } キャッチ (エラー) {
    false を返します。
  }
}

上記の例では、URL.canParse() の代替実装である isUrlValid() が指定されています。

URL.parse()

「URL.parse()」は新しく追加されたメソッドで、Chromium 126 および Firefox 126 でサポートされています。

その主な目的は、不正な URL を解析するときに URL() コンストラクターがエラーをスローするという問題を変更することです。この新しいメソッドはエラーをスローせず、パラメータが有効な URL の場合は URL インスタンス オブジェクトを返し、それ以外の場合は「null」を返します。

const urlstring = "これは URL ではありません";

const not_a_url = URL.parse(urlstring); // null

上記の例では、URL.parse() のパラメータが有効な URL ではないため、null が返されます。

##インスタンスメソッド

toString()

URL インスタンス オブジェクトの toString() は、URL 全体である URL.href プロパティを返します。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章