🔗

Web APIのhostプロパティはポート番号もくっつく、ほか2つ

2022/08/15に公開

URL parts naming. Inspired from web browsers API (new URL(), window.location) and rfc3986.が、Web APIのチートシートとしてとても優秀でした。

同時にちゃんと調べたことがなかったので、URIの仕様やWeb APIのマニュアルを読んでみたところ、面白い事実がありました。

host と hostname

Web APIを利用して、http://www.example.com:1234/のホスト名を取得したいとき、hostではなくhostnameを利用する必要があります。
host プロパティだとポート番号もあわせて取得されるためです。

const url = new URL("http://www.example.com:1234/");

console.log(url.host); // www.example.com:1234
console.log(url.hostname); // www.example.com

URIの仕様を決めているRFC3986を参照しましたが、hostという言葉がポート番号を含む訳はないようです。
つまりWeb API独自のものだと理解しています。

search? query?

http://www.example.com/index.html?keyword=hoge?keyword=hogeの箇所は、searchプロパティで取得できます。

const url = new URL("http://www.example.com/index.html?keyword=hoge");

console.log(url.search); // ?keyword=hoge

RFC3986によると、URIの場合はこの箇所をqueryと定義しています。自分もよくクエリと表現していました。誰かがsearchと言ったときにも理解できるようにしたいですね。

hash? fragment?

ちなみにhttp://www.example.com/index.html#foo#fooの箇所は、hashプロパティで取得できます。

const url = new URL("http://www.example.com/index.html#foo");

console.log(url.hash); // #foo

これもURIの場合はfragmentと呼ぶようです。そもそもqueryに含まれると勘違いしていたので、認識を正す良い機会になりました。

参照

Discussion