عرض مصدر JavaScript/Template Literals

<noinclude>{{DISPLAYTITLE:قالب النص الحديث في JavaScript}}</noinclude>
قالب النص (Template Literals) هو قالب يحوي السلاسل النصية بالإضافة إلى السماح بكتابة تعبيرات برمجية ضمنه. يمكنك استخدام سلاسل نصيَّة متعدِّدة الأسطر مع ميزات استيفاء السلاسل؛ وكان يسمى "سلاسل القوالب" (template strings) في الإصدارات السابقة من مواصفات ES2015.

== الصياغة ==
<syntaxhighlight lang="javascript">
`string text`
`string text line 1
 string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`

</syntaxhighlight>

== الوصف ==
يتم إحاطة قالب النص علامة اقتباس مائلة (<code>``</code>) بدلاً من علامات اقتباس مزدوجة أو مفردة، ويمكن أن تحتوي على عناصر نائبة (placeholders). يشار إلى هذه العناصر النائبة بواسطة علامة الدولار وأقواس معقوصة بالشكل <code>‎${expression}‎</code>. يتم تمرير التعابير الموجودة في العناصر النائبة والنص الموجود بين علامتي الاقتباس المائلتين (<code>``</code>) إلى دالة. تقوم هذه الدالة الافتراضية فقط بترتيب الأجزاء في سلسلة واحدة إذا كان هناك تعبير يسبق قالب النص (وهو الوسم <code>tag</code>هنا)، فإن هذا يسمى "القالب الموسوم". في هذه الحالة، يتم استدعاء تعبير الوسم (عادةً ما يكون دالة) باستخدام قالب النص والذي يمكنك معالجته قبل الإخراج،  للهروب من الفاصلة العليا المائلة في قالب حرفي ضع شرطة مائلة للخلف <code>\</code> قبل الفاصلة العليا المائلة.<syntaxhighlight lang="javascript">
`\`` === '`' // --> true
</syntaxhighlight>

=== نصوص متعددة الأسطر ===
محارف السطر الجديد التي تضاف إلى المصدر هي جزء من قالب النص. يجب عليك استخدام الصيغة التالية في قالب النص التقليدي (الذي يستعمل الإشارة <code>'</code>) من أجل الحصول على نصوص متعددة الأسطر:<syntaxhighlight lang="javascript">
console.log (line text string 1 \ n '+
'Line 2 string text');
// "The text line of string 1
// String line text 2

</syntaxhighlight>للحصول على نفس التأثير باستخدام قوالب النصوص الحديثة، يمكنك الآن كتابتها كتابةً طبيعيةً بالشكل التالي:<syntaxhighlight lang="javascript">
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

</syntaxhighlight>

=== تضمين التعابير ===
لتضمين التعابير ضمن سلسلة نصية، يمكنك استخدام الصيغة التالية:<syntaxhighlight lang="javascript">
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."A

</syntaxhighlight>الآن، باستخدام القوالب تلك، يمكنك استخدام التجميل اللغوي لعمل استبدالات مثل هذا المثال الذي أصبح سهل القراءة:<syntaxhighlight lang="javascript">
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

</syntaxhighlight>

=== القوالب المتداخلة ===
في بعض الحالات، يعد تداخل القالب الطريقة الأسهل وربما الطريقة الأفضل للحصول على سلاسل نصية قابلة للتكوين. يمكن ببساطة استخدام قالب داخل قالب آخر باستخدام عنصر نائب <code>‎${}‎</code>. على سبيل المثال، إذا كانت حالة (شرط) ما صحيحة: فقم بإرجاع هذا القالب النصي. 
* في ES5:
<syntaxhighlight lang="javascript">
var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

</syntaxhighlight>
* في ES2015 مع عدم تداخل في القوالب:
<syntaxhighlight lang="javascript">
const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

</syntaxhighlight>
* في ES2015 تداخل في القوالب:
<syntaxhighlight lang="javascript">
const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

</syntaxhighlight>

=== القوالب الموسومة (tagged templates) ===
القوالب الموسومة (tagged templates) هي شكل أكثر تقدمًا من القوالب النصية، إذ تتيح لك هذه الوسوم تحليل القالب مع دالة. يحتوي الوسيط الأول من دالة الوسم على مصفوفة من القيم النصية. ترتبط الوسائط المتبقية بالتعابير؛ في النهاية، يمكن أن ترجع دالتك السلسلة النصية المعالجة (أو يمكنها إرجاع شيء مختلف تمامًا كما هو موضح في المثال التالي). يمكن أن يكون اسم الدالة المستخدمة للوسم أي اسم تريده.<syntaxhighlight lang="javascript">
var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "That "
  var str1 = strings[1]; // " is a "

  // تقنيًا، يوجد سلسلة نصية بعد
  // (التعبير الأخير (في مثالنا
  // ولكنها فارغة ("")، لذا أهملها
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  // حتى أننا نستطيع إعادة سلسلة نصية مبنية باستعمال قالب نصي
  return `${str0}${personExp}${str1}${ageStr}`;
}

