मैं जावास्क्रिप्ट में स्ट्रिंग प्रक्षेप कैसे कर सकता हूं?


534

इस कोड पर विचार करें:

var age = 3;

console.log("I'm " + age + " years old!");

क्या स्ट्रिंग समवर्ती के अलावा एक स्ट्रिंग में एक चर के मूल्य को सम्मिलित करने के लिए कोई अन्य तरीके हैं?



1
के रूप में दूसरों को संकेत दिया है, विधि का प्रयोग कर रहे है इसके बारे में जाने के लिए सबसे आसान तरीका है। मैं स्ट्रिंग्स के अंदर चर का उल्लेख करने में सक्षम होना पसंद करूंगा, लेकिन जावास्क्रिप्ट में आपको कॉन्सेप्टन (या कुछ अन्य खोज / प्रतिस्थापन दृष्टिकोण) का उपयोग करने की आवश्यकता है। आप और मेरे जैसे लोग शायद हमारे ही अच्छे के लिए PHP से थोड़े बहुत जुड़े हुए हैं।
लेव


2
कॉनटैनेशन इंटरपोलेशन नहीं है और यूजर ने इंटरपोलेशन करने का तरीका पूछा। मुझे लगता है कि लेव ने आखिरकार जवाब दिया, अर्थात देशी जेएस में ऐसा करने का कोई तरीका नहीं है। मुझे समझ नहीं आ रहा है कि यह असली सवाल क्यों नहीं है।
जीटीबी

4
अगर मुझे जवाब देने की अनुमति दी जा सकती है, तो अब नए व्याख्याकारों के लिए एक समाधान शुरू हो रहा है (2015 एफएफ और क्रोम पहले से ही समर्थन करते हैं): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… । उदाहरण के लिए। Show GRAPH of : ${fundCode}-${funcCode} मुझे हो जाता है Show GRAPH of : AIP001-_sma (स्ट्रिंग 1 के चारों ओर backticks का उपयोग करें .... यहाँ प्रदर्शित करने के लिए प्रतीत नहीं कर सकते)
मार्कोस

जवाबों:


536

ES6 के बाद से, आप टेम्पलेट शाब्दिक का उपयोग कर सकते हैं :

const age = 3
console.log(`I'm ${age} years old!`)

पुनश्च नोट backticks का उपयोग नोट ``:।


3
मैं सोच रहा हूँ कि वे इस पर backticks के साथ क्यों गए, "$ {उम्र}" नहीं होगा जो प्रक्षेप करने के लिए पर्याप्त हो?
लाफिंग

5
@LaughingLemonade पिछड़ी संगतता। यदि इसे उस तरह से लागू किया गया था, तो उस प्रारूप में एक स्ट्रिंग को प्रिंट करने वाले सभी मौजूदा कोड विफल हो जाएंगे।
thefourtheye

1
@ जोनाथन मैं हमेशा एक सार्थक चरित्र के रूप में बैकटिक्स को नापसंद करता हूं। लेकिन मैं अनिश्चित हूँ अगर कारण सार्वभौमिक है या केवल मेरी भाषाओं में लागू होता है कीबोर्ड-लेआउट। बैकटिक एक विशेष प्रकार का चरित्र है जो अगले चरित्र तक लिखे जाने के साथ प्रतीक्षा करता है, इसे लिखने के लिए दो बार हिट करने की आवश्यकता होती है (और इस समय उनमें से दो लिखते हैं)। ऐसा इसलिए है क्योंकि कुछ पात्र उनसे बातचीत करते हैं, जैसे कि "ई"। अगर मैं उनके साथ "एलो" लिखने की कोशिश करता हूं, तो मुझे èllo`` मिलता है। यह कुछ हद तक क्रोधित रूप से स्थित है (शिफ्ट + फारवर्डिक, जो इस तरह का एक और विशेष लुक वाला चरित्र है), क्योंकि इसे 'के विपरीत' टाइप करने के लिए शिफ्ट की आवश्यकता होती है।
फेलिक्स

