KnowHub

Location オブジェクト、URL オブジェクト、URLSearchParams オブジェクト

URL はインターネットのインフラストラクチャの一部です。ブラウザには、URL を管理するためのネイティブ オブジェクトがいくつか用意されています。

位置オブジェクト

「Location」オブジェクトはブラウザによって提供されるネイティブ オブジェクトであり、URL 関連の情報と操作メソッドを提供します。このオブジェクトは、window.location および document.location プロパティを通じて取得できます。

プロパティ

Location オブジェクトは次のプロパティを提供します。

  • Location.href: URL 全体。
  • Location.protocol: コロン (:) を含む現在の URL のプロトコル。
  • Location.host: ホスト。ポートがプロトコルのデフォルトの「80」および「433」でない場合は、コロン (「:」) とポートも含まれます。
  • Location.hostname: ポートを除くホスト名。
  • Location.port: ポート番号。
  • Location.pathname: ルート パス / から始まる URL のパス部分。
  • Location.search: 疑問符 ? で始まるクエリ文字列部分。
  • Location.hash: # から始まるフラグメント文字列部分。
  • Location.username: ドメイン名の前にあるユーザー名。
  • Location.password: ドメイン名の前にあるパスワード。
  • Location.origin: URL のプロトコル、ホスト名、およびポート。
//現在のURLは
// http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href
// "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
ドキュメント.場所.プロトコル
// "http:"
ドキュメント.場所.ホスト
// "www.example.com:4097"
ドキュメント.場所.ホスト名
// "www.example.com"
ドキュメント.場所.ポート
// "4097"
ドキュメントの場所のパス名
// "/パス/a.html"
文書.場所.検索
// "?x=111"
ドキュメント.場所.ハッシュ
// "#パート1"
ドキュメント.場所.ユーザー名
//「ユーザー」
文書.場所.パスワード
// "パスワード"
ドキュメントの場所.原点
// "http://user:passwd@www.example.com:4097"

これらのプロパティのうち、「origin」プロパティのみが読み取り専用で、他のすべてのプロパティは書き込み可能です。

新しい URL アドレスを Location.href に書き込むと、ブラウザはすぐに新しいアドレスにジャンプすることに注意してください。

// 新しいURLにジャンプします
document.location.href = 'http://www.example.com';

この機能は、Web ページが新しいアンカー ポイントまで自動的にスクロールできるようにするためによく使用されます。

document.location.href = '#top';
// と同等
document.location.hash = '#top';

location を直接書き換えることは、href 属性を記述することと同じです。

document.location = 'http://www.example.com';
// と同等
document.location.href = 'http://www.example.com';

さらに、Location.href プロパティは、ブラウザがクロスドメイン書き込みを許可する唯一のプロパティです。つまり、同じオリジンではないウィンドウは、別のウィンドウ (子ウィンドウなど) の Location.href プロパティを上書きできます。と親ウィンドウ)、後者の URL ジャンプが発生します。 「Location」の他の属性は、ドメインを越えて書き込むことはできません。

方法

(1)Location.assign()

「assign」メソッドは URL 文字列をパラメーターとして受け入れ、ブラウザーを新しい URL に即座にジャンプさせます。パラメータが有効な URL 文字列ではない場合、エラーが報告されます。

// 新しいURLにジャンプします
document.location.assign('http://www.example.com')

(2)Location.replace()

「replace」メソッドは URL 文字列をパラメータとして受け入れ、ブラウザを新しい URL に即座にジャンプさせます。パラメータが有効な URL 文字列ではない場合、エラーが報告されます。

これと「assign」メソッドの違いは、「replace」がブラウザの閲覧履歴「History」にある現在の URL を削除することです。つまり、このメソッドを使用すると、「戻る」ボタンで現在の Web ページに戻ることができなくなります。 、これは、閲覧履歴では、古い URL が新しい URL に置き換えられるのと同じです。このアプリケーションの 1 つは、スクリプトがモバイル デバイスであることを検出すると、すぐにモバイル バージョンの Web ページにジャンプすることです。

