टाइपप्रति टैग की गई टेम्पलेट स्ट्रिंग्स

मूल बातें: टेम्पलेट स्ट्रिंग्स

टैग किए गए टेम्प्लेट स्ट्रिंग्स के बारे में बात करने से पहले, जिसे टेम्प्लेट लिटरल्स भी कहा जाता है, मैं सामान्य रूप से टेम्प्लेट स्ट्रिंग्स का एक त्वरित परिचय देना चाहता हूं। अगले अध्याय पर जाने के लिए स्वतंत्र महसूस करें यदि आप पहले से ही जानते हैं कि यह किस बारे में है।

टेम्प्लेट स्ट्रिंग्स एक विशेष प्रकार के स्ट्रिंग सिंबल होते हैं जिनमें जावास्क्रिप्ट एक्सप्रेशन के साथ-साथ कई पंक्तियों में फैले होते हैं। वे दोहरे उद्धरण चिह्नों के बजाय बैकटिक-वर्णों का उपयोग करते हैं, क्योंकि यह सामान्य स्ट्रिंग्स के मामले में होता है।

कई पंक्तियों में वर्णों के फैलाव के संबंध में, एक सामान्य स्ट्रिंग में एक नई पंक्ति बनाने के लिए "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"}`);

मुझे आशा है कि आपने जावास्क्रिप्ट के साथ-साथ टाइपस्क्रिप्ट की विशेषता में से एक में इस त्वरित क्षेत्र यात्रा का आनंद लिया। आपके कोडबेस में टेम्प्लेट स्ट्रिंग्स सबसे आम बात है, टैग किए गए टेम्प्लेट स्ट्रिंग्स शायद नहीं हैं, इसलिए ऐसी आला सुविधाओं के बारे में अधिक जानना दिलचस्प है।