@ फेलिक्स यह एक ऐसा विचार है जो आपके कीबोर्ड लेआउट के लिए विशिष्ट है; आप जो वर्णन कर रहे हैं उसे "मृत कुंजी" कहा जाता है। वे नॉर्वेजियन कीबोर्ड लेआउट (जहां से मैं हूं) में भी मौजूद हैं, जो इस कारण का हिस्सा है कि मैं सभी प्रोग्रामिंग के लिए यूएस कीबोर्ड लेआउट पर स्विच करता हूं। (अन्य पात्रों की संख्या है - जैसे [और] - जो कि यूएस कीबोर्ड पर भी बहुत आसान हैं।)
Eivind Eklund

239

tl; डॉ

यदि लागू हो तो ECMAScript 2015 के टेम्पलेट स्ट्रिंग लिटरल्स का उपयोग करें।

व्याख्या

ECMAScript 5 विनिर्देशों के अनुसार, इसे करने का कोई सीधा तरीका नहीं है, लेकिन ECMAScript 6 में टेम्पलेट स्ट्रिंग्स हैं , जिन्हें युक्ति के प्रारूपण के दौरान अर्ध-शाब्दिक के रूप में भी जाना जाता था । उनका इस तरह उपयोग करें:

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

आप किसी भी मान्य जावास्क्रिप्ट अभिव्यक्ति का उपयोग अंदर कर सकते हैं {}। उदाहरण के लिए:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

दूसरी महत्वपूर्ण बात यह है कि, आपको अब मल्टी-लाइन स्ट्रिंग्स के बारे में चिंता करने की ज़रूरत नहीं है। आप उन्हें बस के रूप में लिख सकते हैं

> `foo
...     bar`
'foo\n    bar'

नोट: मैंने ऊपर दिखाए गए सभी टेम्पलेट स्ट्रिंग्स का मूल्यांकन करने के लिए io.js v2.4.0 का उपयोग किया है। आप ऊपर दिखाए गए उदाहरणों का परीक्षण करने के लिए नवीनतम क्रोम का भी उपयोग कर सकते हैं।

नोट: ES6 विनिर्देशों को अब अंतिम रूप दिया गया है , लेकिन अभी तक सभी प्रमुख ब्राउज़रों द्वारा लागू किया जाना है। मोज़िला डेवलपर नेटवर्क पृष्ठों के
अनुसार , इसे निम्नलिखित संस्करणों में शुरू होने वाले बुनियादी समर्थन के लिए लागू किया जाएगा: फ़ायरफ़ॉक्स 34, क्रोम 41, इंटरनेट एक्सप्लोरर 12. यदि आप ओपेरा, सफारी या इंटरनेट एक्सप्लोरर उपयोगकर्ता हैं और इस बारे में उत्सुक हैं , इस परीक्षण बिस्तर का उपयोग चारों ओर खेलने के लिए किया जा सकता है जब तक कि सभी को इसके लिए समर्थन न मिले।


3
यदि आप babeljs का उपयोग करते हैं तो यह प्रयोग करने योग्य है , इसलिए आप इसे अपने कोडबेस में पेश कर सकते हैं और बाद में ट्रांसप्ल्यूशन चरण को एक बार ड्रॉप कर सकते हैं।
ivarni

क्या एक मानक स्ट्रिंग को टेम्पलेट स्ट्रिंग शाब्दिक में बदलने का एक तरीका है? उदाहरण के लिए, यदि किसी के पास एक जोंस फाइल थी जिसमें अनुवाद तालिका थी, जिसमें प्रदर्शन उद्देश्यों के लिए आवश्यक मानों को प्रक्षेपित किया गया था? मुझे लगता है कि पहला समाधान शायद इस स्थिति के लिए अच्छी तरह से काम करता है, लेकिन मुझे सामान्य रूप से नए स्ट्रिंग टेम्पलेट सिंटैक्स पसंद है।
nbering

जैसा कि यह अभी भी जेएस स्ट्रिंग प्रक्षेप पर पहले खोज परिणामों में से एक है, यह बहुत अच्छा होगा यदि आप इसे अब सामान्य उपलब्धता को प्रतिबिंबित करने के लिए अपडेट कर सकते हैं। "ऐसा करने का कोई सीधा तरीका नहीं है" शायद अधिकांश ब्राउज़रों के लिए अब सच नहीं है।
फेलिक्स डॉम्बेक

