location.hrefでドメイン名URLを取得したときの最後のスラッシュ

こちらも、簡単なことで思いがけずハマった件。

JavaScriptのlocation.hrefで今見ているページのURLを取得し、トップページのURLと一致しているかどうかで処理を分けたい、ということがありました。

let now = location.href;

if(now === 'https://www.nkweb.work'){
 //一致した場合の処理
}else{
 //一致しない場合の処理
}

このようなイメージです。

http/httpsやwwwの有無は統一済みだったので問題ないと思っていましたが、なぜかうまく動きませんでした。そこで、consoleにnowを出してみると、

console.log(now);

// 出力結果
// https://www.nkweb.work/

あー！最後に / がつくんですね。

というわけで、コード修正。

let now = location.href;

if(now === 'https://www.nkweb.work/'){
 //一致した場合の処理
}else{
 //一致しない場合の処理
}

これで意図した通りに動きました。

---

URLの最後につく / を、trailing slash（トレイリングスラッシュ）と呼ぶそうです。トップページか下層ページかに関わらず、URLの末尾につく / を指します。

今回私がハマったのは、ブラウザのアドレスバーでトップページを見た時に、最後の / が表示されないからでした。

ほらー！どこにも出てないじゃん。これ見たら / 無しで一致するもんだと思っちゃうじゃん。いやまあ、アドレスバーを1回コピペすればフルで見られるけどね…。

トレイリングスラッシュの有無は、サーバの設定によっても違うかもしれません。でも大抵は、実際にはついているけどブラウザには表示されないパターンな気がする。勉強になりました…。