URL

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

URL 인터페이스는 URL을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다. URL 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다. 이렇게 생성한 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다.

브라우저가 아직 URL() 생성자를 지원하지 않을 땐 Window 인터페이스의 Window.URL 속성으로 URL 객체에 접근할 수 있습니다. 개발에 사용하기 전, 프로젝트의 지원 대상 브라우저를 확인하고, 이런 절차를 추가해야 하는지 결정하세요.

참고: 이 기능은 Web Worker에서 사용할 수 있습니다.

생성자

new URL()

주어진 절대 URL, 또는 상대 URL과 기준 URL 문자열을 사용해 생성한 URL 객체를 생성하고 반환합니다.

속성

hash

'#'과 URL의 프래그먼트 식별자를 담은 USVString입니다.

host

URL의 도메인(호스트 이름), ':', 포트를 담은 USVString입니다.

hostname

URL의 도메인을 담은 USVString입니다.

href

전체 URL을 반환하는 문자열화 속성입니다.

origin 읽기 전용

URL의 출처, 즉 스킴, 도메인, 포트를 담은 USVString입니다.

password

도메인 이름 이전에 지정된 비밀번호를 담은 USVString입니다.

pathname

'/'와 URL의 경로를 담은 USVString입니다.

port

URL의 포트 번호를 담은 USVString입니다.

protocol

URL의 프로토콜 스킴을 담은 USVString입니다. 마지막 ':'을 포함합니다.

URL의 매개변수 문자열을 나타내는 USVString입니다. 어떤 매개변수라도 존재하는 경우 '?' 문자로 시작해, 모든 매개변수를 포함합니다.

searchParams 읽기 전용

search 속성의 매개변수 각각에 접근할 수 있는 URLSearchParams 객체입니다.

username

도메인 이름 이전에 지정된 사용자 이름을 담은 USVString입니다.

메서드

toString()

전체 URL을 담은 USVString을 반환합니다. URL.href와 동일하나, toString()으로는 URL을 편집할 수 없습니다.

toJSON()

전체 URL을 담은 USVString을 반환합니다. URL.href와 동일한 문자열을 반환합니다.

정적 메서드

createObjectURL()

고유한 블롭 URL, 즉 blob: 을 스킴으로 하고, 브라우저 내의 객체를 가리키는 고유한 불투명 문자열을 그 뒤에 붙인 DOMString을 반환합니다.

revokeObjectURL()

이전에 URL.createObjectURL()로 생성한 객체 URL을 취소합니다.

사용 일람

생성자는 url 매개변수를 받으며, URL이 상대 URL인 경우 선택적으로 base 매개변수를 지정해 기준으로 사용할 수 있습니다.

js
const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

URL 속성을 사용해 URL을 만들 수 있습니다.

js
url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"

URL은 RFC 3986의 규칙을 따라 인코딩 됩니다.

js
url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

URLSearchParams 인터페이스를 사용해 URL 쿼리 문자열을 생성하거나 조작할 수 있습니다.

현재 URL의 검색 매개변수를 가져오려면 다음과 같은 코드를 사용하세요.

js
// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

toString() 메서드는 단순히 href 속성의 값을 반환하는 것이므로, URL 정규화와 인코딩에 생성자를 직접 사용할 수 있습니다.

js
const response = await fetch(
  new URL("http://www.example.com/démonstration.html"),
);

명세

Specification
URL Standard
# url

브라우저 호환성

BCD tables only load in the browser

같이 보기