ماهي encodeURIComponent

إن ال encodeURIComponent هي دالة في JavaScript ونستخدمها لترميز أى تشفير جزء من عنوان URL .

ووظيفتها الأساسية هي التأكد من أن القيم التي يتم إدخالها في عنوان URL لا تحتوي على رموز قد تجعل الرابط يتم كتابته بشكل خاطئ.

فمثلا عند إرسال بيانات عبر URL هناك رموز معينة لها حالات خاصة، مثل:

• & يفصل بين المعاملات.
• = يفصل بين الاسم والقيمة
• #, /, ? إلخ.

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

const param = "name=mohamed&age=25";

console.log(encodeURI(param));
// name=mohamed&age=25   
// لم يتم ترميز ال = أو &

console.log(encodeURIComponent(param));
// name%3Dmohamed%26age%3D25  
// هنا تم تريز كل الرموز الخاصة

إذا نستخدم encodeURIComponent عندما نريد ترميز قيم فردية داخل رابط مثل اسم مستخدم أو كلمة بحث.

ونستخدم encodeURI فقط إذا كنا نريد ترميز الرابط بالكامل وتريد الحفاظ على علامات مثل ? و &.

وإليك التالي لمزيد من التفاصيل :

الفكرة أنّ الروابط  لها قواعد صارمة، وبعض الأحرف لها معنى خاص في الروابط، وتسمى الأحرف المحجوزة، ومنها:

• & : للفصل بين متغيرات متعددة في الرابط name=ali&city=riyadh?
• ? : لبدء جزء الاستعلام  في الرابط.
• / : للفصل بين أجزاء المسار.
• # : للإشارة إلى جزء معين  في الصفحة.
•  (المسافة): غير مسموح بها في الروابط.
• +, :, @ وغيرها الكثير

ستحدث مشكلة لو أردت إرسال نص يحتوي على أحد تلك الأحرف كقيمة في رابط كالتالي:

https://test.com/search?q=C++ & Java

المتصفح أو الخادم سيفسر  الرابط بشكل خاطئ، وسيعتقد أن المتغير q قيمته C++  وأن Java هو متغير آخر بدون اسم، لأن حرف & يفصل بين المتغيرات.

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

فنفس الرابط السابق سيبدوا كالتالي بعد الترميز:

https://test.com/search?q=C%2B%2B%20%26%20Java

وعندما يستقبل الخادم الرابط، سيعرف كيف يفك ترميز القيمة C%2B%2B%20%26%20Java ليعيدها إلى شكلها الأصلي C++ & Java، وبذلك يتم البحث بشكل صحيح.