location.hostとlocation.hostnameの違い

現在開いているサイトのURLに関する情報を扱うwindow.location のプロパティにwindow.location.hostとwindow.location.hostnameがあり、それらの違いがよくわからなかったため、調査してみました。

location.hostとlocation.hostnameの違い

location.hostnameは「ドメイン名」が取得できて、location.hostは「ドメイン名＋ポート番号」が取得できます。hostはhostnameに加えてポート番号が追加されているようです。

localhost:3030の開発環境で使った場合の具体例

location.hostの結果を以下のコードをコンソールに入力して取得します。

console.log(location.host);

出力結果は以下のようになります。

'localhost:3030'

location.hostnameの結果を以下のコードをコンソールに入力して取得します。

console.log(location.hostname);

出力結果は以下のようになります。

'localhost'

MDNによるhostとhostnameの説明

location.hostの概要

host は Location インターフェイスのプロパティで、 USVString でホスト、すなわちホスト名と、 URL のポート番号が空でなければ、 ‘:’ およびそのポート番号を保持します。

https://developer.mozilla.org/ja/docs/Web/API/Location/hostname

location.hostnameの概要

hostname は Location インターフェイスのプロパティで、 USVString で URL のドメインを保持します。

https://developer.mozilla.org/ja/docs/Web/API/Location/hostname