JavaScript में स्ट्रिंग की लंबाई सीमित होती है. साथ ही, इसमें Python या Ruby जैसी भाषाओं की तरह सुविधाएं नहीं होती हैं. ES6 टेंप्लेट स्ट्रिंग (Chrome 41 या इसके बाद के वर्शन में उपलब्ध) से इसमें बुनियादी बदलाव होता है. इनसे, डोमेन के हिसाब से भाषाओं (डीएसएल) का इस्तेमाल करके स्ट्रिंग तय करने का तरीका मिलता है. इससे ये फ़ायदे मिलते हैं:
- स्ट्रिंग इंटरपोलेशन
- एम्बेड किए गए एक्सप्रेशन
- बिना हैक के मल्टीलाइन स्ट्रिंग
- स्ट्रिंग फ़ॉर्मैटिंग
- सुरक्षित एचटीएमएल एस्केपिंग, स्थानीय भाषा के मुताबिक बनाने वगैरह के लिए स्ट्रिंग टैगिंग.
आज हम स्ट्रिंग के बारे में जो जानते हैं उसके हिसाब से, टेंप्लेट स्ट्रिंग में एक और सुविधा जोड़ने के बजाय, इन समस्याओं को हल करने का एक बिलकुल अलग तरीका पेश किया गया है.
सिंटैक्स
टेंप्लेट स्ट्रिंग में बैक-टिक (``) का इस्तेमाल किया जाता है. हालांकि, सामान्य स्ट्रिंग में सिंगल या डबल कोट का इस्तेमाल किया जाता है. इसलिए, टेंप्लेट स्ट्रिंग को इस तरह लिखा जा सकता है:
var greeting = `Yo World!`;
अब तक, टेंप्लेट स्ट्रिंग से हमें सामान्य स्ट्रिंग के मुकाबले कोई ज़्यादा फ़ायदा नहीं मिला है. आइए, इसे बदलते हैं.
स्ट्रिंग सब्सिटिट्यूशन
स्ट्रिंग सब्स्टिट्यूशन, इसके सबसे बड़े फ़ायदों में से एक है. सबस्टिट्यूशन की मदद से, हम किसी भी मान्य JavaScript एक्सप्रेशन (जैसे, वैरिएबल जोड़ना) को ले सकते हैं. साथ ही, टेंप्लेट लिटरल के अंदर, नतीजे को उसी स्ट्रिंग के हिस्से के तौर पर आउटपुट किया जाएगा.
टेंप्लेट स्ट्रिंग में, ${ } सिंटैक्स का इस्तेमाल करके स्ट्रिंग बदलने के लिए प्लेसहोल्डर शामिल किए जा सकते हैं. इसके बारे में यहां बताया गया है:
// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);
// => "Yo, Brendan!"
टेंप्लेट स्ट्रिंग में सभी स्ट्रिंग सब्स्टिट्यूशन, JavaScript एक्सप्रेशन होते हैं. इसलिए, हम वैरिएबल के नामों के अलावा और भी बहुत कुछ बदल सकते हैं. उदाहरण के लिए, यहां हम एक्सप्रेशन इंटरपोलेशन का इस्तेमाल करके, कुछ पढ़ने लायक इनलाइन गणित को एम्बेड कर सकते हैं:
var a = 10;
var b = 10;
console.log(`JavaScript first appeared ${a+b} years ago. Wow!`);
//=> JavaScript first appeared 20 years ago. Wow!
console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);
//=> The number of JS frameworks is 40 and not 200.
ये एक्सप्रेशन में मौजूद फ़ंक्शन के लिए भी बहुत काम के होते हैं:
function fn() { return "I am a result. Rarr"; }
console.log(`foo ${fn()} bar`);
//=> foo I am a result. Rarr bar.
${}, सदस्यों के एक्सप्रेशन और तरीके के कॉल के साथ-साथ, किसी भी तरह के एक्सप्रेशन के साथ काम करता है:
var user = {name: 'Caitlin Potter'};
console.log(`Thanks for getting this into V8, ${user.name.toUpperCase()}.`);
// => "Thanks for getting this into V8, CAITLIN POTTER";
// And another example
var thing = 'template strings';
console.log(`Say hello to ${thing}.`);
// => Say hello to template strings
अगर आपको अपनी स्ट्रिंग में बैकटिक की ज़रूरत है, तो बैकस्लैश वर्ण \ का इस्तेमाल करके इसे एस्केप किया जा सकता है. इसके लिए, यह तरीका अपनाएं:
var greeting = `\`Yo\` World!`;
एक से ज़्यादा लाइन वाली स्ट्रिंग
JavaScript में कई लाइनों वाली स्ट्रिंग के लिए, कुछ समय से हैकी वर्कअराउंड की ज़रूरत होती है. फ़िलहाल, उनके लिए उपलब्ध समाधानों के मुताबिक, स्ट्रिंग को एक ही लाइन में होना चाहिए. इसके अलावा, हर नई लाइन से पहले \ (बैकस्लैश) का इस्तेमाल करके, उन्हें कई लाइनों वाली स्ट्रिंग में बांटा जा सकता है. उदाहरण के लिए:
var greeting = "Yo \
World";
ज़्यादातर आधुनिक JavaScript इंजन में यह तरीका ठीक से काम करता है. हालांकि, यह तरीका अब भी थोड़ा हैक जैसा है. मल्टीलाइन सपोर्ट का फ़र्ज़ी दावा करने के लिए, स्ट्रिंग जोड़ने की प्रोसेस का इस्तेमाल भी किया जा सकता है. हालांकि, इससे भी कुछ कमियां रह जाती हैं:
var greeting = "Yo " +
"World";
टेंप्लेट स्ट्रिंग की मदद से, एक से ज़्यादा लाइन वाली स्ट्रिंग को आसानी से लिखा जा सकता है. जहां ज़रूरी हो वहां नई लाइनें जोड़ें और बस. यहां एक उदाहरण दिया गया है:
बैकटिक सिंटैक्स के अंदर मौजूद किसी भी खाली जगह को भी स्ट्रिंग का हिस्सा माना जाएगा.
console.log(`string text line 1
string text line 2`);
टैग किए गए टेंप्लेट
अब तक, हमने स्ट्रिंग को बदलने और एक से ज़्यादा लाइन वाली स्ट्रिंग बनाने के लिए, टेंप्लेट स्ट्रिंग का इस्तेमाल करने के बारे में जाना. टैग किए गए टेंप्लेट की सुविधा भी उपलब्ध है. टैग किए गए टेंप्लेट, टेंप्लेट स्ट्रिंग को बदलते हैं. इसके लिए, वे टेंप्लेट स्ट्रिंग से पहले फ़ंक्शन का नाम डालते हैं. उदाहरण के लिए:
fn`Hello ${you}! You're looking ${adjective} today!`
टैग की गई टेंप्लेट स्ट्रिंग का सिमैंटिक, सामान्य टेंप्लेट स्ट्रिंग से बहुत अलग होता है. असल में, ये एक खास तरह का फ़ंक्शन कॉल होते हैं: ऊपर दिया गया कोड, इस कोड में "desugars" हो जाता है
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
ध्यान दें कि (n + 1)वां आर्ग्युमेंट, स्ट्रिंग ऐरे में nवें और (n + 1)वें एंट्री के बीच होने वाले बदलाव से मेल खाता है. इसका इस्तेमाल कई तरह के कामों के लिए किया जा सकता है. हालांकि, सबसे आसान काम यह है कि इंटरपोलेट किए गए किसी भी वैरिएबल को अपने-आप एस्केप कर दिया जाए.
उदाहरण के लिए, एचटीएमएल-एस्केपिंग फ़ंक्शन इस तरह लिखा जा सकता है कि..
html`<p title="${title}">Hello ${you}!</p>`
यह फ़ंक्शन, सही वैरिएबल वाली स्ट्रिंग दिखाता है. हालांकि, इसमें एचटीएमएल के लिए असुरक्षित सभी वर्णों को बदल दिया जाता है. चलिए, ऐसा करते हैं. हमारा एचटीएमएल-एस्केपिंग फ़ंक्शन, दो आर्ग्युमेंट लेगा: उपयोगकर्ता नाम और टिप्पणी. इन दोनों में एचटीएमएल के लिए असुरक्षित वर्ण हो सकते हैं. जैसे, ', ", <, >, और &. उदाहरण के लिए, अगर उपयोगकर्ता नाम "Domenic Denicola" है और टिप्पणी "& is a fun tag" है, तो हमें यह आउटपुट देना चाहिए:
<b>Domenic Denicola says:</b> "& is a fun tag"
इसलिए, टैग किए गए टेंप्लेट के हमारे समाधान को इस तरह लिखा जा सकता है:
// HTML Escape helper utility
var util = (function () {
// Thanks to Andrea Giammarchi
var
reEscape = /[&<>'"]/g,
reUnescape = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g,
oEscape = {
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
},
oUnescape = {
'&': '&',
'&': '&',
'<': '<',
'<': '<',
'>': '>',
'>': '>',
''': "'",
''': "'",
'"': '"',
'"': '"'
},
fnEscape = function (m) {
return oEscape[m];
},
fnUnescape = function (m) {
return oUnescape[m];
},
replace = String.prototype.replace
;
return (Object.freeze || Object)({
escape: function escape(s) {
return replace.call(s, reEscape, fnEscape);
},
unescape: function unescape(s) {
return replace.call(s, reUnescape, fnUnescape);
}
});
}());
// Tagged template function
function html(pieces) {
var result = pieces[0];
var substitutions = [].slice.call(arguments, 1);
for (var i = 0; i < substitutions.length; ++i) {
result += util.escape(substitutions[i]) + pieces[i + 1];
}
return result;
}
var username = "Domenic Denicola";
var tag = "& is a fun tag";
console.log(html`<b>${username} says</b>: "${tag}"`);
//=> <b>Domenic Denicola says</b>: "& is a fun tag"
इसके अलावा, इनका इस्तेमाल ऑटो-एस्केपिंग, फ़ॉर्मैटिंग, स्थानीयकरण, और सामान्य तौर पर ज़्यादा जटिल सब्स्टिट्यूशन के लिए किया जा सकता है:
// Contextual auto-escaping
qsa`.${className}`;
safehtml`<a href="${url}?q=${query}" onclick="alert('${message}')" style="color: ${color}">${message}</a>`;
// Localization and formatting
l10n`Hello ${name}; you are visitor number ${visitor}:n! You have ${money}:c in your account!`
// Embedded HTML/XML
jsx`<a href="${url}">${text}</a>` // becomes React.DOM.a({ href: url }, text)
// DSLs for code execution
var childProcess = sh`ps ax | grep ${pid}`;
खास जानकारी
टेंप्लेट स्ट्रिंग, Chrome 41 बीटा+, IE Tech Preview, Firefox 35+, और io.js में उपलब्ध हैं. अगर आपको इनका इस्तेमाल आज ही करना है, तो ये ES6 के मुख्य ट्रांसपाइलर के साथ काम करते हैं. इनमें Traceur और 6to5 शामिल हैं. अगर आपको इन्हें आज़माना है, तो Chrome के सैंपल रिपो पर जाकर, टेंप्लेट स्ट्रिंग का सैंपल देखें. आपको ES5 में ES6 के बराबर के फ़ीचर के बारे में भी जानकारी मिल सकती है. इससे पता चलता है कि ES5 का इस्तेमाल करके, टेंप्लेट स्ट्रिंग की कुछ सुविधाओं को कैसे हासिल किया जा सकता है.
टेंप्लेट स्ट्रिंग, JavaScript के लिए कई अहम सुविधाएं उपलब्ध कराती हैं. इनमें स्ट्रिंग और एक्सप्रेशन इंटरपोलेशन, मल्टीलाइन स्ट्रिंग, और खुद के डीएसएल बनाने के बेहतर तरीके शामिल हैं.
टैग किए गए टेंप्लेट, उनकी सबसे अहम सुविधाओं में से एक हैं. इस तरह के डीएसएल बनाने के लिए, यह एक ज़रूरी सुविधा है. इन्हें टेंप्लेट स्ट्रिंग के हिस्सों को आर्ग्युमेंट के तौर पर मिलता है. इसके बाद, यह तय किया जा सकता है कि स्ट्रिंग और सब्स्टिट्यूशन का इस्तेमाल करके, अपनी स्ट्रिंग का फ़ाइनल आउटपुट कैसे तय किया जाए.