JavaScript
खाका साहित्य

परिचय

वाक्य - विन्यास

• संदेश = `आपका स्वागत है, $ {user.name}!`
• पैटर्न = नया RegExp (String.raw`Welcome, (\ w +)! `);
• क्वेरी = SQL`INSERT INTO उपयोगकर्ता (नाम) VALUES ($ {name}) `

टिप्पणियों

बुनियादी प्रक्षेप और बहुस्तरीय तार

टेम्पलेट शाब्दिक एक विशेष प्रकार के स्ट्रिंग शाब्दिक हैं जिनका उपयोग मानक '...' या "..." बजाय किया जा सकता है। उन्हें मानक एकल या दोहरे उद्धरण के बजाय स्ट्रिंग के साथ उद्धृत करके घोषित किया जाता है: `...` ।

टेम्पलेट शाब्दिकों में पंक्ति विराम शामिल हो सकते हैं और ${ expression } प्रतिस्थापन वाक्यविन्यास का उपयोग करके मनमाने ढंग से अभिव्यक्ति की जा सकती है। डिफ़ॉल्ट रूप से, इन प्रतिस्थापन अभिव्यक्तियों के मूल्यों को सीधे स्ट्रिंग में संक्षिप्त किया जाता है जहां वे दिखाई देते हैं।

const name = "John";
const score = 74;

console.log(`Game Over!

${name}'s score was ${score * 10}.`);

Game Over!

John's score was 740.

कच्चे तार

String.raw टैग फ़ंक्शन का उपयोग टेम्पलेट शाब्दिकों के साथ किसी भी बैकस्लैश अनुक्रमों की व्याख्या किए बिना उनकी सामग्री के संस्करण तक पहुंचने के लिए किया जा सकता है।

String.raw`\n` में बैकस्लैश और लोअरकेस अक्षर n होगा, जबकि `\n` या '\n' इसके बजाय एक एकल `\n` वर्ण होगा।

const patternString = String.raw`Welcome, (\w+)!`;
const pattern = new RegExp(patternString);

const message = "Welcome, John!";
pattern.exec(message);

["Welcome, John!", "John"]

टैग की गईं तार

टेम्पलेट शाब्दिक के तुरंत पहले पहचाने जाने वाले फ़ंक्शन का उपयोग इसे व्याख्या करने के लिए किया जाता है, जिसे टैग किए गए टेम्पलेट शाब्दिक कहा जाता है। टैग फ़ंक्शन एक स्ट्रिंग वापस कर सकता है, लेकिन यह किसी अन्य प्रकार के मूल्य को भी वापस कर सकता है।

टैग फ़ंक्शन, strings लिए पहला तर्क, शाब्दिक के प्रत्येक स्थिर टुकड़े का एक सरणी है। शेष तर्क, ...substitutions , में प्रत्येक ${} प्रतिस्थापन अभिव्यक्ति के मूल्यांकन मूल्य शामिल हैं।

function settings(strings, ...substitutions) {
  const result = new Map();
  for (let i = 0; i < substitutions.length; i++) {
    result.set(strings[i].trim(), substitutions[i]);
  }
  return result;
}

const remoteConfiguration = settings`
  label    ${'Content'}
  servers  ${2 * 8 + 1}
  hostname ${location.hostname}
`;

Map {"label" => "Content", "servers" => 17, "hostname" => "stackoverflow.com"}

strings एरे में एक विशेष .raw प्रॉपर्टी है, जो टेम्पलेट शाब्दिक के समान स्थिर टुकड़ों के समानांतर एरे का उल्लेख करती है, लेकिन ठीक उसी तरह जैसे वे स्रोत कोड में दिखाई देते हैं, बिना किसी बैकस्लैश-एस्के को प्रतिस्थापित किए बिना।

function example(strings, ...substitutions) {
  console.log('strings:', strings);
  console.log('...substitutions:', substitutions);
}

example`Hello ${'world'}.\n\nHow are you?`;

strings: ["Hello ", ".\n\nHow are you?", raw: ["Hello ", ".\\n\\nHow are you?"]]
substitutions: ["world"]

टेम्पलेट स्ट्रिंग्स के साथ HTML को अस्थायी करना

आप स्वचालित रूप से प्रक्षेपित मानों को एन्कोड करने के लिए एक HTML`...` टेम्पलेट स्ट्रिंग टैग फ़ंक्शन बना सकते हैं। (इसके लिए आवश्यक है कि प्रक्षेपित मानों को केवल पाठ के रूप में उपयोग किया जाता है, और यदि स्क्रिप्ट या शैलियों जैसे कोड में प्रक्षेपित मानों का उपयोग किया जाता है तो यह सुरक्षित नहीं हो सकता है ।)

class HTMLString extends String {
  static escape(text) {
    if (text instanceof HTMLString) {
      return text;
    }
    return new HTMLString(
        String(text)
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/\\/g, '&#39;'));
  }
}

function HTML(strings, ...substitutions) { 
  const escapedFlattenedSubstitutions =
      substitutions.map(s => [].concat(s).map(HTMLString.escape).join(''));
  const pieces = [];
  for (const i of strings.keys()) {
    pieces.push(strings[i], escapedFlattenedSubstitutions [i] || '');
  }
  return new HTMLString(pieces.join(''));
}

const title = "Hello World";
const iconSrc = "/images/logo.png";
const names = ["John", "Jane", "Joe", "Jill"];

document.body.innerHTML = HTML`
  <h1><img src="${iconSrc}" /> ${title}</h1>

  <ul> ${names.map(name => HTML`
    <li>${name}</li>
  `)} </ul>
`;

परिचय

टेम्प्लेट लिटरल विशेष विशेषताओं के साथ तार की तरह काम करते हैं। वे बैक-टिक `` द्वारा संलग्न हैं और कई लाइनों में फैलाए जा सकते हैं।

टेम्प्लेट लिटरल में एंबेडेड एक्सप्रेशन भी हो सकते हैं। ये भाव $ संकेत और घुंघराले लटके {} द्वारा दर्शाए गए हैं

//A single line Template Literal  
var aLiteral = `single line string data`;


//Template Literal that spans across lines       
var anotherLiteral = `string data that spans
         across multiple lines of code`;     

//Template Literal with an embedded expression
var x = 2;
var y = 3; 
var theTotal = `The total is ${x + y}`;     // Contains "The total is 5" 



//Comarison of a string and a template literal
var aString = "single line string data"
console.log(aString === aLiteral)                         //Returns true

स्ट्रिंग लिटरल्स की कई अन्य विशेषताएं हैं जैसे कि टैग की गई साक्षरता और कच्चे संपत्ति। इन्हें अन्य उदाहरणों में प्रदर्शित किया गया है।