var output = myTag`That ${ person } is a ${ age }`;

console.log(output);
// That Mike is a youngster

</syntaxhighlight>الدوال <code>tag</code> لا تحتاج لارجاع سلسلة نصية كما هو موضح في المثال التالي:<syntaxhighlight lang="javascript">
function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!"
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

</syntaxhighlight>

=== السلاسل النصية الخام (Raw strings) ===
الخاصية <code>raw</code> المتاحة في الجزئية الأولى للدالة <code>tag</code>، تتيح لك الوصول إلى السلاسل النصية الخام عند إدخالها دون معالجة سلاسل الهروب (escape sequences).<syntaxhighlight lang="javascript">
function tag(strings) {
  console.log(strings.raw[0]);
}

tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'

</syntaxhighlight>بالإضافة إلى ذلك، يوجد التابع <code>String.raw()‎</code> لإنشاء السلاسل النصية الخام raw، تمامًا مثل دالة القالب الافتراضية ستقوم بإنشاء سلسلة نصية.<syntaxhighlight lang="javascript">
var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

str.length;
// 6

str.split('').join(',');
// "H,i,\,n,5,!"

</syntaxhighlight>

=== القوالب الموسومة والسلاسل المُهرَّبة ===

==== سلوك ES2016 ====
بدءًا من ECMAScript 2016، تتوافق القوالب الموسومة (tagged templates) مع قواعد السلاسل المُهرَّبة التالية:
* لتهريب المحارف المرمزة بترميز يونيكود، يجب البدء بـ "‎\u" مثل <code>‎\u00A9</code>.
* لتهريب رقم محرف يونيكود (Unicode code point)، يُستعمَل "‎\u{}‎" مثل <code>‎\u{2F804}‎</code> 
* لتهريب محارف مرمزة بالترميز الست عشري، يجب البدء بـ "‎\x"، مثل <code>‎\xA9</code>
* لتهريب محارف مرمزة بالترميز الثماني، يجب البدء بـ "0o\" يتبعها رقم واحد أو أكثر مثل <code>‎\0o251</code>
هذا يعني ان القالب الموسوم كالذي في المثال التالي يحوي مشكلة، لأنه وفقًا لقواعد ECMAScript، يبحث المُحلل عن ترميز سلسلة محارف يونيكود صالحة لتهريبها وفقاً للقواعد السابقة، لكنه يجد صيغة مشوهة.<syntaxhighlight lang="javascript">
latex`\unicode`
// Throws in older ECMAScript versions (ES2016 and earlier)
// SyntaxError: malformed Unicode character escape sequence
ES2018 revision of illegal escape sequences

</syntaxhighlight>

==== مراجعة ES2018  لسلاسل تهريب غير مسموح بها ====
يجب أن تسمح القوالب الموسومة بتضمين لغات مثل (DSLs أو LaTeX)، حيث تكون سلاسل التهريب الآخرى معروفة؛ يزيل مقترح ECMAScript  الذي يخص [https://tc39.github.io/proposal-template-literal-revision/ Template Literal Revision] صيغة تقييد سلاسل التهريب في ECMAScript من القوالب الموسومة (المرحلة 4، لتكون متكاملة مع معيار ECMAScript 2018).

مع ذلك، سلاسل التهريب غير الصحيحة (illegal escape sequences) لا تزال موجودة في التمثيل المسمى "cooked". ستظهر هذه السلاسل كعنصر <code>undefined</code> (غير معرف) في المصفوفة "cooked" كالتالي:<syntaxhighlight lang="javascript">
function latex(str) { 
 return { "cooked": str[0], "raw": str.raw[0] }
} 

latex`\unicode`

// { cooked: undefined, raw: "\\unicode" }

</syntaxhighlight>لاحظ أن قيد سلسلة التهريب يتم إسقاطه فقط من القوالب الموسومة، وليس من القوالب غير الموسومة:<syntaxhighlight lang="javascript">
let bad = `bad escape sequence: \unicode`;

</syntaxhighlight>

== مصادر ومواصفات ==
* معيار [https://www.ecma-international.org/ecma-262/6.0/#sec-template-literals ECMAScript 2015 (6th Edition, ECMA-262)]‎: التعريف الأولي. عُرِّف في عدة أقسام من هذه المواصفة: القوالب الموسومة، قالب نصي
* مسودة [https://tc39.github.io/ecma262/#sec-template-literals ECMAScript Latest Draft (ECMA-262)]‎: عُرِّف في عدة أقسام من هذه الخصائص: القوالب الموسومة، قالب النص
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals صفحة Template literals (Template strings)‎ في توثيق MDN الرسمي].