احصل على قيم سلسلة الاستعلام في JavaScript

في عنوان URL ، غالبًا ما توفر قيم سلسلة الاستعلام معلومات حول الطلب ، مثل معلمات البحث أو معرف الكائن الذي تستخدمه. إذا تم التعامل مع أي من منطق الأعمال أو الطلب في الواجهة الأمامية ، فمن المهم معرفة كيفية استرداد قيم سلسلة الاستعلام من عنوان URL. هناك عدد من الطرق لتحقيق ذلك ، سنرى القليل منها هنا.

URLSearchParams

• 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الصورة .entries() الطريقة التي تُرجع ملف Iterator من أزواج المفاتيح / القيمة ، و Object.fromEntries لتحويله إلى كائن.

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries); 

كائن URL

• 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.

• url الكائن أعلاه يحتوي أيضًا على جميع أجزاء عنوان URL مقسمة إلى أجزائه. فمثلا:

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

نقي جافا سكريبت

إذا لم تتمكن لأي سبب من الوصول إلى واجهات برمجة التطبيقات المذكورة أعلاه أو كنت ترغب في الحصول على مزيد من التحكم في التحليل ، فيمكنك استخدام الكود التالي لتحليل سلسلة الاستعلام في كائن.

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')