🔗
URL が有効か判定する URL.canParse() メソッド
課題
new URL() に URL として無効な（パースできない）文字列を渡すと例外が発生します。
例外を回避するためには try-catch で囲う必要がありました。
判定用関数
function canParse(url: string | URL, base?: string | URL): boolean {
try {
new URL(url, base);
return true;
} catch {
return false;
}
}
URL.canParse()
上記のような判定を行う URL.canParse() メソッドが追加されたようで主要な最新ブラウザでは使えるようになっています。
ただ、未対応のブラウザやバージョンが古い環境もまだあるので使用する場合は Polyfill を実装しておくとよさそうです。
if (URL.canParse(url)) {
// ...
}
Polyfill
Polyfill とは代替実装のことです。
以下のコードを最初の方に読み込まれるファイルに実装しておくと URL.canParse() がサポートされていないブラウザでも使えるようになります。
（SvelteKit だと Hooks あたりに実装しておくといいでしょう。）
if (!URL.canParse) {
URL.canParse = (url: string | URL, base?: string | URL): boolean => {
try {
new URL(url, base);
return true;
} catch {
return false;
}
};
}
補足
if ('canParse' in URL === false) で判定してもいいと思いますがエディタに赤線を引かれてしまったので !URL.canParse にしました。
ライブラリ
URL.canParse() を含め様々な Polyfill に対応しているライブラリもあるようなので必要あれば導入するのもいいかもしれません。
Discussion