كيفية الحصول على معلمات URL في جافا سكريبت؟ شرح مفصل لأربعة طرق شائعة

كمطور للواجهة الأمامية، غالبًا ما نحتاج إلى تشغيل عناوين URL ومعالجتها. والأكثر شيوعًا هو الحصول على قيم المعلمات المحمولة في رابط URL. قد يجد الأصدقاء الذين يستخدمون تطوير إطار العمل هذا أمرًا بسيطًا للغاية، لأن إطار العمل يوفر لنا العديد من الطرق للحصول بسهولة على المعلمات التي يحملها رابط URL. لكن في بعض الأحيان لا يمكننا الاعتماد على إطار العمل ونحتاج إلى استخدام JS الأصلي للحصول على المعلمات، وهذا أيضًا سؤال غالبًا ما نواجهه في المقابلات. سنقوم اليوم بتمزيق الكود يدويًا واستخدام JS الأصلي للحصول على قيم معلمات رابط URL.

1. ملخص طرق الاكتساب

هناك عدة طرق للحصول على معلمات رابط URL باستخدام JS الأصلي، واليوم سنشرح الطرق الشائعة تباعًا:

• استخدام المطابقة العادية،

• باستخدام طريقة العلامة المضمنة،

• باستخدام طريقة التقسيم،

• باستخدام URLSearchParams. الطريقة

2. طريقة التنفيذ المحددة

2.1 طريقة المطابقة العادية

هذه طريقة قياسية للغاية. النقطة الأساسية هي أننا بحاجة إلى فهم التعبيرات العادية.

الكود كما يلي:

<script>
  // استخدم التعبير العادي Let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  // // إرجاع كائن المعلمة function queryURLParams(url) {
    Let Pattern = /(w+)=(w+)/ig; // تعريف التعبير العادي Let parames = {}; // تحديد كائن المعلمة url.replace(pattern, ($, $1, $2) => {
      المعلمات[$1] = $2;
    });
    معلمات الإرجاع؛
  }
  console.log(queryURLParams(url))
</script>

يركز الكود أعلاه على تعريف التعبيرات العادية واستخدام طريقة الاستبدال، ومن بينها

,

يمثل $1$ و$2 على التوالي الاسم=الفيل والاسم والفيل وما إلى ذلك. يمكنك تعلم ذلك بنفسك لاستخدام أكثر تفصيلاً للاستبدال مع التعبيرات العادية.

تأثير الإدراك:

2.2 نادرًا ما يستخدم الأشخاص طريقة استخدام العلامة هذه

، لأنها تحتوي في النهاية على القليل من معنى التكنولوجيا السوداء. يتمثل مبدأها بشكل أساسي في استخدام العلامة للحصول على بعض السمات المضمنة، مثل href و hash و search وغيرها من السمات.

الكود كما يلي:

<script>
  اسمحوا URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
  الاستعلام عن الوظيفةURLParams(url) {
    // 1. أنشئ علامة Let link = document.createElement('a');
    link.href = url;
    Let searchUrl = link.search.substr(1); // احصل على السلسلة بعد علامة الاستفهام Let hashUrl = link.hash.substr(1); // احصل على القيمة بعد # Let obj = {}; object/ / 2. قم بتخزين hashUrl في الكائن obj['HASH'] = hashUrl : null // # هل هناك قيمة خلف Let list = searchUrl.split("&");
    لـ (دع i = 0; i < list.length; i++) {
      Let arr = list[i].split("=");
      obj[arr[0]] = arr[1];
    }
    كائن الإرجاع؛
  }
  console.log(queryURLParams(URL))
</script>

في الكود أعلاه، يتم إنشاء علامة أولاً، ثم يمكن الحصول على كل جزء من عنوان url بناءً على سمات العلامة، وهذا في الواقع يشبه إلى حد ما قفزة التوجيه الخاصة بـ Vue للحصول على المعلمات.

تأثير الإدراك:

2.3 طريقة التقسيم

تستفيد هذه الطريقة من حقيقة أن التقسيم يمكن أن يقسم سلسلة إلى مصفوفة بناءً على حرف معين، ويقسم كل معلمة بذكاء.

الكود كما يلي:

<script>
  اسمحوا URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  الاستعلام عن الوظيفةURLParams(URL) {
    // const url = location.search; // في المشروع، يمكنك الحصول مباشرة على السلسلة بعد الحرف "؟" في عنوان url من خلال طريقة البحث Let url = URL.split("؟")[1];
    Let obj = {}; // قم بتعريف كائن المعلمة Let arr = url.split("&"); // مقسم إلى مصفوفة باستخدام علامة الضم for (let i = 0; i < arr.length; i++) {
      Let arrNew = arr[i].split("=");
    }
    كائن الإرجاع؛
  }
  console.log(queryURLParams(URL))
</script>

إذا تم استخدام رمز التحميل في مشروع فعلي، فيمكنك استخدام location.search مباشرة للحصول على السلسلة بعد "؟". ولتسهيل العرض التوضيحي، يتم استخدام التقسيم لتقسيم ما يلي.

تأثير الإدراك:

2.4 طريقة URLSearchParams

تتيح لنا طريقة URLSearchParams الحصول على معلمات URL بشكل مريح للغاية، ولكن هناك مشكلات معينة في التوافق يشرحها الموقع الرسمي على النحو التالي:

تحدد واجهة URLSearchParams بعض الطرق العملية لمعالجة سلاسل استعلام URL.

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

الكود كما يلي:

<script>
  اسمحوا URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  الاستعلام عن الوظيفةURLParams(URL) {
    Let url = URL.split("؟")[1];
    const urlSearchParams = new URLSearchParams(url);
    const params = Object.fromEntries(urlSearchParams.entries());
    معلمات العودة
  }
  console.log(queryURLParams(URL))
</script>

نستخدم هنا سطرين فقط من التعليمات البرمجية الرئيسية لتنفيذ تحليل المعلمات. تجدر الإشارة إلى أن urlSearchParams.entries() يُرجع مُكرِّر بروتوكول التكرار، لذلك نحتاج إلى استخدام طريقة Object.fromEntries() لتحويل قائمة أزواج القيمة الرئيسية إلى كائن.

فيما يتعلق ببروتوكول التكرار، يمكنك الرجوع إلى الموقع الرسمي:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols

لتحقيق التأثير:

التوافق:

يمكنك أن ترى أن واجهتنا غير متوافقة مع IE، مصدر كل الشرور.

ملخص:

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

[دروس الفيديو ذات الصلة الموصى بها: الواجهة الأمامية للويب]

ما ورد أعلاه هو كيفية الحصول على معلمات URL في JavaScript؟ للحصول على شرح تفصيلي للطرق الأربعة الشائعة، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني لمزيد من المعلومات!