// 新しいURLにジャンプします
document.location.replace('http://www.example.com')

(3)Location.reload()

「reload」メソッドを使用すると、ブラウザは現在の URL を再ロードします。これは、ブラウザの更新ボタンを押すのと同じです。

ブール値をパラメータとして受け入れます。パラメータが「true」の場合、ブラウザはこの Web ページをサーバーに再リクエストし、リロード後、Web ページは先頭までスクロールします (つまり、「scrollTop === 0」)。パラメータが false または空の場合、ブラウザはローカル キャッシュから Web ページを再読み込みし、再読み込み後の Web ページのビューポートの位置は再読み込み前の位置になります。

// サーバーに現在の URL をリクエストします
window.location.reload(true);

(4)Location.toString()

toString メソッドは URL 文字列全体を返します。これは、Location.href プロパティを読み取るのと同じです。

URL エンコードとデコード

Web ページの URL には、有効な文字のみを含めることができます。法的文字は 2 つのカテゴリに分類されます。

  • URL メタキャラクター: セミコロン (;)、カンマ (,)、スラッシュ (/)、疑問符 (?)、コロン (:)、アットマーク (@)、 & 、等号 (=)、プラス記号 (+)、ドル記号 ($)、シャープ記号 (#)
  • 意味文字: a-z、A-Z、0-9、ハイフン (-)、下線 (_)、ドット (.)、感嘆符 (!)、チルダ ( ~)、アスタリスク (*)、一重引用符 ('')、括弧 (())

上記の文字に加えて、URL に含まれる他の文字もエスケープする必要があります。このルールでは、オペレーティング システムのデフォルトの文字エンコーディングに従って、各バイトをパーセント記号 (%) と 2 つの大文字の 16 進文字に変換します。

たとえば、UTF-8 オペレーティング システムでは、URL http://www.example.com/q=春节 では、中国語の文字「春節」は URL 内で有効な文字ではないため、自動的に「http://www.example.com/q=%E6%98%A5%E8%8A%82」に変換されます。このうち「春」は「%E6%98%A5」に、「祭り」は「%E8%8A%82」に変更されました。これは、「spring」と「festival」の UTF-8 エンコーディングがそれぞれ「E6 98 A5」と「E8 8A 82」であるためです。各バイトの前にパーセント記号を追加すると、URL エンコーディングが構成されます。

JavaScript には 4 つの URL エンコード/デコード方法が用意されています。

  • encodeURI()
  • encodeURIComponent()
  • decodeURI()
  • decodeURIComponent()

encodeURI()

encodeURI() メソッドは URL 全体をデコードするために使用されます。そのパラメータは URL 全体を表す文字列です。メタ文字とセマンティック文字以外の文字はエスケープされます。

encodeURI('http://www.example.com/q=春祭り')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

encodeURIComponent()

encodeURIComponent() メソッドは、URL のコンポーネントをデコードするために使用されます。セマンティック文字を除くすべての文字がトランスコードされます。つまり、メタキャラクターもトランスコードされます。したがって、URL 全体をトランスコードするために使用することはできません。 URL のフラグメントである 1 つのパラメータを受け入れます。

encodeURIComponent('春節')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春祭り')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"

上記のコードでは、encodeURIComponent() が URL メタキャラクターをまとめてエスケープするため、URL 全体がトランスコードされるとエラーが発生します。

デコードURI()

decodeURI() メソッドは URL 全体をデコードするために使用されます。これは、「encodeURI()」メソッドの逆の操作です。トランスコードされた URL という 1 つのパラメータを受け入れます。

decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82')
// "http://www.example.com/q=春祭り"

decodeURIComponent()

decodeURIComponent() は URL フラグメントをデコードするために使用されます。これは、「encodeURIComponent()」メソッドの逆の操作です。これは、トランスコードされた URL フラグメントである 1 つのパラメータを受け入れます。

decodeURIComponent('%E6%98%A5%E8%8A%82')
// 「春祭り」

URLインターフェース

ブラウザーは、URL の構築、解析、エンコードに使用されるコンストラクターである「URL()」インターフェースをネイティブに提供します。通常、このコンストラクタは「window.URL」を通じて取得できます。

コンストラクター

コンストラクターとしての URL() は URL インスタンスを生成できます。 URL を表す文字列をパラメータとして受け入れます。パラメータが有効な URL ではない場合、エラーが報告されます。

var url = 新しい URL('http://www.example.com/index.html');
URL.href
// "http://www.example.com/index.html"

上記の例では、指定された URL を表す URL インスタンスを生成します。

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

URL 文字列が相対パスの場合、計算の基礎として絶対パスを表す 2 番目のパラメータが必要です。

var url1 = 新しい URL('index.html', 'http://example.com');
URL1.href
// "http://example.com/index.html"

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

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

上記のコードでは、返された URL インスタンスのパスは、2 番目のパラメーターに基づいて最初のパラメーターに切り替えることによって取得されます。最後の例では、最初のパラメータは .. で、上部のパスを表します。

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

URL インスタンスのプロパティは基本的に Location オブジェクトのプロパティと同じで、現在の URL 情報を返します。

  • URL.href: URL全体を返します。
  • URL.protocol: コロン「:」で終わるプロトコルを返します。
  • URL.hostname: ドメイン名を返します。
  • URL.host: 「:」記号を含むドメイン名とポートを返します。デフォルトのポート 80 と 443 は省略されます。
  • URL.port: 戻りポート
  • URL.origin: プロトコル、ドメイン名、ポートを返します。
  • URL.pathname: スラッシュ「/」で始まるパスを返します。
  • URL.search: 疑問符「?」で始まるクエリ文字列を返します。
  • URL.searchParams: URLSearchParams インスタンスを返します。これは、Location オブジェクトでは使用できません。
  • URL.hash: ポンド記号「#」で始まるフラグメント識別子を返します。
  • URL.password: ドメイン名の前にパスワードを返します。
  • URL.username: ドメイン名の前にユーザー名を返します。
var url = 新しい URL('http://user:passwd@www.example.com:4097/path/a.html?x=111#part1');

URL.href
// "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
URL.プロトコル
// "http:"
URL.ホスト名
// "www.example.com"
URL.ホスト
// "www.example.com:4097"
URL.ポート
// "4097"
URL.origin
// "http://www.example.com:4097"
URL.パス名
// "/パス/a.html"
URL.検索
// "?x=111"
url.searchParams
// URLSearchParams {}
URL.ハッシュ
// "#パート1"
URL.パスワード
// "パスワード"
URL.ユーザー名
//「ユーザー」

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

var 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 インスタンスに反映されます。

静的メソッド

(1)URL.createObjectURL()

URL.createObjectURL() メソッドは、アップロード/ダウンロードされたファイルおよびストリーミング メディア ファイルの URL 文字列を生成するために使用されます。この文字列は、File オブジェクトまたは Blob オブジェクトの URL を表します。

// HTMLコードは以下の通り
// <div id="表示"/>
// <入力
// type="ファイル"
// id="ファイルエレム"
// 複数
// accept="画像/*"
// onchange="handleFiles(this.files)"
// >
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);
  }
}

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

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

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

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

