JavaScript URL - izudon/izudon.github.io GitHub Wiki

概要

  • URL オブジェクトは、URL 文字列を引数とするコンストラクタによって、
    作ることが可能である（以下のように）。 
    const url = new URL( "https://user:[email protected]/ir/?q=abc&max=25#2023-1q" );

１．８つの構成要素

URL はよくみれば８つの部分からなり、それぞれ以下のプロパティで拾ってこられる。

  1. .protocol プロトコル https
  2. .hostname ホスト名 www.example.com
  3. .port ポート番号 443（省略されている場合プロトコルからデフォルトで推定）
  4. .pathname パス /ir/
  5. .search クエリ文字列 ?q=abc&max=25
  6. .hash ハッシュ #2023-1q
  7. .username ユーザ名 user
  8. .password パスワード pass

このうちいくつかをつなげて一気に拾ってこられるプロパティもある。

  • host ホスト名＋ポート www.example.com:8080
  • origin プロトコル＋ホスト名＋ポート https://www.example.com:8443
  • ポートはいずれもそれがプロトコルのデフォルトでない場合に付加される。

２．文字列表現

  • .href このプロパティは上記全情報を含んだURLを示す文字列表現を示す。
    "https://user:[email protected]/ir/?q=abc&max=25#2023-1q"

３．代入

  • 上記の各プロパティ（origin など読取専用のものを除く）に、
    値（文字列）を代入することで、URL の一部を変えてしまうことができる。 
    const a = new URL( "http://www.example.com/ir/" );
a.pathname = "/history/2020s.html";
a.hash = "2023";
a.href //=> "http://www.example.com/history/2020s.html/#2023"
  • また、window.location.href に URL 文字列を代入することで、
    画面遷移 を起こすことができる。 
    window.location.href = "http://www.google.com/"; //=> Google に飛ぶ

４．クエリ文字列

クエリ文字列付き URL の生成

  1. オブジェクトを引数として URLSearchParams を new する。
  2. 出来上がったオブジェクトを .toString() して URL オブジェクトの search に代入。
  3. .href プロパティを参照する。
const params = {
    q: "abc123",
    lang: "ja"
}
const url = new URL( "https://www.example.com/" );
url.search =  new URLSearchParams(params).toString();
url.href //=> "https://www.example.com/?q=abc123&lang=ja"

参考

資料