2
दर्शकों में खराब नज़र के लिए, 'चरित्र अलग है'। यदि आपको यह काम करने में परेशानी हो रही है, तो सुनिश्चित करें कि आपके कब्र का उपयोग करके सुनिश्चित करें, (उर्फ झुका हुआ उद्धरण, पीछे का उद्धरण) en.wikipedia.org/wiki/Grave_accent । यह आपके कीबोर्ड पर बाईं ओर सबसे ऊपर है :)
Quincy

@ क्विंसी बॉटम ऑफ द मैक कीबोर्ड - जिसे बैक-टिक के रूप में भी जाना जाता है :)
आरबी।

192

डगलस क्रॉकफोर्ड के रेमेडियल जावास्क्रिप्ट में एक String.prototype.supplantफ़ंक्शन शामिल है । यह संक्षिप्त, परिचित और उपयोग में आसान है:

String.prototype.supplant = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

यदि आप स्ट्रिंग के प्रोटोटाइप को बदलना नहीं चाहते हैं, तो आप हमेशा इसे स्टैंडअलोन होने के लिए अनुकूलित कर सकते हैं, या इसे किसी अन्य नामस्थान, या जो भी हो, में रख सकते हैं।


102
नोट: यह सिर्फ सुरीले से दस गुना धीमा चलेगा।
7

36
और लगभग तीन गुना अधिक कीस्ट्रोक्स और बाइट्स लें।
ma11hew28

8
@roosteronacid - क्या आप उस गति में कमी पर कुछ परिप्रेक्ष्य दे सकते हैं? जैसे, 0.01s से 0.1 s (महत्वपूर्ण) या 0.000000001 से 0.00000001s (अप्रासंगिक) तक?
क्रिस

16
@ गेज: मेरी मशीन पर एक त्वरित परीक्षण ने "गाय कहते हैं मू, मू, मू!" के लिए 7312 एनएस दिए। एक precompiled फ़ंक्शन के लिए 111 ns क्रोकफोर्ड की विधि का उपयोग करना जो चर को ऑब्जेक्ट से बाहर खींचता है और टेम्पलेट स्ट्रिंग के निरंतर भागों के साथ उन्हें समेटता है। यह क्रोम 21 था।
जॉर्ज

13
या इसका उपयोग करें जैसे:"The {0} says {1}, {1}, {1}!".supplant(['cow', 'moo'])
रॉबर्ट मास

54

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

"मैं अपने {आयु} चर के लिए 3 साल का हूं।"

सरल प्रक्षेप छोटी स्व-निहित लिपियों के लिए काम कर सकता है, लेकिन अक्सर यह डिज़ाइन दोष के साथ आता है जो किसी भी गंभीर उपयोग को सीमित करेगा। मैं ईमानदारी से DOM टेम्पलेट पसंद करता हूं, जैसे:

<div> I am <span id="age"></span> years old!</div>

और jQuery के हेरफेर का उपयोग करें: $('#age').text(3)

वैकल्पिक रूप से, यदि आप केवल स्ट्रिंग संघनन से थक गए हैं, तो हमेशा वैकल्पिक सिंटैक्स होता है:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

4
साइड नोट: Array.join()प्रत्यक्ष ( +शैली) के संघनन की तुलना में धीमा है , क्योंकि ब्राउज़र इंजन (जिसमें V8 शामिल है, जिसमें नोड और लगभग कुछ भी जो आज जेएस चलाता है) ने इसे बड़े पैमाने पर अनुकूलित किया है और प्रत्यक्ष संयोजन के
पिलाऊ

1
सप्लेंट विधि आपको आपके द्वारा उल्लिखित स्ट्रिंग उत्पन्न करने की अनुमति देती है: {टोकन} केवल तब प्रतिस्थापित किया जाता है जब डेटा ऑब्जेक्ट में एक सदस्य शामिल होता है token- इस प्रकार प्रदान किया जाता है कि आप एक डेटा ऑब्जेक्ट प्रदान नहीं करते हैं जिसमें एक ageसदस्य है, यह ठीक होगा।
बजे क्रिस फेवरेट

