सिंहावलोकन

जावास्क्रिप्ट में यूआरएल ऑब्जेक्ट यूआरएल के साथ आसानी से काम करने और हेरफेर करने का एक तरीका प्रदान करता है। यह विशेष रूप से तब उपयोगी होता है जब आपको अपने कोड के भीतर यूआरएल बनाने, पार्स करने या संशोधित करने की आवश्यकता होती है।

जावास्क्रिप्ट में यूआरएल बनाने के लिए कई बार टेम्प्लेट स्ट्रिंग्स का उपयोग किया जाता है। अक्सर यह काफी आसान और स्पष्ट होता है, लेकिन यूआरएल ऑब्जेक्ट यूआरएल से निपटने का एक अधिक मजबूत ओओपी तरीका है।

यहां तक ​​कि OpenWeatherMap.org अपने दस्तावेज़ में टेम्पलेट स्ट्रिंग्स का उपयोग करता है: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key }

एक ऐसे यूआरएल के लिए जो काफी स्थिर है, यह ठीक है, हालांकि यदि आप इस यूआरएल में बदलाव करना चाहते हैं तो आप यूआरएल ऑब्जेक्ट का उपयोग करने पर विचार कर सकते हैं।

// 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);

बुनियादी उपयोग

आप एक यूआरएल स्ट्रिंग को उसके कंस्ट्रक्टर में पास करके एक नया यूआरएल ऑब्जेक्ट बना सकते हैं।

इस मामले में (ऊपर के विपरीत) संपूर्ण यूआरएल विभिन्न भागों के साथ पास किया गया है:

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

गुण

यूआरएल ऑब्जेक्ट में कई गुण हैं जिनका उपयोग आप यूआरएल के कुछ हिस्सों तक पहुंचने के लिए कर सकते हैं:

• href: एक स्ट्रिंग के रूप में पूरा URL।
• प्रोटोकॉल: प्रोटोकॉल (जैसे, https:).
• होस्टनाम: डोमेन नाम (उदाहरण के लिए, example.com).
• पोर्ट: पोर्ट नंबर (जैसे, 8080).
• पथनाम: डोमेन का अनुसरण करने वाला पथ (उदा., /पथ).
• खोज: क्वेरी स्ट्रिंग, जिसमें ? भी शामिल है? (उदा., ?query=123).
• हैश: खंड पहचानकर्ता, जिसमें # (उदाहरण के लिए, # अनुभाग) शामिल है।
• होस्ट: होस्टनाम और पोर्ट संयुक्त (जैसे, 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.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.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 को एक स्ट्रिंग के रूप में लौटाता है, जो गुणों या क्वेरी पैरामीटर में किए गए किसी भी बदलाव को दर्शाता है।

ओपन वेदर मैप एपीआई के साथ उदाहरण

यहां OpenWeatherMap के लिए दस्तावेज़ दिए गए हैं: https://openweathermap.org/api/one-call-3

यहां एक सरल उदाहरण दिया गया है जिसमें दिखाया गया है कि यूआरएल ऑब्जेक्ट कैसे बनाएं और उसके हिस्सों में हेरफेर कैसे करें:

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

सारांश

जावास्क्रिप्ट में यूआरएल ऑब्जेक्ट यूआरएल के साथ काम करने का एक संरचित तरीका प्रदान करता है, जिससे जटिल यूआरएल के आसान हेरफेर और निर्माण की अनुमति मिलती है। जबकि स्थिर यूआरएल के लिए टेम्प्लेट स्ट्रिंग सरल और प्रभावी हैं, यूआरएल ऑब्जेक्ट उन मामलों के लिए आदर्श हैं जहां यूआरएल गतिशील हैं या लगातार संशोधन की आवश्यकता होती है।

अनस्प्लैश पर ऐनी न्यागार्ड द्वारा फोटो