지금까지 split로 URL을 잘라서 쓰곤 했는데 URL API를 사용하면 아주 쉽게 URL을 파싱해서 각 구성 요소를 참조할 수 있다.

let parsed = new URL('https://hyeonseok:mypassword@hyeonseok.com:5555/path?query=value#pagefragment');
​parsed.origin    // "https://hyeonseok.com:5555"
​parsed.host    // "hyeonseok.com:5555"
​parsed.href    // "https://hyeonseok:mypassword@hyeonseok.com:5555/path?query=value#pagefragment"
parsed.protocol    // "https:"
​parsed.username    // "hyeonseok"
parsed.password    // "mypassword"
​parsed.hostname    // "hyeonseok.com"
​parsed.port    // "5555"
​parsed.pathname    // "/path"
​parsed.search    // "?query=value"
parsed.hash    // "#pagefragment"
parsed.searchParams    // URLSearchParams {  }

이 중에 searchParams를 사용해서 쿼리 스트링의 파라메터 값을 가져올 수 있다.

parsed.searchParams.get('query')  // "value"

get외에도 has나 append, set과 같은 메서드를 사용할 수 있고 쿼리 스트링만 사용한다면 URLSearchParams에 쿼리 스트링을 직접 넣어서 사용할 수도 있다.

Caniuse에는 URL API가 url과 mdn-api_url 두개로 제공되고 있는데 MDN은 IE10부터 지원한다고 되어 있고 whatwg은 IE를 지원하지 않는 것으로 되어 있다. 실제로 IE에서 실행해 보면 제대로 동작하지 않는데 MDN의 정보는 createObjectURL이라는 IE URL의 다른 메서드에 대한 정보를 보여주고 있는 것이어서 위와 같이 사용할 수는 없다. 모던 브라우저에서만 활용할 수 있다.