(2)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 インスタンスをアンロードできます。

URLSearchParams オブジェクト

概要

URLSearchParams オブジェクトはブラウザのネイティブ オブジェクトで、URL のクエリ文字列 (つまり、URL の疑問符の後の部分) を構築、解析、処理するために使用されます。

それ自体がコンストラクターでもあり、インスタンスを生成できます。パラメータは、先頭に疑問符「?」を付けるか付けないクエリ文字列にすることも、クエリ文字列に対応する配列またはオブジェクトにすることもできます。

//方法 1: 文字列を渡す
var params = 新しい URLSearchParams('?foo=1&bar=2');
// と同等
var params = 新しい URLSearchParams(document.location.search);

//方法 2: 配列を渡す
var params = 新しい URLSearchParams([['foo', 1], ['bar', 2]]);

//方法 3: オブジェクトを渡す
var params = 新しい URLSearchParams({'foo' : 1 , 'bar' : 2});

URLSearchParams はクエリ文字列を自動的にエンコードします。

var params = 新しい URLSearchParams({'foo': 'Hello'});
params.toString() // "foo=%E4%BD%A0%E5%A5%BD"

上記のコードでは、foo の値は漢字であり、URLSearchParams によって自動的に URL エンコードされます。

ブラウザーがフォーム データをサーバーに送信するとき、URLSearchParams インスタンスをフォーム データとして直接使用できます。

