ملخص

يوفر كائن URL في JavaScript طريقة للعمل مع عناوين URL ومعالجتها بسهولة. إنه مفيد بشكل خاص عندما تحتاج إلى إنشاء عناوين URL أو تحليلها أو تعديلها داخل التعليمات البرمجية الخاصة بك.

يتم استخدام سلاسل القالب مرات عديدة لإنشاء عناوين URL في JavaScript. غالبًا ما يكون هذا سهلاً وواضحًا بما فيه الكفاية، ولكن كائن URL هو أسلوب OOP أكثر قوة للتعامل مع عناوين URL.

حتى OpenWeatherMap.org يستخدم سلاسل القالب في وثائقه: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key

بالنسبة لعنوان 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:).
• اسم المضيف: اسم النطاق (على سبيل المثال، example.com).
• المنفذ: رقم المنفذ (على سبيل المثال، 8080).
• اسم المسار: المسار الذي يتبع المجال (على سبيل المثال، /path).
• البحث: سلسلة الاستعلام، بما في ذلك؟ (على سبيل المثال، ?query=123).
• التجزئة: معرف الجزء، بما في ذلك # (على سبيل المثال، #section).
• المضيف: اسم المضيف والمنفذ مدمجين (على سبيل المثال، example.com:8080).
• Origin: أصل عنوان 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 هي زوج من المفاتيح والقيمة يُعلم تفاصيل خادم واجهة برمجة التطبيقات لخدمة المستخدم.

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: ''
}

ملخص

يوفر كائن URL في JavaScript طريقة منظمة للعمل مع عناوين URL، مما يسمح بالمعالجة السهلة وإنشاء عناوين URL المعقدة. في حين أن سلاسل القوالب بسيطة وفعالة لعناوين URL الثابتة، فإن كائنات URL تعتبر مثالية للحالات التي تكون فيها عناوين URL ديناميكية أو تتطلب تعديلات متكررة.

تصوير آن نيغارد على Unsplash