مقادیر رشته Query را در جاوا اسکریپت دریافت کنید

تمبر زمان: 21 ژوئیه 2022، 12:22 صبح

در یک URL، مقادیر رشته پرس و جو اغلب اطلاعاتی را در مورد درخواست ارائه می دهند، مانند پارامترهای جستجو یا شناسه شی مورد استفاده شما. اگر هر یک از منطق کسب و کار یا درخواست در قسمت جلویی مدیریت می شود، مهم است که بدانید چگونه مقادیر رشته پرس و جو را از URL بازیابی کنید. راه های مختلفی برای رسیدن به این هدف وجود دارد که در اینجا به تعدادی از آنها خواهیم پرداخت.

URLSearchParams

La URLSearchParams رابط توسط تمام نسخه های مرورگر اصلی به جز IE 11 پشتیبانی می شود. این رابط با تجزیه رشته پرس و جو یک URL و ارائه راهی برای دسترسی به مقادیر کار می کند. مثلا:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page');

یکی از معایب این رابط این است که شما باید آن را فقط رشته کوئری یک 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);

شی URL

La URL API همچنین توسط تمام نسخه‌های مرورگر اصلی به جز IE 11 پشتیبانی می‌شود. راه انعطاف‌پذیرتری برای تجزیه URL‌ها ارائه می‌دهد، و همچنین راهی برای دسترسی به مقادیر رشته پرس و جو فراهم می‌کند. مثلا:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page');

url.searchParams همان نوع شیء نمونه ای است که توسط URLSearchParams.

La url شیء بالا همچنین دارای تمام قسمت های URL به قسمت های خود است. مثلا:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash;

جاوا اسکریپت خالص

اگر به هر دلیلی قادر به دسترسی به API های بالا نیستید یا می خواهید کنترل بیشتری بر تجزیه داشته باشید، می توانید از کد زیر برای تجزیه رشته کوئری به یک شی استفاده کنید.

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://stackabuse.com/search?q=node&page=2')

تمبر زمان:

بیشتر از Stackabuse