عرض مصدر JavaScript/encodeURIComponent

<noinclude>{{DISPLAYTITLE:<code>encodeURIComponent()‎</code>}}</noinclude>
الدالة <code>encodeURIComponent()‎</code> تُرمِّز مكوِّن من مكونات روابط URI (اختصار للعبارة Uniform Resource Identifier) بتبديل كل نسخة من محارف معيّنة بعبارة مُهرَّبة (escape sequences) أو أكثر والتي تُمثِّل ترميز UTF-8 للمحرف المعني.
==البنية العامة==
<syntaxhighlight lang="javascript">
encodeURIComponent(str);

</syntaxhighlight>

=== <code>str</code> ===
سلسلة نصية تُمثِّل مكوِّنًا من مكوِّنات رابط URI.

=== القيمة المعادة ===
سلسلة نصية تُمثِّل النسخة المُرمَّزة من مكوِّن رابط URI.

== الوصف ==
الدالة <code>encodeURIComponent</code> تُهرِّب (escape) جميع المحارف ما عدا: <syntaxhighlight lang="javascript">
A-Z a-z 0-9 - _ . ! ~ * ' ( )
</syntaxhighlight>تختلف الدالة <code>encodeURIComponent</code> عن الدالة <code>[[JavaScript/encodeURI|encodeURI]]</code> كما هو موضَّح في المثال الآتي، لاحظ أنَّ الاختلاف الرئيسي بينهما هو في ترميز المحارف المحجوزة (reserved characters) ورمز <code>#</code>: <syntaxhighlight lang="javascript">
var set1 = ";,/?:@&=+$#";  // محارف محجوزة
var set2 = "-_.!~*'()";    // علامات غير محجوزة
var set3 = "#";            // رمز المربع
var set3 = "ABC abc 123";  // أحرف وأرقام وفراغات

console.log(encodeURI(set1)); // ;,/?:@&=+$#
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (لاحظ كيف رُمِّزَ الفراغ)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (لاحظ كيف رُمِّزَ الفراغ)
</syntaxhighlight>استخدم الدالة <code>encodeURIComponent</code> على الحقول التي أدخلها المستخدم من النماذج التي ستُرسَل بطريقة POST إلى الخادم، وهذا سيؤدي إلى ترميز المحرف <code>&</code> الذي قد يولَّد تلقائيًا أثناء عملية تحويل رموز HTML أو غيرها.

فمثلًا، إذا كتب المستخدم السلسلة النصية "<code>Jack & Jill</code>" فستُرمَّز السلسلة النصية إلى "<code>Jack &amp;amp; Jill</code>"، ودون استخدام الدالة <code>encodeURIComponent</code> فسيُفسَّر رمز <code>&</code> من الخادم على أنه بداية حقلٌ جديدٌ من حقول النموذج، مما يؤدي إلى أخطاء في معالجة النموذج.

عند استخدام نوع MIME الآتي <code>[http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm application/x-www-form-urlencoded]</code>، فسيوضع الرمز <code>+</code> بدلًا من الفراغات، لذا يمكننا استخدام الدالة <code>encodeURIComponent</code> لترميز <code>+</code> إلى ‎<code>%20</code>.

إذا أردنا اتباع تعليمات [http://tools.ietf.org/html/rfc3986 RFC3986] (التي تحجز المحارف <code>!</code> و <code>'</code> و <code>)</code> و <code>(</code> و <code>*</code>، على الرغم من أنَّ هذه المحارف ليس لها استخدام خاص في روابط URI)، فيمكننا استخدام الدالة الآتية:<syntaxhighlight lang="javascript">
function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|نعم
|نعم
|نعم
|نعم
|نعم
|}

== مصادر ومواصفات ==
* مسودة المعيار [https://tc39.github.io/ecma262/#sec-encodeuricomponent-uricomponent ECMAScript Latest Draft].
* معيار [http://www.ecma-international.org/ecma-262/6.0/#sec-encodeuricomponent-uricomponent ECMAScript 2015 (6th Edition)]‎.
* معيار [http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.3.4 ECMAScript 5.1].
* معيار [http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf ECMAScript 3rd Edition] . 
[[تصنيف:JavaScript]]