const params = 新しい URLSearchParams({foo: 1, bar: 2});
fetch('https://example.com/api', {
  メソッド: 'POST'、
  本体: パラメータ
}）。それから（...）

上記のコードでは、「fetch」コマンドがサーバーにコマンドを送信するときに、「URLSearchParams」インスタンスを直接使用できます。

URLSearchParams は URL() インターフェースと組み合わせて使用​​できます。

var url = 新しい URL(window.location);
var foo = url.searchParams.get('foo') || 'somedefault';

上記のコードでは、URL インスタンスの searchParams 属性は URLSearchParams インスタンスであるため、URLSearchParams インターフェイスの get メソッドを使用できます。

URLSearchParams インスタンスにはトラバーサー インターフェイスがあり、for...of ループを使用してトラバースできます (詳細については、「ES6 標準入門」の「イテレータ」の章を参照してください)。

var params = 新しい URLSearchParams({'foo': 1 , 'bar': 2});

for (パラメータの変数 p) {
  console.log(p[0] + ': ' + p[1]);
}
// foo:1
// バー: 2

URLSearchParams にはインスタンス プロパティはなく、インスタンス メソッドのみがあります。

URLSearchParams.toString()

toString メソッドはインスタンスの文字列形式を返します。

var url = 新しい URL('https://example.com?foo=1&bar=2');
var params = 新しい URLSearchParams(url.search);

params.toString() // "foo=1&bar=2'

文字列が必要な場合は、toString メソッドが自動的に呼び出されます。

var params = 新しい URLSearchParams({バージョン: 2.0});
window.location.href = location.pathname + '?' + params;

上記のコードでは、location.href に値を割り当てるときに、params オブジェクトを直接使用できます。このとき、toStringメソッドが自動的に呼び出されます。

URLSearchParams.append()

append() メソッドは、クエリ パラメータを追加するために使用されます。 2 つのパラメータを受け入れます。1 つ目はキー名、2 つ目はキー値で、戻り値はありません。

var params = 新しい URLSearchParams({'foo': 1 , 'bar': 2});
params.append('baz', 3);
params.toString() // "foo=1&bar=2&baz=3"

append() メソッドは、キー名がすでに存在するかどうかを認識しません。

var params = 新しい URLSearchParams({'foo': 1 , 'bar': 2});
params.append('foo', 3);
params.toString() // "foo=1&bar=2&foo=3"

上記のコードでは、クエリ文字列に foo がすでに存在していますが、append は同じ名前のキーを追加します。

URLSearchParams.delete()

delete() メソッドは、指定されたクエリ パラメータを削除するために使用されます。キー名をパラメータとして受け入れます。

var params = 新しい URLSearchParams({'foo': 1 , 'bar': 2});
params.delete('バー');
params.toString() // "foo=1"

URLSearchParams.has()

has() メソッドは、クエリ文字列に指定されたキー名が含まれているかどうかを示すブール値を返します。

var params = 新しい URLSearchParams({'foo': 1 , 'bar': 2});
params.has('bar') // true
params.has('baz') // false

URLSearchParams.set()

set() メソッドは、クエリ文字列のキー値を設定するために使用されます。

2 つのパラメータを受け入れます。1 つ目はキー名、2 つ目はキー値です。キーがすでに存在する場合はキー値が上書きされ、存在しない場合は追加されます。

var params = 新しい URLSearchParams('?foo=1');
params.set('foo', 2);
params.toString() // "foo=2"
params.set('バー', 3);
params.toString() // "foo=2&bar=3"

上記のコードでは、「foo」はすでに存在するキー、「bar」はまだ存在しないキーです。

同じ名前のキーが複数ある場合、set は既存のキーをすべて削除します。

var params = 新しい URLSearchParams('?foo=1&foo=2');
params.set('foo', 3);
params.toString() // "foo=3"

以下は現在の URL を置き換える例です。

// URL: https://example.com?version=1.0
var params = 新しい URLSearchParams(location.search.slice(1));
params.set('バージョン', '2.0');

window.history.replaceState({}, '', location.pathname + `?` + params);
// URL: https://example.com?version=2.0

URLSearchParams.get()、URLSearchParams.getAll()

get() メソッドは、クエリ文字列内の指定されたキーを読み取るために使用されます。キー名をパラメータとして受け入れます。

var params = 新しい URLSearchParams('?foo=1');
params.get('foo') // "1"
params.get('bar') // null

注意が必要な箇所が2箇所あります。まず、元の値が数値の場合は、型を変更する必要があります。次に、指定されたキー名が存在しない場合、戻り値は「null」になります。

同じ名前のキーが複数ある場合、get は先頭のキーの値を返します。

var params = 新しい URLSearchParams('?foo=3&foo=2&foo=1');
params.get('foo') // "3"

上記のコードでは、クエリ文字列には 3 つの foo キーがあり、get メソッドはフロント キーの値 3 を返します。

getAll() メソッドは、指定されたキーのすべてのキー値をメンバーとする配列を返します。キー名をパラメータとして受け入れます。

var params = 新しい URLSearchParams('?foo=1&foo=2');
params.getAll('foo') // ["1", "2"]

上記のコードでは、クエリ文字列には 2 つの foo キーがあり、getAll によって返される配列には 2 つのメンバーがあります。

URLSearchParams.sort()

sort() メソッドは、Unicode コード ポイントに従ってクエリ文字列内のキーを小さいものから大きいものへと並べ替えます。

このメソッドには戻り値がないか、戻り値が「未定義」です。

var params = 新しい URLSearchParams('c=4&a=2&b=3&a=1');
params.sort();
params.toString() // "a=2&a=1&b=3&c=4"

上記のコードでは、同じ名前のキー a が 2 つある場合、それらはソートされませんが、元の順序は保持されます。

URLSearchParams.keys()、URLSearchParams.values()、URLSearchParams.entries()

これら 3 つのメソッドはすべて、「for...of」 ループが通過する反復子オブジェクトを返します。それらの違いは、「keys」メソッドはキー名のトラバーサを返し、「values」メソッドはキー値のトラバーサを返し、「entries」メソッドはキーと値のペアのトラバーサを返すことです。

var params = 新しい URLSearchParams('a=1&b=2');

for(params.keys() の var p) {
  コンソール.ログ(p);
}
//
//b

for(params.values() の var p) {
  コンソール.ログ(p);
}
// 1
// 2

for(params.entries() の var p) {
  コンソール.ログ(p);
}
// ["a", "1"]
// ["b", "2"]

URLSearchParams を直接走査すると、実際には entries インターフェースが内部的に呼び出されます。

for (パラメータの変数 p) {}
// と同等
for (params.entries() の var p) {}

参考リンク

作者: wangdoc

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

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

前の章次の章