javascript - मैं जावास्क्रिप्ट में स्ट्रिंग इंटरपोलेशन कैसे कर सकता हूं?




string string-interpolation (10)

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

var age = 3;

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

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


tl; डॉ

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

व्याख्या

ईसीएमएस्क्रिप्ट 5 विनिर्देशों के अनुसार, ऐसा करने का कोई सीधा तरीका नहीं है, लेकिन ईसीएमएस्क्रिप्ट 6 में developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , जिन्हें स्पेस के प्रारूपण के दौरान quasi-literals भी कहा जाता है। इन्हें इस तरह प्रयोग करें:

> 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 विनिर्देशों को developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , लेकिन अभी तक सभी प्रमुख ब्राउज़रों द्वारा लागू किया जाना बाकी है।
मोज़िला डेवलपर नेटवर्क पृष्ठों के मुताबिक, यह निम्न संस्करणों में शुरू होने वाले बुनियादी समर्थन के लिए लागू किया जाएगा: फ़ायरफ़ॉक्स 34, क्रोम 41, इंटरनेट एक्सप्लोरर 12. यदि आप ओपेरा, सफारी या इंटरनेट एक्सप्लोरर उपयोगकर्ता हैं और अब इसके बारे में उत्सुक हैं , इस टेस्ट बेड को तब तक खेलने के लिए इस्तेमाल किया जा सकता है जब तक कि हर किसी के लिए इसका समर्थन न हो जाए।


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

const age = 3;

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

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


एक और स्लेजहैमर: jquery-tmpl (jQuery के साथ templating)।


डगलस String.prototype.supplant जावास्क्रिप्ट में एक 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' }));

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


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

// 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'

अद्यतन : मैंने केवल पहले की बजाय सभी घटनाओं को प्रतिस्थापित करने के लिए जावास्क्रिप्ट संस्करण अपडेट किया है।


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

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

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


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

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>


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

"मैं अपने {आयु} परिवर्तनीय के लिए 3 साल का धन्यवाद हूं।"

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

<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(" ");

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

तुम कर सकते हो

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

या

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

sprintf कोशिश करो। उदाहरण के लिए:

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





string-interpolation