JavaScript में स्ट्रिंग की संख्या हमेशा सीमित होती रही है. इसमें ऐसी सुविधाएं नहीं हैं जो Python या Ruby जैसी भाषाओं से मिलने की उम्मीद हो सकती है. ES6 टेंप्लेट स्ट्रिंग (Chrome 41 या इसके बाद के वर्शन पर उपलब्ध), बुनियादी तौर पर इसमें बदलाव करता है. वे डोमेन के हिसाब से खास भाषाओं (डीएसएल) के साथ स्ट्रिंग को परिभाषित करने का तरीका पेश करते हैं, जिससे ये बेहतर हो जाते हैं:
- स्ट्रिंग इंटरपोलेशन
- एम्बेड किए गए एक्सप्रेशन
- हैक के बिना मल्टीलाइन स्ट्रिंग
- स्ट्रिंग फ़ॉर्मैटिंग
- सुरक्षित एचटीएमएल एस्केपिंग, लोकलाइज़ेशन वगैरह के लिए स्ट्रिंग टैगिंग.
जैसा कि हम आज जानते हैं, एक और सुविधा को स्ट्रिंग में भरने के बजाय, Template Strings इन समस्याओं को हल करने का एक बिलकुल अलग तरीका पेश करती है.
सिंटैक्स
टेंप्लेट स्ट्रिंग, सामान्य स्ट्रिंग में सिंगल या डबल कोट के बजाय बैक-टिक (``) का इस्तेमाल करती हैं. टेंप्लेट स्ट्रिंग को इस तरह लिखा जा सकता है:
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";
टेंप्लेट स्ट्रिंग, मल्टीलाइन स्ट्रिंग को काफ़ी आसान बनाती हैं. ज़रूरत पड़ने पर नई लाइन शामिल करें और BOOM पर लिखें. यहां एक उदाहरण दिया गया है:
बैकटिक सिंटैक्स के अंदर मौजूद किसी भी खाली सफ़ेद जगह को भी स्ट्रिंग का हिस्सा माना जाएगा.
console.log(`string text line 1
string text line 2`);
टैग किए गए टेंप्लेट
अब तक हमने स्ट्रिंग की वैल्यू बदलने और एक से ज़्यादा लाइन वाली स्ट्रिंग बनाने के लिए, टेंप्लेट स्ट्रिंग का इस्तेमाल करने पर गौर किया है. इन टूल की एक और सुविधा है, टैग किए गए टेंप्लेट. टैग किए गए टेंप्लेट, टेंप्लेट स्ट्रिंग के पहले फ़ंक्शन का नाम डालकर, टेंप्लेट स्ट्रिंग को पूरी तरह बदलते हैं. उदाहरण के लिए:
fn`Hello ${you}! You're looking ${adjective} today!`
टैग की गई टेंप्लेट स्ट्रिंग के सिमेंटिक, किसी सामान्य स्ट्रिंग के सिमेंटिक से काफ़ी अलग होते हैं. संक्षेप में, वे एक विशेष प्रकार के फ़ंक्शन कॉल हैं: ऊपर
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
ध्यान दें कि (n + 1)वां तर्क, स्ट्रिंग ऐरे में nवें और (n + 1)वीं एंट्री के बीच होने वाले बदलाव से कैसे मेल खाता है. यह सभी प्रकार की चीज़ों के लिए उपयोगी हो सकता है, लेकिन सबसे आसान तरीका है किसी भी इंटरपोलेट किए गए वैरिएबल से अपने आप एस्केप करना.
उदाहरण के लिए, आप इस तरह का कोई एचटीएमएल एस्केपिंग फ़ंक्शन लिख सकते हैं..
html`<p title="${title}">Hello ${you}!</p>`
सही वैरिएबल वाली स्ट्रिंग दिखाता है, लेकिन उसमें सभी एचटीएमएल असुरक्षित वर्ण बदल दिए गए हैं. चलिए, इसे पूरा करते हैं. हमारे एचटीएमएल-एस्केपिंग फ़ंक्शन में दो तर्क होंगे: उपयोगकर्ता नाम और टिप्पणी. दोनों में एचटीएमएल असुरक्षित वर्ण (जैसे कि ', ", <, >, और &) हो सकते हैं. उदाहरण के लिए, अगर उपयोगकर्ता नाम "DomenicDencola" है और टिप्पणी "& एक मज़ेदार टैग है", तो हमें यह आउटपुट देना चाहिए:
<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 beta+, IE Tech Preview, Firefox 35+, और io.js में हैं. अगर आपको आज-कल प्रोडक्शन में इनका इस्तेमाल करना है, तो यह ट्रेज़र और 6to5 जैसे मुख्य ES6 ट्रांसपिलर के साथ काम करता है. अगर आपको इसे आज़माना है, तो Chrome सैंपल रेपो पर हमारा टेंप्लेट स्ट्रिंग सैंपल देखें. ES5 में ES6 इक्विवैलेंट्स के बारे में जानने में आपकी दिलचस्पी हो सकती है. इसमें बताया गया है कि आज ही ES5 का इस्तेमाल करके, शुगर वाली टेंप्लेट स्ट्रिंग को हासिल करने का तरीका कैसे बताया जा सकता है.
टेंप्लेट स्ट्रिंग, JavaScript में कई अहम सुविधाएं उपलब्ध कराती हैं. इनमें स्ट्रिंग और एक्सप्रेशन इंटरपोल करने के बेहतर तरीके, मल्टीलाइन स्ट्रिंग, और अपने डीएसएल बनाने की सुविधा शामिल है.
टैग किए गए टेंप्लेट की सबसे अहम सुविधाओं में से एक है - डीएसएल (DSL) बनाने के लिए एक अहम सुविधा है. वे, टेंप्लेट स्ट्रिंग के हिस्सों को आर्ग्युमेंट के तौर पर इस्तेमाल करते हैं. इसके बाद, आपके पास यह तय करने का विकल्प होता है कि स्ट्रिंग का फ़ाइनल आउटपुट तय करने के लिए, स्ट्रिंग और विकल्पों का इस्तेमाल कैसे किया जाए.