1
क्रिस, मैं नहीं देखता कि यह कैसे एक समाधान है। मैं आयु चर और {आयु} स्ट्रिंग दोनों का उपयोग करने के लिए उदाहरण को आसानी से अपडेट कर सकता था। क्या आप वास्तव में इस बात को लेकर चिंतित होना चाहते हैं कि आप टेम्प्लेट कॉपी पाठ के आधार पर अपने चर का नाम क्या रख सकते हैं? - इसके अलावा, इस पोस्ट के बाद से मैं डेटा बाइंडिंग लाइब्रेरी का बहुत बड़ा प्रशंसक बन गया हूं। कुछ, जैसे RactiveJS, आपको एक वैरिएबल स्पैन के साथ एक DOM लैड डाउन से बचाएगा। और मूंछों के विपरीत, यह केवल उस पृष्ठ को अपडेट करता है।
greg.kindel

3
आपके प्राथमिक उत्तर से लगता है कि यह जावास्क्रिप्ट ब्राउज़र वातावरण में चल रहा है, भले ही प्रश्न HTML के साथ टैग न किया गया हो।
कैनन

2
आपका "सतर्कता का शब्द" supplantअनुचित है: "I am 3 years old thanks to my {age} variable.".supplant({}));बिल्कुल दिए गए स्ट्रिंग को लौटाता है। यदि ageदिया जाता है, तो कोई भी प्रिंट {और }उपयोग कर सकता है{{age}}
le_m

23

प्रयास करें sprintf पुस्तकालय (एक पूरा खुला स्रोत जावास्क्रिप्ट sprintf कार्यान्वयन)। उदाहरण के लिए:

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

vsprintf तर्कों की एक सरणी लेता है और एक स्वरूपित स्ट्रिंग देता है।


21

यदि आप वास्तव में एक अखरोट को तोड़ने के लिए स्लेजहैमर का उपयोग कर रहे हैं, तो आप प्रोटोटाइप के टेम्प्लेट सिस्टम का उपयोग कर सकते हैं :

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

प्रोटोटाइप का उपयोग करके आप सीधे एपीआई कॉल कर सकते हैं। aprototypjs.org/language/String/prototype/interpolate (आंतरिक रूप से यह टेम्पलेट का उपयोग करता है)
rvazquezglez

21

मैं इस पैटर्न का उपयोग बहुत सारी भाषाओं में करता हूं, जब मुझे नहीं पता कि इसे कैसे ठीक से करना है और अभी जल्दी से एक विचार प्राप्त करना चाहते हैं:

// JavaScript
var stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Indigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

विशेष रूप से कुशल नहीं है, मैं इसे पठनीय लगता है। यह हमेशा काम करता है, और इसकी हमेशा उपलब्ध:

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

हमेशा

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Mother'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'did unspeakable things to'

12

आप आसानी से template stringईएस 6 और ट्रांसपाइल को ईएस 5 का उपयोग करके किसी भी उपलब्ध ट्रांसपिलर का उपयोग कर सकते हैं जैसे बैबल।

const age = 3;

console.log(`I'm ${age} years old!`);

http://www.es6fiddle.net/im3c3euc/


6

कीवी की कोशिश करें , स्ट्रिंग प्रक्षेप के लिए एक हल्के वजन वाले जावास्क्रिप्ट मॉड्यूल।

तुम कर सकते हो

Kiwi.compose("I'm % years old!", [age]);

या

Kiwi.compose("I'm %{age} years old!", {"age" : age});

6

यदि आप console.logआउटपुट में इंटरपोल करना चाहते हैं , तो बस

console.log("Eruption 1: %s", eruption1);
                         ^^

यहाँ, %sजिसे "प्रारूप विनिर्देशक" कहा जाता है। console.logअंतर्निर्मित समर्थन की इस तरह की है।


1
यह एकमात्र सही उत्तर है। प्रश्न प्रक्षेप के बारे में है, न कि तार के तार।
सोसपेडरा

5

यहां एक समाधान है जिसके लिए आपको मूल्यों के साथ एक वस्तु प्रदान करने की आवश्यकता है। यदि आप पैरामीटर के रूप में ऑब्जेक्ट प्रदान नहीं करते हैं, तो यह वैश्विक चर का उपयोग करने के लिए डिफ़ॉल्ट होगा। लेकिन पैरामीटर का उपयोग करने के लिए बेहतर छड़ी, यह बहुत क्लीनर है।

String.prototype.interpolate = function(props) {
    return this.replace(/\{(\w+)\}/g, function(match, expr) {
        return (props || window)[expr];
    });
};

// Test:

// Using the parameter (advised approach)
document.getElementById("resultA").innerText = "Eruption 1: {eruption1}".interpolate({ eruption1: 112 });

