JavaScript Academy · पाठ

टैग किए गए टेम्पलेट के व्यावहारिक उपयोग

टैग की सहायता से सुरक्षित HTML और स्टाइल वाली स्ट्रिंग बनाइए।

पाठ 4, कुल 4 में से13 चरण

टैग किए गए टेम्पलेट के व्यावहारिक उपयोग, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

वास्तविक दुनिया के टैग

टैग किए गए टेम्पलेट कई लाइब्रेरी को शक्ति देते हैं: HTML एस्केपिंग, स्टाइल किए गए कंपोनेंट, GraphQL क्वेरी और अंतरराष्ट्रीयकरण। इन सभी के पीछे साझा विचार यह है कि इंटरपोलेट किए गए मानों को सुरक्षित रूप से संसाधित करने के लिए बीच में पकड़ा जाए।

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

एस्केपिंग की समस्या

जब आप उपयोगकर्ता के इनपुट से HTML बनाते हैं, तो छोटा-से-छोटा चिह्न जैसे विशेष वर्ण मार्कअप जोड़ सकते हैं। कोई टैग फ़ंक्शन केवल इंटरपोलेट किए गए मानों में इन वर्णों को अपने-आप एस्केप कर सकता है।

const danger = "<script>"
console.log("raw: " + danger)

एक एस्केप सहायक

सबसे पहले हम एक ऐसा सहायक परिभाषित करते हैं जो खतरनाक वर्णों को सुरक्षित HTML इकाइयों से बदलता है।

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

सुरक्षित HTML टैग

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

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

स्थिर भाग कच्चे क्यों रहते हैं

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

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

स्टाइल किया हुआ परिणाम टैग

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

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

क्वेरी स्ट्रिंग बनाना

टैग URL के लिए मानों को एन्कोड कर सकते हैं और हर इंटरपोलेट किए गए भाग को एस्केप कर सकते हैं, ताकि स्थिर संरचना बनी रहे और डेटा सुरक्षित रूप से एन्कोड हो।

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

बहुवचन बनाना

कोई टैग किसी मान की जाँच करके उसके आसपास के पाठ को बदल सकता है, जैसे एकवचन या बहुवचन शब्द चुनना।

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

इंडेंटेशन हटाना

टैग हर पंक्ति से शुरुआत का इंडेंटेशन हटाकर बहुपंक्ति वाले टेम्पलेट को व्यवस्थित कर सकते हैं और साफ़-सुथरा परिणाम दे सकते हैं।

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

टैग का संयोजन

एक टैग से सहायक फ़ंक्शन कॉल करवाकर आप व्यवहार की कई परतें जोड़ सकते हैं। यहाँ टैग मानों को लपेटने के साथ-साथ उन्हें उभारता भी है।

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

टैग का उपयोग कब न करें

सरल स्ट्रिंग के लिए साधारण टेम्पलेट लिटरल पर्याप्त होता है। टैग फ़ंक्शन का उपयोग तभी कीजिए जब इंटरपोलेट किए गए मानों में लगातार कोई रूपांतरण करना हो, जैसे एस्केपिंग या स्थानीयकरण।

const name = "Lee"
console.log("Welcome, " + name)

त्वरित जाँच

टैग के व्यावहारिक उपयोग से संबंधित अपने ज्ञान का परीक्षण कीजिए।

पुनरावलोकन

पुनरावलोकन: टैग किए गए टेम्पलेट सुरक्षित और फ़ॉर्मैट किए हुए परिणाम सक्षम करते हैं।

  • HTML सुरक्षा के लिए केवल इंटरपोलेट किए गए मानों को एस्केप कीजिए
  • स्थिर भाग विश्वसनीय और कच्चे बने रहते हैं
  • स्टाइलिंग, एन्कोडिंग और बहुवचन बनाने के लिए टैग का उपयोग कीजिए
  • जब किसी रूपांतरण की आवश्यकता न हो, तो साधारण लिटरल को प्राथमिकता दीजिए
function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))
शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
59
पाठ
200

अक्सर पूछे जाने वाले प्रश्न

क्या “टैग किए गए टेम्पलेट के व्यावहारिक उपयोग” पाठ निःशुल्क है?

हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “टैग किए गए टेम्पलेट के व्यावहारिक उपयोग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“टैग किए गए टेम्पलेट के व्यावहारिक उपयोग” में मैं क्या सीखूँगा?

टैग की सहायता से सुरक्षित HTML और स्टाइल वाली स्ट्रिंग बनाइए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“टैग किए गए टेम्पलेट के व्यावहारिक उपयोग” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. स्ट्रिंग इंटरपोलेशन की मूल बातें
  2. बहु-पंक्ति स्ट्रिंग
  3. टैग किए गए टेम्पलेट फ़ंक्शन
  4. टैग किए गए टेम्पलेट के व्यावहारिक उपयोग
← JavaScript Academy पर वापस जाएँ