ECMAScript 6 एक नए प्रकार के स्ट्रिंग शाब्दिक के साथ आता है, बैकटिक को सीमांकक के रूप में उपयोग करता है। ये शाब्दिक बुनियादी स्ट्रिंग प्रक्षेप अभिव्यक्ति को अंतर्निहित करने की अनुमति देते हैं, जो तब स्वचालित रूप से पार्स और मूल्यांकन किए जाते हैं।
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
जैसा कि आप देख सकते हैं, हमने `लगभग वर्णों की एक श्रृंखला का उपयोग किया है , जिनकी व्याख्या एक स्ट्रिंग शाब्दिक के रूप में की जाती है, लेकिन फॉर्म के किसी भी भाव को ${..}तुरंत इनलाइन किया जाता है और मूल्यांकन किया जाता है।
प्रक्षेपित स्ट्रिंग शाब्दिक का एक बहुत अच्छा लाभ यह है कि उन्हें कई लाइनों में विभाजित करने की अनुमति दी जाती है:
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!
प्रक्षेपित भाव
किसी भी मान्य अभिव्यक्ति को ${..}एक इंटरपोलेटेड स्ट्रिंग शाब्दिक में प्रदर्शित करने की अनुमति है , जिसमें फ़ंक्शन कॉल, इनलाइन फ़ंक्शन अभिव्यक्ति कॉल, और यहां तक कि अन्य प्रक्षेपित स्ट्रिंग शाब्दिक भी शामिल हैं!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
यहाँ, आंतरिक `${who}s`प्रक्षेपित स्ट्रिंग शाब्दिक , स्ट्रिंग के whoसाथ वैरिएबल के संयोजन के "s"रूप में, हमारे लिए थोड़ा सा अच्छा था who + "s"। एक नोट रखने के लिए भी एक प्रक्षेपित स्ट्रिंग शाब्दिक है, जहां यह प्रतीत होता है कि बस किसी भी तरह से स्कोप नहीं किया गया है:
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
HTML के लिए टेम्पलेट शाब्दिक का उपयोग करना निश्चित रूप से झुंझलाहट को कम करके पठनीय है।
सादा पुराना तरीका:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
ECMAScript 6 के साथ:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- आपका तार कई लाइनों को फैला सकता है।
- आपको उद्धरण वर्णों से बचने की आवश्यकता नहीं है।
- आप समूहन से बच सकते हैं जैसे: ''> ''
- आपको प्लस ऑपरेटर का उपयोग करने की आवश्यकता नहीं है।
टैग की गईं साक्षरता साहित्य
हम एक टेम्प्लेट स्ट्रिंग को भी टैग कर सकते हैं, जब एक टेम्प्लेट स्ट्रिंग को टैग किया जाता है, तो शाब्दिक और प्रतिस्थापन कार्य करने के लिए पारित किए जाते हैं जो परिणामी मान लौटाता है।
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
हम कई मूल्यों को पारित करने के लिए यहां प्रसार ऑपरेटर का उपयोग कर सकते हैं। पहला तर्क - हमने इसे स्ट्रिंग्स कहा है - सभी सादे तार (किसी भी प्रक्षेपित अभिव्यक्तियों के बीच का सामान) की एक सरणी है।
हम तो ऊपर बाद में सभी तर्क एक सरणी कहा जाता है का उपयोग कर मूल्यों में इकट्ठा होते हैं ... gather/rest operator, हालांकि आप निश्चित रूप से कर सकते थे उन्हें पैरामीटर जैसे हम ऊपर किया तार (निम्न अलग-अलग नाम वाले पैरामीटर के रूप में छोड़ दिया है value1, value2, आदि)।
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
तर्क (मान) हमारे मान सरणी में एकत्र किए गए स्ट्रिंग स्ट्रिंग में पहले से ही मूल्यांकन किए गए प्रक्षेप अभिव्यक्ति के परिणाम हैं। एक टैग किए गए स्ट्रिंग शाब्दिक का मूल्यांकन प्रक्षेपों के मूल्यांकन के बाद एक प्रसंस्करण कदम की तरह है, लेकिन अंतिम स्ट्रिंग मान संकलित करने से पहले, आपको शाब्दिक से स्ट्रिंग उत्पन्न करने पर अधिक नियंत्रण की अनुमति देता है। आइए पुन: प्रयोज्य टेम्पलेट्स बनाने का एक उदाहरण देखें।
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
कच्चे तार
हमारे टैग फ़ंक्शंस में एक पहला तर्क मिलता है जिसे हम स्ट्रिंग्स कहते हैं, जो एक सरणी है। लेकिन इसमें अतिरिक्त डेटा शामिल है: सभी स्ट्रिंग्स के कच्चे असंसाधित संस्करण। आप .rawसंपत्ति का उपयोग करके उन कच्चे स्ट्रिंग मानों तक पहुँच सकते हैं, जैसे:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
जैसा कि आप देख सकते हैं, स्ट्रिंग का कच्चा संस्करण बच गए \nअनुक्रम को सुरक्षित रखता है , जबकि स्ट्रिंग का संसाधित संस्करण इसे एक वास्तविक वास्तविक नई-रेखा की तरह मानता है। ECMAScript 6 एक अंतर्निहित फ़ंक्शन के साथ आता है जिसका उपयोग एक स्ट्रिंग शाब्दिक टैग के रूप में किया जा सकता है String.raw(..):। यह बस तार के कच्चे संस्करणों से गुजरता है:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"