ES6एक नए प्रकार के स्ट्रिंग शाब्दिक के साथ आता है, `बैक-टिक को सीमांकक के रूप में उपयोग करता है। ये शाब्दिक बुनियादी स्ट्रिंग प्रक्षेप अभिव्यक्ति को एम्बेड करने की अनुमति देते हैं, जो तब स्वचालित रूप से पार्स और मूल्यांकन किए जाते हैं।
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
जैसा कि आप देख सकते हैं, हमने वर्णों की एक श्रृंखला के आसपास ..`` का उपयोग किया, जिन्हें एक स्ट्रिंग शाब्दिक के रूप में व्याख्या की जाती है, लेकिन प्रपत्र के किसी भी भाव को ${..}तुरंत इनलाइन किया जाता है और मूल्यांकन किया जाता है।
प्रक्षेपित स्ट्रिंग शाब्दिकों का एक बहुत अच्छा लाभ यह है कि उन्हें कई लाइनों में विभाजित करने की अनुमति दी जाती है:
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 );
प्रक्षेपित भाव
किसी भी वैध अभिव्यक्ति को ${..}एक इंटरपोलेटेड स्ट्रिंग में प्रदर्शित करने की अनुमति है lit‐ eral, जिसमें फ़ंक्शन कॉल, इनलाइन फ़ंक्शन एक्सप्रेशन कॉल और अन्य भी शामिल हैं interpo‐ lated string literals!
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 );
यहाँ, आंतरिक $ {who} s`` प्रक्षेपित स्ट्रिंग शाब्दिक हमारे लिए थोड़ा सा अच्छा सुविधा था जब "s"स्ट्रिंग के साथ कौन सा चर संयोजन किया गया था, जो कि + "s" के विपरीत था। एक नोट रखने के लिए भी एक प्रक्षेपित स्ट्रिंग शाब्दिक है lexically scopedजहाँ यह प्रकट होता है, dynamically scopedकिसी भी तरह से नहीं
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar();
template literalझुंझलाहट को कम करके HTML के लिए उपयोग करना निश्चित रूप से अधिक पठनीय है।
सादा पुराना तरीका:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
के साथ ES6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- आपका तार कई पंक्तियों को फैला सकता है।
- आपको उद्धरण वर्णों से बचने की आवश्यकता नहीं है।
- आप समूहन से बच सकते हैं जैसे: ''> ''
- आपको प्लस ऑपरेटर का उपयोग करने की आवश्यकता नहीं है।
टैग की गईं साक्षरता साहित्य
हम एक templateस्ट्रिंग को भी टैग कर सकते हैं , जब एक templateस्ट्रिंग को टैग किया जाता है, literalsऔर प्रतिस्थापन को कार्य करने के लिए पारित किया जाता है जो परिणामी मान लौटाता है।
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`;
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
हम spreadकई मान पास करने के लिए ऑपरेटर का उपयोग कर सकते हैं । पहला तर्क - हमने इसे स्ट्रिंग्स कहा - सभी सादे स्ट्रिंग्स (किसी भी प्रक्षेपित अभिव्यक्तियों के बीच सामान) की एक सरणी है।
इसके बाद हम सभी बाद के तर्कों को एक सरणी में इकट्ठा करते हैं, जिसका उपयोग मानों के रूप में किया जाता है ... gather/rest operator, हालांकि आप निश्चित रूप से उन्हें छोड़ सकते हैं जैसे कि ऊपर दिए गए स्ट्रिंग्स पैरामीटर के बाद व्यक्तिगत नामित पैरामीटर (value1, value2 etc)।
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
argument(s)पहले से ही मूल्यांकन प्रक्षेप स्ट्रिंग शाब्दिक में पाया भाव के परिणाम हमारे मूल्यों सरणी में इकट्ठा कर रहे हैं। tagged string literalप्रक्षेपों के मूल्यांकन के बाद A एक प्रसंस्करण चरण की तरह है लेकिन अंतिम स्ट्रिंग मान संकलित करने से पहले, आपको शाब्दिक से स्ट्रिंग उत्पन्न करने पर अधिक नियंत्रण की अनुमति देता है। आइए, एक उदाहरण बनाते हैं re-usable templates।
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);
कच्चे तार
हमारे टैग फ़ंक्शंस में एक पहला तर्क मिलता है जिसे हमने कॉल किया है strings, जो एक है array। लेकिन इसमें एक अतिरिक्त बिट डेटा शामिल है: सभी स्ट्रिंग्स के कच्चे असंसाधित संस्करण। आप .rawसंपत्ति का उपयोग करके उन कच्चे स्ट्रिंग मानों तक पहुँच सकते हैं, जैसे:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
जैसा कि आप देख सकते हैं, rawस्ट्रिंग का संस्करण बच गए \ n अनुक्रम को संरक्षित करता है, जबकि स्ट्रिंग का संसाधित संस्करण इसे एक वास्तविक वास्तविक नई-रेखा की तरह मानता है। ES6एक अंतर्निहित फ़ंक्शन के साथ आता है जिसे स्ट्रिंग शाब्दिक टैग के रूप में उपयोग किया जा सकता है String.raw(..):। यह बस के कच्चे संस्करणों से गुजरता है strings:
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );