URL オブジェクト-jsチュートリアル-php.cn

URL オブジェクト

Mary-Kate Olsen

リリース： 2024-10-11 10:36:29

オリジナル

379 人が閲覧しました

The URL Object

概要

JavaScript の URL オブジェクトは、URL を簡単に操作および操作する方法を提供します。これは、コード内で URL を構築、解析、または変更する必要がある場合に特に役立ちます。

JavaScript で URL を作成するためにテンプレート文字列が使用されることがよくあります。多くの場合、これは簡単で明確ですが、URL オブジェクトは URL を処理するためのより堅牢な OOP メソッドです。

OpenWeatherMap.org でもドキュメントでテンプレート文字列を使用しています: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API キー}

かなり静的な URL の場合はこれで問題ありませんが、この URL に変更を加えたい場合は、URL オブジェクトの使用を検討してください。

// Using template strings
const lat = 32.087;
const lon = 34.801;
const apiKey = 'your_api_key';
const url = `https://api.openweathermap.org/data/3.0/onecall?lat=${lat}&lon=${lon}&appid=${apiKey}`;

// Using the URL object
const openWeatherUrl = new URL('https://api.openweathermap.org/data/3.0/onecall');
openWeatherUrl.searchParams.set('lat', lat);
openWeatherUrl.searchParams.set('lon', lon);
openWeatherUrl.searchParams.set('appid', apiKey);

ログイン後にコピー

基本的な使い方

URL 文字列をコンストラクターに渡すことで、新しい URL オブジェクトを作成できます。

この場合 (上記とは対照的に) URL 全体がさまざまな部分とともに渡されます。

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

ログイン後にコピー

プロパティ

URL オブジェクトには、URL の一部にアクセスするために使用できるいくつかのプロパティがあります。

href: 文字列としての完全な URL。
プロトコル: プロトコル (例: https:)。
hostname: ドメイン名 (例: example.com)。
port: ポート番号 (例: 8080)。
pathname: ドメインに続くパス (例: /path)。
search: ? を含むクエリ文字列。 (例: ?query=123).
ハッシュ: # を含むフラグメント識別子 (#section など)。
host: ホスト名とポートの組み合わせ (例: example.com:8080)。
オリジン: URL のオリジン (プロトコル、ホスト名、ポート)。

> const url = new URL('https://example.com:8080/path?query=123#section');
> url.port
'8080'
> url.protocol
'https:'
> url.hostname
'example.com'
> url.pathname
'/path'
> url.search
'?query=123'
> url.hash
'#section'
> url.host
'example.com:8080'

ログイン後にコピー

これらは URL のさまざまな部分を変更するためにも使用できますか?:

> url.port = 1234
1234
> url.pathname = "differentpath"
'differentpath'
> url.hostname = "example.org"
'example.org'
> url
URL {
  href: 'https://example.org:1234/differentpath?query=123#section',
  origin: 'https://example.org:1234',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'example.org:1234',
  hostname: 'example.org',
  port: '1234',
  pathname: '/differentpath',
  search: '?query=123',
  searchParams: URLSearchParams { 'query' => '123' },
  hash: '#section'
}

ログイン後にコピー

メソッド

URL オブジェクトには、URL の変更や操作に役立つメソッドもいくつかあります。

たとえば、URL 検索パラメータ は、ユーザーにサービスを提供するための API サーバーの詳細を通知するキーと値のペアです。

url.searchParams: URLSearchParams オブジェクトを返します。このオブジェクトは、クエリ文字列パラメータを操作するメソッドを提供します。次のことができます:

クエリパラメータを取得します: url.searchParams.get('query')
クエリパラメータを設定します: url.searchParams.set('query', '456')
クエリパラメータを削除します: url.searchParams.delete('query')

クエリパラメータを反復処理します:

url.searchParams.forEach((value, key) => {
  console.log(key, value);
});

ログイン後にコピー

toString(): プロパティまたはクエリパラメーターに加えられた変更を反映して、完全な URL を文字列として返します。

Open Weather Map API の例

OpenWeatherMap のドキュメントは次のとおりです: https://openweathermap.org/api/one-call-3

これは、URL オブジェクトを作成してその部分を操作する方法を示す簡単な例です:

// get values to interpolate to URL
const apiKey = process.env.openWeatherApiKey || 0
const [lat, lon] = [32.08721095615897, 34.801588162316506]

const openWeatherUrl = new URL("https://api.openweathermap.org")

openWeatherUrl.pathname = "data/3.0/onecall"
openWeatherUrl.searchParams.set('lat',lat)
openWeatherUrl.searchParams.set('lon',lon)

// from the docs
openWeatherUrl.searchParams.set('exclude', 'hourly')

openWeatherUrl.searchParams.set('appid', apiKey)

console.log(openWeatherUrl)

ログイン後にコピー

出力:

URL {
  href: 'https://api.openweathermap.org/data/3.0/onecall?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  origin: 'https://api.openweathermap.org',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'api.openweathermap.org',
  hostname: 'api.openweathermap.org',
  port: '',
  pathname: '/data/3.0/onecall',
  search: '?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  searchParams: URLSearchParams {
    'lat' => '32.08721095615897',
    'lon' => '34.801588162316506',
    'exclude' => 'hourly',
    'appid' => '0' },
  hash: ''
}

ログイン後にコピー