はじめに

今まではlocation.～しか使っていなかった….
ただ、最近new URL()を使用してもっと早く知りたかったと思い記事にすることにしました。

結論

locationは関連付けられたオブジェクトの場所（現在アクセスしているブラウザのURL）を取得することができる。
- 取得したURLやプロパティを変更するとブラウザのURLに反映される。
new URL()は取得したURLの解析や構築が容易にできる。
- URLやプロパティを変更してもブラウザに反映とかはされない。
さらに詳しく知りたい方は参考文献から詳細内容を確認して下さい。

Location

**Location**インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。変更が行われると、関連するオブジェクトに反映されます。

参考： mdn web docs : Location

各プロパティ取得

// 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 のコンポーネントを簡単に読み取って変更できるプロパティを提供することで機能します。

参考：mdn web docs : 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

参考文献

mdn web docs : Location
mdn web docs : URL