javascript

[Javascript] New URL(), New URLSearchParams()

JJIMJJIM 2024. 5. 17. 11:14
728x90
반응형

 

 

[Javascript] New URL(), New URLSearchParams()

 

 

New URL()

new URL()는 JavaScript에서 URL 객체를 생성하기 위한 생성자 함수입니다.

이 객체는 웹 주소를 구성하는 다양한 부분에 접근하고 조작할 수 있게 해줍니다.

예를 들어, 다음과 같은 URL이 있다고 가정해봅시다: https://www.example.com:8080/path?query=1#hash

이 URL을 new URL()을 사용해 객체로 만들어 보면 다음과 같습니다:

const url = new URL('https://www.example.com:8080/path?query=1#hash');

 

 

이제 url 객체를 사용하여 URL의 각 부분에 접근할 수 있습니다. 몇 가지 주요 속성은 다음과 같습니다

 

1. href: 전체 URL을 나타냅니다.

console.log(url.href); // "https://www.example.com:8080/path?query=1#hash"

 

2. protocol: URL의 프로토콜을 나타냅니다. 

console.log(url.protocol); // "https:"

 

3. hostname: 호스트 이름 (도메인)을 나타냅니다. 

console.log(url.hostname); // "www.example.com"

 

4. port: 포트 번호를 나타냅니다. 

console.log(url.port); // "8080"

 

5. pathname: 경로를 나타냅니다. 

console.log(url.pathname); // "/path"

 

6. search: 쿼리 문자열을 나타냅니다. 

console.log(url.search); // "?query=1"

 

7. hash: 해시(fragment)를 나타냅니다. 

console.log(url.hash); // "#hash"

 

8. searchParams: 

URL 객체의 속성으로, 해당 URL의 쿼리 문자열을 파싱한 URLSearchParams 객체를 반환합니다.

이는 URL과 직접 연관된 상태에서 쿼리 문자열을 조작할 수 있게 합니다.

// URL 객체 생성
const url = new URL('https://www.example.com?name=John&age=30');

// searchParams를 통해 URLSearchParams 객체에 접근
const params = url.searchParams;

// 쿼리 문자열 조작
params.set('name', 'Doe');
params.append('city', 'New York');

// URL이 자동으로 업데이트됨
console.log(url.toString()); // "https://www.example.com/?name=Doe&age=30&city=New%20York"

이처럼 URL.searchParams를 사용하면 URL과 직접 연결되어 있어

쿼리 문자열을 조작할 때 URL 자체도 자동으로 업데이트됩니다.

 

 

 

 

 

New URLSearchParams

URLSearchParams는 URL의 쿼리 문자열을 쉽게 다룰 수 있도록 도와주는 JavaScript 생성자 함수입니다.

URL의 쿼리 문자열은 ? 이후에 오는 부분으로, 키와 값의 쌍으로 이루어진 데이터를 포함합니다.

URLSearchParams 객체를 사용하면 이 쿼리 문자열을 파싱하고, 추가, 수정, 삭제할 수 있습니다.

예를 들어, https://www.example.com/path?name=John&age=30이라는 URL의 쿼리 문자열을 다뤄보겠습니다:

 

const params = new URLSearchParams('name=John&age=30');

 

이제 params 객체를 사용하여 쿼리 문자열을 쉽게 다룰 수 있습니다. 몇 가지 주요 메서드는 다음과 같습니다:

 

 

1. get(): 특정 키의 값을 가져옵니다. 

console.log(params.get('name')); // "John"
console.log(params.get('age')); // "30"

 

2. set(): 특정 키의 값을 설정합니다. --> *같은 키값이 있으면 덮고, 없으면 추가

params.set('name', 'Doe');
console.log(params.toString()); // "name=Doe&age=30"

 

3. append(): 새로운 키와 값을 추가합니다. --> * 같은 키값이 있어도 추가, 없어도 추가 

params.append('city', 'New York');
console.log(params.toString()); // "name=Doe&age=30&city=New York"

 

4. delete(): 특정 키와 그 값을 삭제합니다. 

params.delete('age');
console.log(params.toString()); // "name=Doe&city=New York"

 

5. has(): 특정 키가 있는지 확인합니다. 

console.log(params.has('name')); // true
console.log(params.has('age')); // false

 

6. forEach(): 모든 키-값 쌍에 대해 반복 작업을 수행합니다. 

params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 출력:
// name: Doe
// city: New York

 

 

 

 

new URL.searchParams와 new URLSearchParams의 차이점?

 

  1. 연결성:
    • URL.searchParams: URL 객체와 직접 연관되어 있어 URL을 조작할 때 사용됩니다.
    • URLSearchParams 생성자 함수: 독립적으로 쿼리 문자열을 다루며, 특정 URL과 연결되지 않습니다.
  2. 사용 맥락:
    • URL.searchParams: URL 전체를 포함한 상황에서 쿼리 문자열을 조작할 때 유용합니다.
    • URLSearchParams 생성자 함수: 독립적인 쿼리 문자열을 생성하거나 조작할 때 유용합니다.
  3. 자동 업데이트:
    • URL.searchParams: 쿼리 문자열을 조작하면 URL 자체가 자동으로 업데이트됩니다.
    • URLSearchParams 생성자 함수: 쿼리 문자열만 조작되며, URL 자체는 변경되지 않습니다.

이 두 가지 도구를 상황에 맞게 사용하면 URL과 관련된 작업을 더욱 효율적으로 수행할 수 있습니다.

 

 

728x90
반응형