Wiki_JS_URL - inoueshinichi/Wiki_Web GitHub Wiki

URLオブジェクトの使い方

  • URL文字列を管理するオブジェクト
  • URLは自動的にパスをエスケープしてくれない(encodeURIComponent必須)

参考

URLオブジェクト

例1

const url = new URL("https://example.com/path/to/page?key=value&page=1#main");

console.log(url);
/* URL {
  href: "[https](https://example.com/path/to/page?key=value&page=1#main"
  origin: "https://example.com",
  protocol: "https",
  username: "",
  password: "",
  host: "example.com",
  hostname: "example.com",
  port: "",
  pathname: "/path/to/page",
  search: "?key=value&page=1",
  hash: "#main",
  searchParams: URLSearchParams { key: value, page: 1}
} */

例2

  const base = "https://example.com/";
  const name = "<user input>"; // <: %3C, 空白: %20, >: %3E
  const result = new URL(`/user/${encodeURIComponent(name)}`, base);
  
  console.log(result.toString()); // "https://example.com/user%3Cuser$20input%3E"

プロパティ

プロパティ 型 説明
href string URI文字列
origin string オリジン
protocol string プロトコル名
username string 認証ユーザ名
password string 認証パスワード
host string ホスト(IP)
hostname string ホスト名(DNS解決済み)
port string ボート番号
pathname string パス名
search string URL文字列のクエリ部分
hash string URL文字列のハッシュ部分
searchParams URLSearchParams URL文字列のクエリ部分専用オブジェクト

メソッド

メソッド 戻り値 説明
⚠️ **GitHub.com Fallback** ⚠️