استخراج بارامترات URL في JavaScript: تحليل متعمق

بارامترات URL في JavaScript: من البسيط إلى المتقدم

كل مطور واجه مرة واحدة على الأقل تحدي استخراج البيانات من شريط عنوان المتصفح. تفتح صفحة وترى شيئًا مثل /products?id=42&category=books — وتدرك أن بداخل هذه الرموز بيانات مهمة مخفية. كيف تستخرجها؟ سؤال حصد آلاف الأصوات على Stack Overflow: "How can I get query string values in JavaScript?". اليوم لن نقدم إجابة جاهزة فقط — بل سنتعمق في آلية العمل ونحلل كيفية تحليل URL في JavaScript على جميع المستويات.

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

ما هي query string وكيف تراها في المتصفح

لنبدأ بتوضيح المصطلحات. Query string (سلسلة الاستعلام) هي جزء من URL يبدأ بعد علامة الاستفهام. مثلًا، في الرابط:

https://example.com/search?q=javascript&lang=ar&page=1

كل ما بعد ? هو query string. تتكون من أزواج مفتاح=قيمة مفصولة بعلامة &. يمكن أن يتكرر المفتاح عدة مرات — وهذا مهم للتذكر.

للحصول على هذه السلسلة في JavaScript، استخدم الخاصية:

const queryString = window.location.search;\nconsole.log(queryString); // "?q=javascript&lang=ar&page=1"

لاحظ: الخاصية تُرجع السلسلة مع علامة الاستفهام. هذه هي نقطة البداية لكل العمليات اللاحقة.

الطريقة الأولى: URLSearchParams — حديثة وبسيطة

إذا كنت تكتب كودًا للمتصفحات الحديثة (وهي 99% من الحالات)، استخدم واجهة API المدمجة URLSearchParams. ظهرت في 2016 وأصبحت المعيار الفعلي للتعامل مع بارامترات URL. لنرَ كيف تعمل:

// الحصول على سلسلة الاستعلام\nconst queryString = window.location.search;\n\n// إنشاء كائن URLSearchParams\nconst params = new URLSearchParams(queryString);\n\n// الحصول على القيمة باستخدام المفتاح\nconst q = params.get('q');       // "javascript"\nconst lang = params.get('lang'); // "ar"\nconst page = params.get('page'); // "1"\n\n// التحقق من وجود المفتاح\nconsole.log(params.has('lang')); // true\n\n// الحصول على جميع القيم إذا تكرر المفتاح\nparams.append('q', 'python');\nconsole.log(params.getAll('q')); // ["javascript", "python"]\n\n// التكرار على جميع البارامترات\nfor (const [key, value] of params) {\n    console.log(`${key}: ${value}`);\n}\n// الناتج:\n// q: javascript\n// lang: ar\n// page: 1\n// q: python

داخل الكود، URLSearchParams يقوم تلقائيًا بفك تشفير الرموز المشفرة (مثل تحويل %20 إلى مسافة) ويعالج الحالات المعقدة مثل المفاتيح المتكررة. هذا ليس فقط مريحًا — بل آمن أيضًا.

كيف يعمل هذا تحت الغطاء؟

عند إنشاء new URLSearchParams(queryString)، يقوم محرك JavaScript بالخطوات التالية:

\n
• إزالة علامة الاستفهام الأولى (إذا كانت موجودة).
\n
• تقسيم السلسلة باستخدام & للحصول على مصفوفة من الأزواج.
\n
• تقسيم كل زوج عند أول = إلى مفتاح وقيمة.
\n
• فك تشفير مكونات URI — استبدال %20 بمسافة، %23 بـ #، وهكذا.
\n
• تخزين كل شيء في هيكل حيث كل مفتاح يقابل مصفوفة من القيم (حتى لو كانت واحدة).
\n

هذه العملية قابلة للعكس تمامًا. يمكنك تعديل البارامترات