はじめに
今まではlocation.~
しか使っていなかった….
ただ、最近new URL()
を使用してもっと早く知りたかったと思い記事にすることにしました。
結論
-
location
は関連付けられたオブジェクトの場所 (現在アクセスしているブラウザのURL)を取得することができる。- 取得したURLやプロパティを変更するとブラウザのURLに反映される。
- new URL()は取得したURLの解析や構築が容易にできる。
- URLやプロパティを変更してもブラウザに反映とかはされない。
- さらに詳しく知りたい方は参考文献から詳細内容を確認して下さい。
Location
**
Location
**インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。 変更が行われると、関連するオブジェクトに反映されます。
各プロパティ取得
// https://user:password@example.com:8080/directory1/directory2/index.html?aaa=111&bbb=222#hash ※仮URL
const url = location.href;
console.log(url); // https://user:password@example.com:8080/directory1/directory2/index.html?aaa=111&bbb=222#hash
console.log(location.origin); // https://example.com:8080
console.log(location.protocol); // https:
console.log(location.host); // example.com:8080
console.log(location.hostname); // example.com
console.log(location.port); // 8080
console.log(location.pathname); // /directory1/directory2/index.html
console.log(location.search); // ?aaa=111&bbb=222
console.log(location.hash); // #hash
// 下記は現在非推奨になっています。
// console.log(location.username);
// console.log(location.password);
new URL()
**
URL
**インターフェイスは、URLの解析、構築、正規化、およびエンコードに使用します。 URL のコンポーネントを簡単に読み取って変更できるプロパティを提供することで機能します。
各プロパティ取得
// location.href → https://user:password@example.com:8080/directory1/directory2/index.html?aaa=111&bbb=222#hash ※仮URL
const url = new URL(location.href)
console.log(url.href); // https://user:password@example.com:8080/directory1/directory2/index.html?aaa=111&bbb=222#hash
console.log(url.origin); // https://example.com:8080
console.log(url.protocol); // https:
console.log(url.host); // example.com:8080
console.log(url.hostname); // example.com
console.log(url.port); // 8080
console.log(url.username); // user
console.log(url.password); // password
console.log(url.pathname); // /directory1/directory2/index.html
console.log(url.search); // ?aaa=111&bbb=222
console.log(url.hash); // #hash
console.log(url.searchParams.get("aaa")); // 111
URL構築
origin以外の値は変更できる。originに値を入れようとした場合は下記エラーが発生する。
- Cannot set property origin of [object URL] which has only a getter
- ゲッターしか持っていない。つまり読み取り専用プロパティである。
// location.href → https://user:password@example.com:8080/directory1/directory2/index.html?aaa=111&bbb=222#hash ※仮URL
const url = new URL(location.href)
// 下記の値で再構築
url.username = "user1";
url.pathname = "/directory1/directory2/directory3/index.html";
url.search = "?aaa=111&bbb=222&ccc=333";
console.log(url.href); // https://user1:password@example.com:8080/directory1/directory2/directory3/index.html?aaa=111&bbb=222&ccc=333#hash