प्लेसहोल्डर्स और प्रतिस्थापन की एक वस्तु का उपयोग करके एक जावास्क्रिप्ट स्ट्रिंग प्रारूपित करें?

Question 1

मेरे पास कहने के लिए एक स्ट्रिंग है: My Name is %NAME% and my age is %AGE%.

%XXX%प्लेसहोल्डर हैं। हमें किसी वस्तु से मूल्यों को स्थानापन्न करने की आवश्यकता है।

ऑब्जेक्ट ऐसा दिखता है: {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

मुझे ऑब्जेक्ट को पार्स करने की आवश्यकता है और स्ट्रिंग को समान मूल्यों के साथ बदलना है। ताकि अंतिम उत्पादन होगा:

मेरा नाम माइक है और मेरी उम्र 26 है।

पूरी चीज़ को या तो शुद्ध जावास्क्रिप्ट या jquery का उपयोग करना होगा।

Question 2

मूल प्रश्न की आवश्यकताओं को स्पष्ट रूप से स्ट्रिंग प्रक्षेप से लाभ नहीं मिल सकता है, क्योंकि ऐसा लगता है कि यह मनमाना प्रतिस्थापन कुंजी का रनटाइम प्रसंस्करण है।

हालांकि , अगर आपको सिर्फ स्ट्रिंग इंटरपोलेशन करना था, तो आप उपयोग कर सकते हैं:

const str = `My name is ${replacements.name} and my age is ${replacements.age}.`

नोट स्ट्रिंग को सीमांकित करने वाले बैकटिक्स की आवश्यकता होती है।

विशेष ओपी की आवश्यकता पर मुकदमा चलाने के जवाब के लिए, आप String.prototype.replace()प्रतिस्थापन के लिए उपयोग कर सकते हैं ।

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

var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
    str = 'My Name is %NAME% and my age is %AGE%.';

str = str.replace(/%\w+%/g, function(all) {
   return replacements[all] || all;
});

jsFiddle ।

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

jsFiddle ।

हालाँकि, यदि आपके प्रारूप में कोई विशेष प्रारूप नहीं है, अर्थात कोई स्ट्रिंग, और आपके प्रतिस्थापन ऑब्जेक्ट में कोई nullप्रोटोटाइप, उपयोग नहीं हैObject.prototype.hasOwnProperty() , जब तक कि आप गारंटी नहीं दे सकते कि आपके संभावित प्रतिस्थापित प्रतिस्थापन में से कोई भी प्रोटोटाइप पर संपत्ति के नामों के साथ टकराएगा।

jsFiddle ।

अन्यथा, यदि आपका प्रतिस्थापन स्ट्रिंग था 'hasOwnProperty', तो आपको परिणामी गड़बड़ स्ट्रिंग मिलेगी।

jsFiddle ।

एक तरफ ध्यान दें के रूप में, आप बुलाया जाना चाहिए replacementsएक Object, एक नहीं Array।

Question 3

ES6 टेम्पलेट शाब्दिक का उपयोग कैसे करें?

var a = "cat";
var b = "fat";
console.log(`my ${a} is ${b}`); //notice back-ticked string

टेम्पलेट शाब्दिक के बारे में अधिक ...

Question 4

इसे आसानी से काम करने के लिए आप JQuery (jquery.validate.js) का उपयोग कर सकते हैं।

$.validator.format("My name is {0}, I'm {1} years old",["Bob","23"]);

या यदि आप उस सुविधा का उपयोग करना चाहते हैं, तो आप उस फ़ंक्शन को परिभाषित कर सकते हैं और जैसे चाहें उपयोग कर सकते हैं

function format(source, params) {
    $.each(params,function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    })
    return source;
}
alert(format("{0} is a {1}", ["Michael", "Guy"]));

jquery.validate.js टीम को क्रेडिट

Question 5

आधुनिक ब्राउज़र के साथ, प्लेसहोल्डर क्रोम शैली या फ़ायरफ़ॉक्स के नए संस्करण द्वारा समर्थित है, सी स्टाइल फ़ंक्शन के समान printf()।

प्लेसहोल्डर:

%s स्ट्रिंग।
%d, %iपूर्णांक संख्या।
%f चल बिन्दु संख्या।
%o वस्तु हाइपरलिंक।

जैसे

console.log("generation 0:\t%f, %f, %f", a1a1, a1a2, a2a2);

BTW, आउटपुट देखने के लिए:

Chrome में, शॉर्टकट का उपयोग करें Ctrl + Shift + Jया F12डेवलपर टूल खोलें।
फ़ायरफ़ॉक्स में, शॉर्टकट का उपयोग करें Ctrl + Shift + Kया F12डेवलपर टूल खोलें।

@ यूपीडेट - नोडज समर्थन

%fइसके बजाय, नोडज का समर्थन नहीं करते , %dनोडज में उपयोग कर सकते हैं । %dनंबर के साथ फ्लोटिंग नंबर के रूप में मुद्रित किया जाएगा, न कि केवल पूर्णांक।

Question 6

महज प्रयोग करें replace()

var values = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};
var substitutedString = "My Name is %NAME% and my age is %AGE%.".replace("%NAME%", $values["%NAME%"]).replace("%AGE%", $values["%AGE%"]);

Question 7

आप इस तरह से एक कस्टम प्रतिस्थापन फ़ंक्शन का उपयोग कर सकते हैं:

var str = "My Name is %NAME% and my age is %AGE%.";
var replaceData = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};

