URL APIを使ってみる

JavaScriptのURL APIを使って、URL文字列からURLオブジェクトの作成やURLパスの取得などを試してみます。

サンプルコード

URLオブジェクトの作成を試してみます。
作成にはnew URL()を使用します。

実際に試してみます。

const baseUrl = 'https://example.com/';

// 第一引数に絶対URLを指定した場合
const sample1 = new URL(baseUrl);
console.log('sample1', sample1);

// 第一引数に相対URL、第二引数に絶対URLを指定した場合
const sample2 = new URL('/sample/', baseUrl);
console.log('sample2', sample2);

// 第二引数にURLオブジェクトを指定した場合
const sample3 = new URL('/test/', sample2);
console.log('sample3', sample3);

// 与えられたパラメーターまたは結果のURLが有効なURLでない場合はエラー
const sample4 = new URL('/sample/'); // Uncaught TypeError: Failed to construct 'URL': Invalid URL

consoleでURLオブジェクトの生成が確認できました。
URLオブジェクト生成のデモページ

次にURLオブジェクトを使って値の取得を試してみます。

const baseUrl = 'https://localhost:3000/';

const sample = new URL('/sample/test.html?key=val#hash', baseUrl);
console.log('sample', sample);
console.log('hash', sample.hash); // #hash
console.log('host', sample.host); // localhost:3000
console.log('hostname', sample.hostname); // localhost
console.log('href', sample.href); // https://localhost:3000/sample/test.html?key=val#hash
console.log('origin', sample.origin); // https://localhost:3000
console.log('pathname', sample.pathname); // /sample/test.html
console.log('port', sample.port); // 3000
console.log('protocol', sample.protocol); // https:
console.log('search', sample.search); // ?key=val
console.log('searchParams', sample.searchParams);

URLオブジェクトの値取得のデモページ