जावास्क्रिप्ट में ईएस 6 टेम्पलेट साहित्य का उपयोग कैसे करें

प्रोग्रामिंग में, शब्द “शाब्दिक” यह आपकी जानकारी के लिए है मूल्यों का अंकन कोड में। उदाहरण के लिए, हम एक स्ट्रिंग मान को नोट करते हैं a शाब्दिक स्ट्रिंग दोहरे या एकल उद्धरण में संलग्न वर्ण हैं ("Foo", 'बार', "यह एक स्ट्रिंग है!").

खाका शाब्दिक में पेश किए गए थे ECMAScript 6. वे स्ट्रिंग शाब्दिकों के समान काम करते हैं; वे बनाते हैं टेम्पलेट मान तथा कच्चे टेम्पलेट मान, जो दोनों ही तार हैं.

हालांकि, स्ट्रिंग शाब्दिक के विपरीत, टेम्पलेट शाब्दिक मानों का उत्पादन कर सकते हैं बहु-पंक्ति वाले तार, कुछ आप एक स्ट्रिंग शाब्दिक में ही प्राप्त कर सकते हैं नई पंक्ति वर्ण जोड़ना (\ n) को.

टेम्प्लेट शाब्दिक भी हो सकते हैं अन्य मूल्यों के साथ तार बनाएँ (भावों से प्राप्त) जिसके लिए आपको उपयोग करना होगा प्लस ऑपरेटर एक स्ट्रिंग शाब्दिक में ("आपकी आईडी है:" + आईडीएनओ; कहा पे पहचान संख्या एक संख्यात्मक मान के साथ एक चर अभिव्यक्ति है).

ये सभी विशेषताएं टेम्पलेट शाब्दिक को अधिक बेहतर बनाती हैं स्ट्रिंग मान बनाएँ.

टेम्पलेट शाब्दिक के सिंटैक्स

टेम्पलेट शाब्दिक का परिसीमन है बैकटिक ' चरित्र (बैककौट चरित्र या गंभीर उच्चारण चिह्न के रूप में भी जाना जाता है)। शाब्दिक के अंदर एक अभिव्यक्ति (जिसका मूल्य है रनटाइम के दौरान मूल्यांकन किया गया और शाब्दिक द्वारा उत्पादित अंतिम मूल्य में शामिल) में संलग्न है घुंघराले ब्रेसिज़ के साथ डॉलर का चिह्न $.

 'स्ट्रिंग $ someExpression अधिक स्ट्रिंग' 

यहाँ कुछ हैं टेम्पलेट शाब्दिक के उदाहरण उत्पादन स्थिर, एवजी (भावों को उनके मूल्यांकित मूल्यों से बदल दिया जाता है), और बहु लाइन तार.

 console.log ( 'हैलो'); // हैलो var नाम = "जोन"; कंसोल.लॉग ('हैलो $ नाम'); // हेलो जोन कंसोल.लॉग ('डियर जोन, वेलकम।'); // प्रिय जोआन, // स्वागत है. 

बचने और कच्चे टेम्पलेट मान

एक टेम्पलेट शाब्दिक में, ' (बैकटिक), \ (बैकस्लैश), और $ (डॉलर चिह्न) वर्ण बचना चाहिए का उपयोग करते हुए पलायनवादी चरित्र \ अगर वे अपने टेम्पलेट मूल्य में शामिल किए जाने हैं.