function substitute(str, data) {
    var output = str.replace(/%[^%]+%/g, function(match) {
        if (match in data) {
            return(data[match]);
        } else {
            return("");
        }
    });
    return(output);
}

var output = substitute(str, replaceData);

आप इसे यहाँ काम कर सकते हैं: http://jsfiddle.net/jfriend00/DyCwk/ ।

Question 8

यदि आप कंसोल के करीब कुछ करना चाहते हैं। जैसे% s प्लेसहोल्डर्स को प्रतिस्थापित करना

>console.log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>Hello Loreto how are you today is everything allright?

मैंने यह लिखा

function log() {
  var args = Array.prototype.slice.call(arguments);
  var rep= args.slice(1, args.length);
  var i=0;
  var output = args[0].replace(/%s/g, function(match,idx) {
    var subst=rep.slice(i, ++i);
    return( subst );
  });
   return(output);
}
res=log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright");
document.getElementById("console").innerHTML=res;

<span id="console"/>

स्निपेट का विस्तार करें

आपको मिल जायेगा

>log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>"Hello Loreto how are you today is everything allright?"

अपडेट करें

मैंने String.prototypeस्ट्रिंग परिवर्तनों से निपटने के लिए एक सरल संस्करण को उपयोगी के रूप में जोड़ा है , यह है:

String.prototype.log = function() {
    var args = Array.prototype.slice.call(arguments);
    var rep= args.slice(0, args.length);
    var i=0;
    var output = this.replace(/%s|%d|%f|%@/g, function(match,idx) {
      var subst=rep.slice(i, ++i);
      return( subst );
    });
    return output;
   }

उस मामले में आप करेंगे

"Hello %s how are you %s is everything %s?".log("Loreto", "today", "allright")
"Hello Loreto how are you today is everything allright?"

यहाँ इस संस्करण की कोशिश करो

Question 9

वर्तमान में इस व्यवहार के लिए जावास्क्रिप्ट में अभी भी कोई देशी समाधान नहीं है। टैग किए गए टेम्पलेट कुछ संबंधित हैं, लेकिन इसे हल न करें।

यहाँ प्रतिस्थापन के लिए ऑब्जेक्ट के साथ एलेक्स के समाधान का एक रिफ्लेक्टर है ।

समाधान तीर फ़ंक्शंस और प्लेसहोल्डर्स के लिए एक समान सिंटैक्स का उपयोग करता है, जो मूल रूप से जावास्क्रिप्ट शाब्दिक प्रक्षेप में टेम्पलेट शाब्दिक (के {}बजाय %%) है। इसके अलावा सीमांकक को शामिल करने की कोई आवश्यकता नहीं है (% प्रतिस्थापन के नामों ) ।

दो स्वाद हैं: वर्णनात्मक और कम।

वर्णनात्मक समाधान:

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(
  /{\w+}/g,
  placeholderWithDelimiters => {
    const placeholderWithoutDelimiters = placeholderWithDelimiters.substring(
      1,
      placeholderWithDelimiters.length - 1,
    );
    const stringReplacement = replacements[placeholderWithoutDelimiters] || placeholderWithDelimiters;
    return stringReplacement;
  },
);

console.log(string);

स्निपेट का विस्तार करें

कम समाधान:

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(/{\w+}/g, placeholder =>
  replacements[placeholder.substring(1, placeholder.length - 1)] || placeholder,
);

console.log(string);

स्निपेट का विस्तार करें

Question 10

इससे आप ठीक वैसा ही कर सकते हैं

NPM: https://www.npmjs.com/package/stringinject

गिटहब: https://github.com/tjcafferkey/stringinject

निम्नलिखित कार्य करके:

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

// My username is tjcafferkey on Git

Question 11

यहां रनटाइम के दौरान es6 टेम्पलेट शाब्दिक का उपयोग करके ऐसा करने का एक और तरीका है।

const str = 'My name is ${name} and my age is ${age}.'
const obj = {name:'Simon', age:'33'}


const result = new Function('const {' + Object.keys(obj).join(',') + '} = this.obj;return `' + str + '`').call({obj})

document.body.innerHTML = result

स्निपेट का विस्तार करें

Question 12

एक त्वरित उदाहरण के रूप में:

var name = 'jack';
var age = 40;
console.log('%s is %d yrs old',name,age);

आउटपुट है:

जैक 40 साल पुराना है

Question 13

const stringInject = (str = '', obj = {}) => {
  let newStr = str;
  Object.keys(obj).forEach((key) => {
    let placeHolder = `#${key}#`;
    if(newStr.includes(placeHolder)) {
      newStr = newStr.replace(placeHolder, obj[key] || " ");
    }
  });
  return newStr;
}

Input: stringInject("Hi #name#, How are you?", {name: "Ram"});
Output: "Hi Ram, How are you?"

Question 14

मैंने एक कोड लिखा है जो आपको स्ट्रिंग को आसानी से प्रारूपित करने देता है।

इस फ़ंक्शन का उपयोग करें।

function format() {
    if (arguments.length === 0) {
        throw "No arguments";
    }
    const string = arguments[0];
    const lst = string.split("{}");
    if (lst.length !== arguments.length) {
        throw "Placeholder format mismatched";
    }
    let string2 = "";
    let off = 1;
    for (let i = 0; i < lst.length; i++) {
        if (off < arguments.length) {
            string2 += lst[i] + arguments[off++]
        } else {
            string2 += lst[i]
        }
    }
    return string2;
}

उदाहरण

format('My Name is {} and my age is {}', 'Mike', 26);

उत्पादन

मेरा नाम माइक है और मेरी उम्र 26 है