تشفير URL في JavaScript: 3 طرق ستنقذ موقعك

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

```html

مقدمة: لماذا ترميز URL ليس نظرية مملة، بل إنقاذ لتطبيقك

تخيل موقفًا: أنت تكتب تطبيق ويب بلغة JavaScript، المستخدم يدخل استعلام بحث "JavaScript & Node.js: أفضل الممارسات". أنت تمرر هذا النص في URL كمعامل لطلب GET. تفتح وحدة تحكم المتصفح - وتجد خطأ. أو الأسوأ من ذلك - يذهب الطلب، لكن الخادم لا يفهمه، وبدلاً من نتائج البحث يرى المستخدم صفحة فارغة.

مألوف؟ إذا كان الأمر كذلك، فهذه المقالة لك. إذا لم يكن كذلك، فهي لا تزال لك، لأنك عاجلاً أم آجلاً ستواجه هذا. موضوع ترميز URL في JavaScript هو أحد أكثر الأسئلة شيوعًا على Stack Overflow (عشرات الآلاف من المشاهدات)، وليس بدون سبب. إنها التفاصيل الصغيرة التي تميز المطور المحترف عن المبتدئ.

اليوم سنناقش ثلاث طرق لترميز URL في JavaScript، ونتعلم كيفية اختيار الأداة المناسبة لكل مهمة، ونلقي نظرة على أمثلة حقيقية من حياة مطور الويب. هيا بنا!

ما هو ترميز URL ولماذا هو مطلوب

قبل كتابة الكود، دعنا نفهم النظرية. URL (محدد الموارد الموحد) له بنية صارمة. يُسمح فيه فقط بأحرف معينة: الحروف اللاتينية والأرقام وبعض الرموز الخاصة (-, _, ., ~). لكن المسافات والسيريلية والرموز & و ? و # وغيرها - محظورة.

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

الحل - ترميز URL (الترميز المئوي). يتم استبدال الرموز المحظورة بتسلسل من النوع %XX، حيث XX هو الرمز السداسي عشري للحرف بترميز UTF-8. على سبيل المثال، تصبح المسافة %20، والحرف السيريلي "а" يصبح %D0%B0.

في JavaScript، هناك ثلاث آليات مدمجة لهذا الغرض. دعنا نناقش كل واحدة.

الطريقة 1: `encodeURI()` - لعناوين URL الكاملة

الدالة encodeURI() مخصصة لترميز URL كامل. تستبدل جميع الرموز باستثناء تلك التي تشكل جزءًا من بناء جملة URI: : و / و ? و # و & و = وغيرها.

الصيغة

encodeURI(uri)

مثال

const url = "https://pythonlib.ru/search?q=JavaScript & Node.js";
const encoded = encodeURI(url);
console.log(encoded);
// النتيجة: "https://pythonlib.ru/search?q=JavaScript%20&%20Node.js"

لاحظ: encodeURI() قامت بترميز المسافات، لكنها لم تلمس الرموز & و ? و =. هذا صحيح بالنسبة لعنوان URL كامل، لكنه خطير بالنسبة للمعاملات. إذا كان في استعلامنا رمز & داخل قيمة المعامل، لكان بقي كما هو وكسر سلسلة الاستعلام.

متى تستخدم

عند الحاجة لترميز عنوان URL بالكامل (على سبيل المثال، لتمريره إلى window.location)
عندما لا يحتوي URL على بيانات مستخدم برموز يحتمل أن تكون خطرة

متى لا تستخدم

لترميز معاملات استعلام فردية
إذا كان في URL إدخال مستخدم (نماذج، بحث، تعليقات)

الطريقة 2: `encodeURIComponent()` - للمعاملات والقيم

هذه هي أداتك الرئيسية للاستخدام اليومي. encodeURIComponent() تقوم بترميز جميع الرموز باستثناء الحروف والأرقام و - و _ و . و ~. ستقوم بترميز حتى الرموز التي تشكل جزءًا من بناء جملة URI - & و ? و = و # وهكذا.

```