URLからホスト名やクエリ文字列を取得する

![url.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193449/94bd3f03-29f0-441b-3f96-7760f3b428ae.png)  

# URL
[URL - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/URL)  
```javascript
let url = new URL("https://site.com:4097/URL/index.html?d1=1&d2=2#item");
```
|プロパティ|値|
|:----|:----|
|url.[href](https://developer.mozilla.org/ja/docs/Web/API/URL/href)|https&#58;//site.com:4097/URL/index.html?d1=1&d2=2#item|
|url.[origin](https://developer.mozilla.org/ja/docs/Web/API/URL/origin)|https&#58;//site.com:4097|
|url.[host](https://developer.mozilla.org/ja/docs/Web/API/URL/host)|site.com:4097|
|url.[protocol](https://developer.mozilla.org/ja/docs/Web/API/URL/protocol)|https:|
|url.[hostname](https://developer.mozilla.org/ja/docs/Web/API/URL/hostname)|site.com|
|url.[port](https://developer.mozilla.org/ja/docs/Web/API/URL/port)|4097|
|url.[pathname](https://developer.mozilla.org/ja/docs/Web/API/URL/pathname)|/URL/index.html|
|url.[search](https://developer.mozilla.org/ja/docs/Web/API/URL/search)|?d1=1&d2=2|
|url.[hash](https://developer.mozilla.org/ja/docs/Web/API/URL/hash)|#item|
|url.[username](https://developer.mozilla.org/ja/docs/Web/API/URL/username)| |
|url.[password](https://developer.mozilla.org/ja/docs/Web/API/URL/password)| |
|url.[searchParams](https://developer.mozilla.org/ja/docs/Web/API/URL/searchParams)|[URLSearchParams](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams) オブジェクトを返す。|

#### ポート番号がスキームのデフォルトポートの場合
[TCPやUDPにおけるポート番号の一覧 - Wikipedia](https://ja.wikipedia.org/wiki/TCP%E3%82%84UDP%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%9D%E3%83%BC%E3%83%88%E7%95%AA%E5%8F%B7%E3%81%AE%E4%B8%80%E8%A6%A7)  
```javascript
//443はhttpsのデフォルトポート
let url = new URL("https://site.com:443/URL/index.html");
```
|プロパティ|値|
|:----|:----|
|url.[href](https://developer.mozilla.org/ja/docs/Web/API/URL/href)|https&#58;//site.com/URL/index.html|
|url.[origin](https://developer.mozilla.org/ja/docs/Web/API/URL/origin)|https&#58;//site.com|
|url.[host](https://developer.mozilla.org/ja/docs/Web/API/URL/host)|site.com|
|url.[port](https://developer.mozilla.org/ja/docs/Web/API/URL/port)||

# URLSearchParams

[URLSearchParams - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams)  

```javascript
//サイトURL:https://site.com:4097/URL/index.html?d1=1&d2=2
let searchParams = new URLSearchParams(window.location.search);
```

|メソッド|内容|値|
|:----|:----|:----|
|searchParams.[has](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/has)("d1")|パラメータの有無|true|
|searchParams.[get](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/get)("d1")|パラメータの値の取得|1|
|searchParams.[set](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/set)("d3",4)|パラメータd3に4を設定| |
|searchParams.[delete](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/delete)("d1")|パラメータの削除| |
|searchParams.[toString](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/toString)()|クエリ文字列作成|d2=2&d3=4|
|[Object.fromEntries](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)(searchParams)|オブジェクトに変換|{ d2: "2", d3: "4" }|

その他のメソッド [entries](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/entries)、[forEach](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/forEach)、[keys](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/keys)、[values](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/values)、[append](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/append)、[getAll](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/getAll)、[sort](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams/sort)