◆ 相対パスの解決は URL 関数でできる

今のパスが
http://var.blog.jp/sample/test.html
として
../abc/def.html
/test/sample.html
//www.google.com
test2.js
dummy/../../../../abc/deg/../def.html
./test2.css
#hash
https://developer.mozilla.org/

みたいなパスの最終的なパスがほしいときにどうしますか?


Node.js にはあった気がするけど JavaScript にそんな便利機能なかったと思うし自分で実装しようかーと考えていて location みたいに origin とか pahtname とか分けてくれる奴なかったかなと探していて見つけた URL 関数
実はこれに 相対パスや絶対パスの解決をする機能までありました

ひとつ目の引数にパスを入れて 2 つ目の引数に今の URL を入れます



では上のやつをやってみます
暇な人は結果どうなるか考えてみてください

http://var.blog.jp/sample/test.html のページ内の a タグの href にリストのパスを書いた時のリンク先です

var paths = [
"../abc/def.html",
"/test/sample.html",
"//www.google.com",
"test2.js",
"dummy/../../../../abc/deg/../def.html",
"./test2.css",
"#hash",
"https://developer.mozilla.org/"
]
paths.forEach(e => console.log(new URL(e, "http://var.blog.jp/sample/test.html").toString()))
http://var.blog.jp/abc/def.html
http://var.blog.jp/test/sample.html
http://www.google.com/
http://var.blog.jp/sample/test2.js
http://var.blog.jp/abc/def.html
http://var.blog.jp/sample/test2.css
http://var.blog.jp/sample/test.html#hash
https://developer.mozilla.org/

どうですか
当たってました?

そろそろ大体の関数知ってるかなー と思ってましたがまだまだ知らない機能がありますね
web でできること全部に関わるわけですし もしかしてブラウザ JavaScript が全言語の中で標準でサポートしてる機能が一番機能が多い言語だったりするのかな?