Yer tutucular ve ikame nesnesi kullanarak bir JavaScript dizesi biçimlendirilsin mi?

Şöyle bir dizem var: My Name is %NAME% and my age is %AGE%.

%XXX%yer tutuculardır. Oradaki değerleri bir nesneden değiştirmemiz gerekiyor.

Nesne şöyle görünür: {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

Nesneyi ayrıştırmam ve dizeyi karşılık gelen değerlerle değiştirmem gerekiyor. Böylece nihai çıktı:

Adım Mike ve yaşım 26.

Her şey ya saf javascript ya da jquery kullanılarak yapılmalıdır.

Orijinal sorunun gereksinimleri, rasgele değiştirme anahtarlarının çalışma zamanında işlenmesi gibi göründüğü için, dize enterpolasyonundan yararlanamadı.

Bununla birlikte , sadece dize enterpolasyonu yapmanız gerekiyorsa, şunu kullanabilirsiniz:

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

Dizeyi sınırlayan geri işaretlere dikkat edin, bunlar gereklidir.

Belirli OP'nin gereksinimlerine uygun bir yanıt String.prototype.replace()için, değiştirmeler için kullanabilirsiniz .

Aşağıdaki kod tüm eşleşmeleri ele alır ve değiştirilmeden dokunmaz (değiştirme değerleriniz tüm dizeler olduğu sürece, değilse aşağıya bakın).

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 .

Değiştirmelerinizden bazıları dizge değilse, önce nesnede bulunduklarından emin olun. Örneğe benzer bir formatınız varsa, yani yüzde işaretleri içine alınmışsa,in başarmak operatörü .

jsFiddle .

Bununla birlikte, biçiminizin özel bir biçimi yoksa, yani herhangi bir dizge varsa ve değiştirilen nesnenizin bir nullprototipi Object.prototype.hasOwnProperty()yoksa, değiştirilen olası alt dizelerinizin hiçbirinin prototipteki özellik adlarıyla çakışmayacağını garanti edemediğiniz sürece kullanın .

jsFiddle .

Aksi takdirde, yerine koyduğunuz dizge 'hasOwnProperty'olsaydı, sonuçta karışık bir dize alırdınız.

jsFiddle .

Bir yan not olarak, size replacementsbir Objectdeğil, bir demeniz gerekir Array.

ES6 şablon değişmezlerini kullanmaya ne dersiniz?

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

Şablon değişmezleri hakkında daha fazla bilgi ...

Kolay çalışmasını sağlamak için JQuery'yi (jquery.validate.js) kullanabilirsiniz.

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

Ya da sadece bu özelliği kullanmak istiyorsanız, bu işlevi tanımlayabilir ve şu şekilde kullanabilirsiniz:

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 ekibine kredi

Modern tarayıcıda olduğu gibi, yer tutucu, C stili işlevine benzer şekilde Chrome / Firefox'un yeni sürümü tarafından desteklenir printf().

Yer tutucular:

• %s Dize.
• %d, %iTam sayı.
• %f Kayan nokta numarası.
• %o Nesne köprüsü.

Örneğin

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

BTW, çıktıyı görmek için:

• Chrome'da, geliştirici aracını açmak için Ctrl + Shift + Jveya kısayolu F12kullanın.
• Firefox'ta kısayol kullanın Ctrl + Shift + KF12 geliştirici aracını açmak için veya kullanın.

@Update - nodejs desteği

Görünüşe göre nodejs desteklemiyor %f, bunun yerine %dnodejs'de kullanabilir . İle %dsayı sadece tamsayı, kayan sayı olarak basılacaktır.

Sadece kullan 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%"]);

Aşağıdaki gibi özel bir değiştirme işlevi kullanabilirsiniz:

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

Burada çalıştığını görebilirsiniz: http://jsfiddle.net/jfriend00/DyCwk/ .

Console.log'a daha yakın bir şey yapmak istiyorsanız, örneğin% s yer tutucularını değiştirmek gibi

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

bunu ben yazdım

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

Alacaksın

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

GÜNCELLEME

String.prototypeDize dönüşümleri ile uğraşırken faydalı olacak basit bir varyant ekledim , işte burada:

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;
   }

Bu durumda yapacaksın

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

Bu sürümü burada deneyin

Şu anda bu davranış için Javascript'te yerel bir çözüm yoktur. Etiketli şablonlar birbiriyle ilişkilidir, ancak çözmeyin.

Burada alex'in çözümünün değiştirmeler için bir nesne içeren bir yeniden düzenleyicisi var.

Çözüm, şablon değişmezlerinde ( yerine ) yerel Javascript enterpolasyonu gibi yer tutucular için ok işlevlerini ve benzer bir sözdizimini kullanır . Ayrıca , değiştirmelerin adlarına sınırlayıcılar ( ) eklemeye gerek yoktur .{}%%%

İki çeşni vardır: tanımlayıcı ve indirgenmiş.

Açıklayıcı çözüm:

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

Azaltılmış çözüm:

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

Bu tam olarak bunu yapmanıza izin verir

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

GitHub: https://github.com/tjcafferkey/stringinject

Aşağıdakileri yaparak:

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

// My username is tjcafferkey on Git

İşte bunu çalışma zamanında dinamik olarak es6 şablon değişmezlerini kullanarak yapmanın başka bir yolu.

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

Hızlı bir örnek olarak:

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

Çıktı:

jack 40 yaşında

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?"

Dizeyi kolayca biçimlendirmenizi sağlayan bir kod yazdım.

Bu işlevi kullanın.

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;
}

Misal

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

Çıktı

Adım Mike ve yaşım 26