डिफ़ॉल्ट रूप से, एक टेम्पलेट शाब्दिक में सभी बच क्रम हैं अवहेलना करना. यदि आप इसे आउटपुट में शामिल करना चाहते हैं, तो आपको इसका उपयोग करने की आवश्यकता है कच्चे टेम्पलेट मूल्य.

 कंसोल.लॉग ('मार्कअप में इनलाइन कोड: \' कोड \ "); // मार्कअप में इनलाइन कोड: 'कोड' var नाम =" जोन "; कंसोल.लॉग ('हैलो \ $ नेम';);); / hello $ name। कंसोल .log (String.raw'hello \ $ name। '); // hello \ $ name।. 

String.raw तरीका कच्चे टेम्पलेट मानों को आउटपुट करता है (टेम्प्लेट शाब्दिक का कच्चा स्ट्रिंग रूप)। उपरोक्त कोड में, फ़ंक्शन कॉल कच्चा विधि के रूप में संदर्भित किया जाता है “टेम्प्लेट को टैग किया गया”.

टैग किए गए टेम्प्लेट

एक टैग किया गया टेम्प्लेट एक है फ़ंक्शन कॉल कहा पे, सामान्य कोष्ठकों के स्थान पर (वैकल्पिक मापदंडों के साथ) फ़ंक्शन नाम के अलावा, वहाँ एक टेम्पलेट शाब्दिक है जिससे फ़ंक्शन को अपने तर्क मिलते हैं.

इसलिए, इस तरह से एक फ़ंक्शन को कॉल करने के बजाय:

 foo (ArgumentsForFoo); 

इसे इस तरह कहा जाता है:

 foo'ATemplateStringProvidingArgumentsForFoo '; 

कार्यक्रम foo कहा जाता है a टैग समारोह. टेम्पलेट शाब्दिक से प्राप्त इसका पहला तर्क ए है सरणी इसको कॉल किया गया टेम्पलेट वस्तु.

टेम्पलेट ऑब्जेक्ट (एक सरणी) रखती है सभी स्ट्रिंग मान टेम्प्लेट शाब्दिक से व्याख्या की गई है और ए कच्चा संपत्ति (एक और सरणी) जो धारण करती है सभी कच्चे (अन-एस्केप) स्ट्रिंग मान उसी शाब्दिक अर्थ से.

टेम्प्लेट ऑब्जेक्ट के बाद, टैग फ़ंक्शन के तर्क शामिल हैं आल थे का मूल्यांकन बाहरी मूल्य उस शाब्दिक में मौजूद हैं (घुंघराले ब्रेसिज़ में संलग्न हैं $ ).

नीचे दिए गए कोड में, foo को बनाया गया है अपने तर्कों का उत्पादन. फ़ंक्शन तब कहा जाता है टैग किए गए टेम्पलेट फैशन में, एक टेम्प्लेट शाब्दिक है जिसमें दो भाव हैं (नाम तथा आईडी).

 var का नाम = "जॉन"; var आईडी = 478; foo'hello $ name। आपकी आईडी है: $ आईडी। ' समारोह फू () कंसोल.लॉग (तर्क [0]); // ऐरे ["हैलो", "आपकी आईडी है:", "।" ] कंसोल.लॉग (तर्क [1]); // जॉन कंसोल.लॉग (तर्क [2]); // 478 

पहला तर्क आउटपुट है टेम्पलेट वस्तु टेम्प्लेट शाब्दिक रूप से व्याख्या किए गए सभी तारों को ले जाने पर, दूसरे और तीसरे तर्क हैं मूल्यों का मूल्यांकन किया भावों की, नाम तथा आईडी.

कच्चा संपत्ति

जैसा कि पहले उल्लेख किया गया है, टेम्पलेट ऑब्जेक्ट में ए है संपत्ति कहा जाता है कच्चा जो एक सरणी युक्त है सभी कच्चे (अन-एस्केप) स्ट्रिंग मान टेम्पलेट शाब्दिक से व्याख्या की। यह आप कैसे उपयोग कर सकते हैं कच्चा संपत्ति:

 var name1 = "जॉन", name2 = "जोन"; foo'hello \ $ name1, $ name2, आप दोनों कैसे हैं? ' समारोह फू () कंसोल.लॉग (तर्क [0]); // ऐरे ["हैलो $ name1,", ", आप दोनों कैसे हैं?"] कंसोल.लॉग (तर्क [0] .raw); // Array ["hello \ $ name1,", "आप दोनों कैसे हैं?"] कंसोल.लॉग (तर्क [1]); // जोन 

टैग किए गए टेम्प्लेट के मामलों का उपयोग करें

जरूरत पड़ने पर टैग किए गए टेम्प्लेट उपयोगी होते हैं एक तार तोड़ दो अलग-अलग हिस्सों में जैसे कि यह अक्सर URL में होता है, या किसी भाषा को पार्स करते समय। आप का एक संग्रह मिलेगा यहां टेम्प्लेट के उदाहरण दिए गए.

IE के अलावा, टेम्पलेट शाब्दिक हैं सभी प्रमुख ब्राउज़रों में समर्थित है.

नीचे, आप टैग कार्यों के साथ कुछ उदाहरण पा सकते हैं अलग हस्ताक्षर जो तर्कों का प्रतिनिधित्व करते हैं:

 var का नाम = "जॉन"; foo'hello $ name, आप दोनों कैसे हैं? ' bar'hello $ name, आप दोनों कैसे हैं? ' फ़ंक्शन फू (… args) कंसोल.लॉग (args); // Array [Array ["hello", ", आप दोनों कैसे हैं?"], "John"] फ़ंक्शन बार (strVals,… exprVals) कंसोल.लॉग (strVals); // ऐरे ["हैलो", ", आप दोनों कैसे हैं?" ] कंसोल.लॉग (एक्सप्रावल्स); // ऐरे ["जॉन"] 

में बार फ़ंक्शन, पहला पैरामीटर (strVals) है टेम्पलेट वस्तु और दूसरा एक (जो फैल सिंटैक्स का उपयोग करता है) एक सरणी है जो इकट्ठा हुआ है सभी मूल्यांकित अभिव्यक्ति मान टेम्पलेट शाब्दिक से फंक्शन में पास हुआ.

स्ट्रिंग को एक साथ रखें

यदि आप चाहते हैं पूरा वाक्य प्राप्त करें (शाब्दिक से प्राप्त) टैग फ़ंक्शन के अंदर, सभी मूल्यों को समेटना टेम्प्लेट स्ट्रिंग्स और मूल्यांकित अभिव्यक्ति मानों को ले जाने वाली सरणियों का। ऐशे ही:

 function foo (strs,… exprs) // अगर शाब्दिक में शामिल कोई भाव हैं (exprs.length! == 0) var n = strs.length - 1, result = ”; (var i = 0) के लिए ; मैं < n; i++)  result += strs[i] + exprs[i];  result += strs[n]; console.log(result); //"Hello John."  // if there are no expressions included in the literal else console.log(strs[0]);  name = 'John'; foo'Hello $name.'; 

एसटीआर सरणी रखती है सभी तार शाब्दिक और में पाया गया exprs रखती है सभी मूल्यांकित अभिव्यक्ति मान शाब्दिक अर्थ से.

यहां तक ​​कि अगर एक अभिव्यक्ति मूल्य मौजूद है, तो प्रत्येक सरणी मान को अलग करें एसटीआर (पिछले एक को छोड़कर) के समान-सूचकांक मूल्य के साथ exprs. फिर, अंत में, का अंतिम मान जोड़ें एसटीआर समतल स्ट्रिंग को सरणी, एक पूरा वाक्य बनाना इस तरफ.