انتقل إلى محتوى الدرس

Parsing Query Strings URLSearchParams تحليل البحث بـ URLSearchParams

أتقن التعامل مع كائن الرابط window.location في JavaScript: فكك أجزاء العنوان وحلل الاستعلامات عبر URLSearchParams وقارن بين assign وreplace واحمِ تطبيقك من التوجيه المفتوح.
3 صفوف تعليمية
جافا سكريبت
4,307 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تجنب تقسيم نص location.search يدوياً عبر split("&")؛ فالتقسيم اليدوي يفشل مع المسافات المرمّزة (%20 أو +) وكلمات البحث العربية وتكرار المفاتيح. بدلاً من ذلك، مرر النص مباشرةً إلى الباني القياسي new URLSearchParams(window.location.search):

  • params.get("q"): تقرأ القيمة وتفك ترميزها تلقائياً (أو تُرجع null عند غيابها).
  • params.has("featured"): تتحقق منطقياً من وجود المعامل في الرابط.
  • params.set("page", "2") مع params.toString(): تبني نص استعلام مرمّز ونظيف بأمان تام.
الصف 2 كود برمجي
JavaScript
const sampleQuery = '?topic=bom+location&page=3&lang=ar';
const params = new URLSearchParams(sampleQuery);
params.set('page', '4');
document.getElementById('qp-out').textContent =
  'topic: ' + params.get('topic') + '\n' +
  'has lang: ' + params.has('lang') + '\n' +
  'next query: ?' + params.toString();
الصف 3 ملاحظة هامة