// Using the global scope
var eruption2 = 116;
document.getElementById("resultB").innerText = "Eruption 2: {eruption2}".interpolate();
<div id="resultA"></div><div id="resultB"></div>


3
उपयोग न करें eval, evalबुराई है!
क्रिस

5
@ chris97ong जबकि यह "सच" है, कम से कम एक कारण ("बुराई" मदद नहीं करता है) या वैकल्पिक समाधान। उपयोग करने के आसपास लगभग हमेशा एक तरीका होता है eval, लेकिन कभी-कभी नहीं। उदाहरण के लिए, यदि ओपी एक लुकअप ऑब्जेक्ट (जैसे ग्रूवी इंटरपोलेशन कैसे काम करता है) को पास किए बिना, वर्तमान स्कोप का उपयोग करके प्रक्षेप करने का एक तरीका चाहता था, मुझे पूरा यकीन है कि evalइसकी आवश्यकता होगी। केवल पुराने "बुराई बुराई है" का सहारा न लें।
इयान

1
कभी भी इवैल का उपयोग न करें और न ही कभी इसका उपयोग करने का सुझाव दें
हैन

2
@hasenj यही कारण है कि मैंने कहा " यह सबसे अच्छा विचार नहीं हो सकता है" और एक वैकल्पिक तरीका प्रदान किया। लेकिन दुर्भाग्य से, evalस्थानीय चर को दायरे में एक्सेस करने का एकमात्र तरीका है । इसलिए इसे अस्वीकार मत करो क्योंकि यह आपकी भावनाओं को आहत करता है। Btw, मैं भी वैकल्पिक तरीका है क्योंकि यह सुरक्षित है, लेकिन पसंद करते हैं evalविधि क्या है ठीक ओपी के सवाल का जवाब, इसलिए यह जवाब में है।
लुकास ट्रेजनेवस्की

1
इसके साथ समस्या evalयह है कि दूसरे स्कोप से वर्सेस एक्सेस नहीं किया जा सकता है, इसलिए यदि आपका .interpolateकॉल दूसरे फंक्शन में है, और ग्लोबल नहीं है, तो यह काम नहीं करेगा।
जॉर्ज

2

ग्रेग किंडल के दूसरे उत्तर पर विस्तार करते हुए , आप कुछ बॉयलरप्लेट को खत्म करने के लिए एक फ़ंक्शन लिख सकते हैं:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join(' ');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

उपयोग:

var age = 7;
var years = 5;
var sentence = fmt.join('I am now', age, 'years old!');
fmt.log('In', years, 'years I will be', age + years, 'years old!');

1

मैं आपको एक उदाहरण दिखा सकता हूं:

function fullName(first, last) {
  let fullName = first + " " + last;
  return fullName;
}

function fullNameStringInterpolation(first, last) {
  let fullName = `${first} ${last}`;
  return fullName;
}

console.log('Old School: ' + fullName('Carlos', 'Gutierrez'));

console.log('New School: ' + fullNameStringInterpolation('Carlos', 'Gutierrez'));


1

ES6 के बाद से, यदि आप ऑब्जेक्ट कुंजियों में स्ट्रिंग प्रक्षेप करना चाहते हैं, तो आपको SyntaxError: expected property name, got '${'कुछ ऐसा करने पर मिलेगा :

let age = 3
let obj = { `${age}`: 3 }

आपको इसके बजाय निम्नलिखित करना चाहिए:

let obj = { [`${age}`]: 3 }

1

के लिए और अधिक को प्रतिस्थापित ES6 क्रिस नीलसन के पोस्ट के संस्करण के पूरक।

String.prototype.supplant = function (o) {
  return this.replace(/\${([^\${}]*)}/g,
    (a, b) => {
      var r = o[b];
      return typeof r === 'string' || typeof r === 'number' ? r : a;
    }
  );
};

string = "How now ${color} cow? {${greeting}}, ${greeting}, moo says the ${color} cow.";

string.supplant({color: "brown", greeting: "moo"});
=> "How now brown cow? {moo}, moo, moo says the brown cow."

0

