JS टैग्ड टेम्पलेट्स
In this page:
function tag(strings, ...values) {
// build and return a result
}
tag`text ${value} text`;Tagged Template क्या है
एक tagged template किसी function के नाम से पहले आया एक template literal है; सीधे एक स्ट्रिंग बनाने के बजाय, JavaScript custom processing के लिए literal के टुकड़ों के साथ उस function को कॉल करता है।
उदाहरण: What Is a Tagged Template
// Define the function `tag` taking `strings`, `value`
// Define the function `tag` taking `strings`, `value`
function tag(strings, value) {
// Print `strings, value` to the console
// Print `strings, value` to the console
console.log(strings, value);
}
// Declare the constant `name`, set to "Sam"
// Declare the constant `name`, set to "Sam"
const name = "Sam";
tag`Hello ${name}`;Tag Function के Arguments
Tag function को अपने पहले argument के रूप में literal के string segments की एक array मिलती है, उसके बाद हर interpolated ${} value अलग अतिरिक्त arguments के रूप में, जो उसे fixed text और dynamic टुकड़ों दोनों तक पूरी पहुंच देती है।
उदाहरण: Tag Function Arguments
// Define the function `tag` taking `strings`, `...values`
// Define the function `tag` taking `strings`, `...values`
function tag(strings, ...values) {
// Print `strings` to the console
// Print `strings` to the console
console.log(strings);
// Print `values` to the console
// Print `values` to the console
console.log(values);
}
tag`A ${1} B ${2}`;Tags से Formatting
चूंकि आप नियंत्रित करते हैं कि टुकड़े कैसे मिलाए जाते हैं, एक tag function HTML escape कर सकता है, currency format कर सकता है, substitutions को highlight कर सकता है, या आखिरी स्ट्रिंग बनाने से पहले कोई भी custom transformation लगा सकता है।
उदाहरण: Formatting with Tags
// Define the function `highlight` taking `strings`, `...values`
// Define the function `highlight` taking `strings`, `...values`
function highlight(strings, ...values) {
// Return `strings.reduce((out, str, i) => `${out}${str}${values[i] ? `[${values[i]}]` : ""}`, "")` from this function
// Return `strings.reduce((out, str, i) => `${out}${str}${values[i] ? `[${values[i]}]` : ""}`, "")` from this function
return strings.reduce((out, str, i) => `${out}${str}${values[i] ? `[${values[i]}]` : ""}`, "");
}
// Print `highlight`Score: ${95}`` to the console
// Print `highlight`Score: ${95}`` to the console
console.log(highlight`Score: ${95}`);Reusable Tag Functions
एक tag function बस एक normal function है, इसलिए आप इसे एक बार लिखकर उन कई template literals में दोबारा इस्तेमाल कर सकते हैं जहाँ भी वह खास formatting या escaping व्यवहार चाहिए।
उदाहरण: Reusable Tag Functions
// Define the function `upper` taking `strings`, `...values`
// Define the function `upper` taking `strings`, `...values`
function upper(strings, ...values) {
// Return `strings.reduce((out, str, i) => out + str + (values[i] ?? "").toString().toUpperCase(), "")` from this function
// Return `strings.reduce((out, str, i) => out + str + (values[i] ?? "").toString().toUpperCase(), "")` from this function
return strings.reduce((out, str, i) => out + str + (values[i] ?? "").toString().toUpperCase(), "");
}
// Print `upper`Hello ${"world"}`` to the console
// Print `upper`Hello ${"world"}`` to the console
console.log(upper`Hello ${"world"}`);
// Print `upper`Bye ${"friend"}`` to the console
// Print `upper`Bye ${"friend"}`` to the console
console.log(upper`Bye ${"friend"}`);Tagged Template के Use Cases
Tagged templates उन असली libraries को चलाते हैं जिन्हें आप शायद पहले से इस्तेमाल करते हैं, जैसे styled-components का CSS-in-JS syntax और SQL-templating libraries जो interpolated values को सुरक्षित रूप से escape करती हैं।
उदाहरण: Tagged Template Use Cases
// Real-world tagged templates (illustrative):
// styled.div`color: ${theme.color};`
// sql`SELECT * FROM users WHERE id = ${userId}`
console.log("Tagged templates power CSS-in-JS and safe SQL templating.");- यह भूल जाना कि tag function पहले strings की एक array लेता है और बाद में values, इसलिए argument order गलत हो जाता है।
- parentheses के साथ
tag("text")लिखना जब आप `tagtext - tag function से कुछ return न करना, इसलिए result
undefinedहोता है।
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: