مثال على تشفير عنوان URL لجافا سكريبت - كيفية استخدام encodeURIcomponent () و encodeURI ()

قد تعتقد أن encodeURIو encodeURIComponentتفعل الشيء نفسه، على الأقل من أسمائهم. وقد يتم الخلط بينك وبين أيهما تستخدم ومتى.

في هذه المقالة ، سأزيل الغموض عن الفرق بين encodeURIو encodeURIComponent.

ما هو URI وكيف يختلف عن URL؟

URI لتقف على Uniform Resource Identifier.

يرمز URL إلى Uniform Resource Locator.

أي شيء يعرّف موردًا بشكل فريد هو URI الخاص به ، مثل المعرف أو الاسم أو رقم ISBN. يحدد عنوان URL موردًا وكيف يمكن الوصول إليه (البروتوكول). جميع عناوين URL هي عناوين URL ، ولكن ليست كل عناوين URL هي عناوين URL.

لماذا نحتاج إلى التشفير؟

يمكن أن تحتوي عناوين URL على أحرف معينة فقط من مجموعة ASCII القياسية البالغ عددها 128 حرفًا. يجب تشفير الأحرف المحجوزة التي لا تنتمي إلى هذه المجموعة.

هذا يعني أننا بحاجة إلى تشفير هذه الأحرف عند التمرير إلى عنوان URL. أحرف خاصة مثل &، space، !عندما دخلت في حاجة رابط إلى أن نجا، وإلا فإنها قد تتسبب في حالات لا يمكن التنبؤ بها.

استخدم حالات:

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

ما هو الفرق بين encodeURI و encodeURIComponent؟

encodeURIو encodeURIComponentتستخدم لترميز موحد معرفات الموارد (محددات) من خلال استبدال بعض الأحرف من جانب واحد، اثنان، ثلاثة أو أربعة أحرف تمثل الترميز UTF-8 من الحرف.

encodeURIComponentيجب استخدامها لتشفير مكون URI - سلسلة من المفترض أن تكون جزءًا من عنوان URL.

encodeURIيجب استخدامها لتشفير URI أو عنوان URL موجود.

فيما يلي جدول مفيد يوضح الاختلاف في تشفير الأحرف

ما هي الأحرف المشفرة؟

encodeURI() لن ترميز: [email protected]#$&*()=:/,;?+'

encodeURIComponent() لن ترميز: ~!*()'

A-Z a-z 0-9 - _ . ! ~ * ' ( )لم يهرب الشخصيات .

أمثلة

const url = '//www.twitter.com' console.log(encodeURI(url)) ////www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) ////www.twitter.com%3Fq%3Dsearch 

متى يتم ترميز ملفات

  1. عند قبول إدخال قد يحتوي على مسافات.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html 
  2. عند إنشاء عنوان URL من معلمات سلسلة الاستعلام.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99 
  3. عند قبول معلمات الاستعلام التي قد تحتوي على أحرف محجوزة.

 let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple 

ملخص

إذا كان لديك عنوان URL كامل ، فاستخدم encodeURI. ولكن إذا كان لديك جزء من عنوان URL ، فاستخدم encodeURIComponent.

هل أنت مهتم بمزيد من البرامج التعليمية و JSBytes مني؟ اشترك في رسالتي الإخبارية. أو تابعوني على Twitter