टेम्पलेट सिंटैक्स का उपयोग करना पुराने ब्राउज़रों में विफल रहता है, महत्वपूर्ण यदि आप सार्वजनिक उपयोग के लिए HTML बना रहे हैं। संघनन का उपयोग करना थकाऊ और पढ़ने में कठिन है, खासकर यदि आपके पास कई या लंबे अभिव्यक्ति हैं, या यदि आप संख्या और स्ट्रिंग आइटम के मिश्रण को संभालने के लिए कोष्ठक का उपयोग करते हैं (दोनों जिनमें से + ऑपरेटर का उपयोग करते हैं)।

PHP ने बहुत ही संकेतन संकेतन का उपयोग करके चर और कुछ भावों के साथ उद्धृत स्ट्रिंग का विस्तार किया: $a="the color is $color";

जावास्क्रिप्ट में, एक कुशल फ़ंक्शन को इसका समर्थन करने के लिए लिखा जा सकता है: var a=S('the color is ',color);एक चर संख्या के तर्क का उपयोग करते हुए। जबकि इस उदाहरण में सहमति का कोई लाभ नहीं है, जब अभिव्यक्तियां लंबी हो जाती हैं तो यह वाक्यविन्यास स्पष्ट हो सकता है। या कोई PHP में, जावास्क्रिप्ट फ़ंक्शन का उपयोग करके अभिव्यक्ति की शुरुआत का संकेत देने के लिए डॉलर के चिह्न का उपयोग कर सकता है।

दूसरी ओर, पुराने ब्राउज़र के लिए स्ट्रिंग्स की तरह विस्तार प्रदान करने के लिए एक कुशल वर्कअराउंड फ़ंक्शन लिखना कठिन नहीं होगा। किसी ने शायद पहले ही कर लिया है।

अंत में, मैं कल्पना करता हूं कि स्प्रिंटफ (जैसा कि C, C ++ और PHP में) जावास्क्रिप्ट में लिखा जा सकता है, हालांकि यह इन अन्य समाधानों की तुलना में थोड़ा कम कुशल होगा।


0

कस्टम लचीला प्रक्षेप:

var sourceElm = document.querySelector('input')

// interpolation callback
const onInterpolate = s => `<mark>${s}</mark>`

// listen to "input" event
sourceElm.addEventListener('input', parseInput) 

// parse on window load
parseInput() 

// input element parser
function parseInput(){
  var html = interpolate(sourceElm.value, undefined, onInterpolate)
  sourceElm.nextElementSibling.innerHTML = html;
}

// the actual interpolation 
function interpolate(str, interpolator = ["{{", "}}"], cb){
  // split by "start" pattern
  return str.split(interpolator[0]).map((s1, i) => {
    // first item can be safely ignored
	  if( i == 0 ) return s1;
    // for each splited part, split again by "end" pattern 
    const s2 = s1.split(interpolator[1]);

    // is there's no "closing" match to this part, rebuild it
    if( s1 == s2[0]) return interpolator[0] + s2[0]
    // if this split's result as multiple items' array, it means the first item is between the patterns
    if( s2.length > 1 ){
        s2[0] = s2[0] 
          ? cb(s2[0]) // replace the array item with whatever
          : interpolator.join('') // nothing was between the interpolation pattern
    }

    return s2.join('') // merge splited array (part2)
  }).join('') // merge everything 
}
input{ 
  padding:5px; 
  width: 100%; 
  box-sizing: border-box;
  margin-bottom: 20px;
}

*{
  font: 14px Arial;
  padding:5px;
}
<input value="Everything between {{}} is {{processed}}" />
<div></div>


0

हालांकि आपके द्वारा वर्णित मामले के लिए टेम्प्लेट संभवत: सर्वश्रेष्ठ हैं, यदि आप अपने डेटा और / या तर्क को चलना / सरणी रूप में चाहते हैं, तो आप उपयोग कर सकते हैं String.raw

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

सरणी के रूप में डेटा के साथ, कोई प्रसार ऑपरेटर का उपयोग कर सकता है:

const args = [3, 'yesterday'];
String.raw({
  raw: ["I'm ", " years old as of ", ""]
}, ...args);

0

मैं जो ढूंढ रहा था वह नहीं मिला, फिर पाया -

यदि आप Node.js का उपयोग कर रहे हैं, तो utilइस तरह से काम करने वाले प्रारूप फ़ंक्शन के साथ एक अंतर्निहित पैकेज है:

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

संयोग से यह अब console.logNode.js में भी जायके में बनाया गया है -

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.