سلاسل قالب ذات علامات مطبعية

الأساسيات: سلاسل القوالب

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

سلاسل القوالب هي نوع خاص من رموز السلسلة التي يمكن أن تحتوي على تعبيرات جافا سكريبت تمتد عبر أسطر متعددة. يستخدمون أحرف backtick بدلاً من علامات الاقتباس المزدوجة ، كما هو الحال بالنسبة للسلاسل الشائعة.

فيما يتعلق بامتداد الأحرف عبر أسطر متعددة ، يجب أن تحتوي السلسلة الشائعة على شرطة مائلة للخلف مع الحرف "n" لإنشاء سطر جديد. باستخدام سلاسل القوالب ، يمكنك ببساطة إنشاء سطر جديد "مضمّن" ، إذا جاز التعبير.

// A common string as reference.
const string = "I'm just a string";

// A template string. For Typescript,
// this value is a plain 'string'-type.
const templateString = `I'm just a string as well`;

يمكن أيضًا شرح مدى توفر التعبيرات داخل سلسلة بسرعة. بدلاً من مجرد السماح برموز السلسلة ، تقبل سلاسل القالب تعابير عشوائية. يوضح المثال التالي ما أعنيه بذلك.

function greet(name: string) {
  // Here you see an expression
  // *embedded* inside a string.
  return `Hello, ${name}!`;
}

// "Hello, Tom!"
const greeting = greet("Tom");

// One more example, using
// Typescript's 'rest'-operator
// which allowes any number of values
// and provides them as an array,
// in our case of type 'string'.
function greetAll(...names: string[]) {
  return `Hi everybody: ${names.join(", ")}!`;
}

// "Hi everybody: Tom, Luke!"
const greetingForAll = greetAll("Tom", "Luke");

سلاسل القوالب ذات العلامات

ستكون هذه المجموعة من الميزات وحدها رائعة بالفعل ، ولكن يمكن أيضًا استخدام سلاسل القوالب كوظائف. ما عليك سوى وضع كلمة رئيسية أمام سلسلة النموذج "وسمها" ، ومن هنا جاء اسم "سلاسل القوالب ذات العلامات". حان الوقت للمثال التالي.

// All previous examples used 'untagged'
// string literals, which means they're 
// practially just a string.
//
// But let's see how we can convert them
// to an acutal function:
function merge(template: TemplateStringsArray, ...params: string[]){
  
  // This needs some explanation:
  //
  // 'template', our first param, contains
  // all strings *inbetween the paramters*,
  // you'll see in a minute what I mean by that.
  //
  // 'params' then is an array of strings
  // that were provided as paramteres to the
  // template string.
  
  // Let's ignore the result for now.
  return "";
}

const what = "test";

// Here's the tagged template string in action.
// The tag is the function name, and like a 
// function the tagged template string can be called.
//
// Let's destruct how this will look like
// in the function defined above.
//
// 'template' = ["Just a", ""];
// 'params'   = ["test"]
const result = merge`Just a ${what}`;

// As you can see, the function splits the string
// into the string-only parts and the expressions.

كما ترون ، فإن بناء الجملة يبدو ممتعًا للغاية وربما غريبًا قليلاً عند العمل به لأول مرة. ربما لا يوجد عدد كبير من حالات الاستخدام التي تتطلب منك تنفيذ سلاسل القوالب ذات العلامات ، ولكن مع ذلك يمكننا التلاعب بها. في المثال التالي والمثال الأخير ، قمت بتجميع بعض دراسات الحالة. كما سترى ، يمكن استخدام سلاسل القوالب ذات العلامات بشكل طبيعي مع الأدوية الجنسية وفتح بعض الخيارات الشيقة لتنفيذ متطلبات معينة.

// 
// Generic
//
// Tagged template literals can be generic, too.
function generic<T>(template: TemplateStringsArray, ...params: T[]){
    return template.join(",") + params.join(",")
}

// "A value: ,test"
console.log(generic<string>`A value: ${"test"}`);

//
// Generic (with super powers)
//
// You can specify each type and 
// also limit the number of params!
function coalesce<A, B, C>(template: TemplateStringsArray, ...params: [A, B, C]){
    return template.join(",") + params.join(",")
}

// ", - , - ,value,0,true" 
const res = coalesce<string, number, boolean>`${"value"} - ${0} - ${true}`;

//
// Different return type
//
// Also, tagged literal types don't 
// only have to return strings.
const preview = (template: TemplateStringsArray, ...params: number[]) 
  => (template2: TemplateStringsArray, ...params2: string[])
  => {
    return "what?";
}

// Note the two pairs of backticks
// after each other, we're just calling
// the returned tagged template string
// form our first one!
console.log(preview`${0}``${"a"}`);

أتمنى أن تكون قد استمتعت بهذه الرحلة الميدانية السريعة إلى إحدى ميزات جافا سكريبت بالإضافة إلى ميزة الأنواع. من المحتمل أن تكون سلاسل القوالب شيئًا شائعًا في قاعدة الشفرة الخاصة بك ، ومن المحتمل ألا تكون سلاسل النموذج الموسومة كذلك ، لذلك من المثير للاهتمام معرفة المزيد حول هذه الميزات المتخصصة.