از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
مقادیر رشته پرس و جو را در جاوا اسکریپت دریافت کنید در URL، مقادیر رشته پرس و جو اغلب اطلاعاتی در مورد درخواست ارائه می دهند، مانند پارامترهای جستجو یا شناسه شی مورد استفاده شما. اگر هر یک از منطق کسب و کار یا درخواست در قسمت جلویی مدیریت می شود، مهم است که بدانید چگونه مقادیر رشته پرس و جو را از…
سرفصلهای مطلب
در یک URL، مقادیر رشته پرس و جو اغلب اطلاعاتی را در مورد درخواست ارائه می دهند، مانند پارامترهای جستجو یا شناسه شی مورد استفاده شما. اگر هر یک از منطق کسب و کار یا درخواست در قسمت جلویی مدیریت می شود، مهم است که بدانید چگونه مقادیر رشته پرس و جو را از URL بازیابی کنید. راه های مختلفی برای رسیدن به این هدف وجود دارد که در اینجا به تعدادی از آنها خواهیم پرداخت.
URLSearchParams
را URLSearchParams رابط توسط تمام نسخه های مرورگر اصلی به جز IE 11 پشتیبانی می شود. این رابط با تجزیه رشته پرس و جو یک URL و ارائه راهی برای دسترسی به مقادیر کار می کند. مثلا:
let params = new URLSearchParams('q=node&page=2');
params.get('q'); // 'node'
params.get('page'); // '2'
یکی از معایب این رابط این است که شما باید آن را فقط رشته کوئری یک URL ارسال کنید. اگر با URL مرورگر فعلی کار می‌کنید، انجام این کار آسان است زیرا می‌توانید آن را پاس کنید window.location.search. اگر با هر URL دیگری کار می کنید، باید رشته پرس و جو را به طور جداگانه تجزیه و ارسال کنید.
برای تجزیه پارامترهای پرس و جو در یک شی، از استفاده کنید URL.searchParams‘s .entries() متد، که an Iterator جفت کلید/مقدار، و Object.fromEntries برای تبدیل آن به یک شی
let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries); // {q: 'node', page: '2'}
شی URL
را URL API همچنین توسط تمام نسخه های مرورگر اصلی به جز IE 11 پشتیبانی می شود. این روش انعطاف پذیرتری برای تجزیه URL ها ارائه می دهد و همچنین راهی برای دسترسی به مقادیر رشته پرس و جو ارائه می دهد. مثلا:
const url = new URL('https://rasanegar.com/search؟q=node&page=2');
const searchParams = url.searchParams;
searchParams.get('q'); // 'node'
searchParams.get('page'); // '2'
url.searchParams همان نوع شیء نمونه ای است که توسط URLSearchParams.
را url شیء بالا همچنین دارای تمام قسمت های URL به قسمت های خود است. مثلا:
url.href; // 'https://rasanegar.com/search؟q=node&page=2'
url.origin; // 'https://rasanegar.com'
url.protocol; // 'https:'
url.host; // 'rasanegar.com'
url.hostname; // 'rasanegar.com'
url.port; // ''
url.pathname; // '/search'
url.search; // '?q=node&page=2'
url.hash; // ''
جاوا اسکریپت خالص
اگر به هر دلیلی قادر به دسترسی به API های بالا نیستید یا می خواهید کنترل بیشتری بر تجزیه داشته باشید، می توانید از کد زیر برای تجزیه رشته query به یک شی استفاده کنید.
function getQueryParams(url) {
const paramArr = url.slice(url.indexOf('?') + 1).split('&');
const params = {};
paramArr.map(param => {
const (key, val) = param.split('=');
params(key) = decodeURIComponent(val);
})
return params;
}
توجه داشته باشید: روش های زیادی برای تجزیه پارامترهای پرس و جو در JS ساده وجود دارد که برخی از آنها پیچیده تر (و قوی تر) هستند. این فقط یک راه است و از آن اقتباس شده است این اصل.
سپس می توانیم از این تابع JS ساده برای تجزیه یک پارامتر پرس و جو به یک رشته استفاده کنیم:
getQueryParams('https://rasanegar.com/search؟q=node&page=2')
// { q: 'node', page: '2' }
منتشر شده در 1403-01-06 16:24:03
