JavaScript'te dizelerdeki değişkenleri birleştirmeden nasıl enterpolasyon uygulayabilirim?

PHP biz böyle bir şey yapabilir biliyorum:

$hello = "foo";
$my_string = "I pity the $hello";

Çıktı: "I pity the foo"

Aynı şeyin JavaScript'te de mümkün olup olmadığını merak ediyordum. Birleştirmeyi kullanmadan dizelerin içindeki değişkenleri kullanmak - yazmak daha özlü ve zarif görünüyor.

Şablon Değişmezlerinden yararlanabilir ve bu sözdizimini kullanabilirsiniz:

`String text ${expression}`

Şablon değişmez değerleri , çift veya tek tırnak yerine geri işaretiyle (``) (mezar aksanı) çevrelenir .

Bu özellik ES2015'te (ES6) tanıtıldı.

Misal

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.

Ne kadar düzenli?

Bonus:

Ayrıca, şablonlar için harika olan, kaçmadan javascript'te çok satırlı dizelere izin verir:

return `
    <div class="${foo}">
         ...
    </div>
`;

Tarayıcı desteği :

Bu sözdizimi eski tarayıcılar (çoğunlukla Internet Explorer) tarafından desteklenmediğinden , kodunuzu her yerde çalışacağından emin olmak için kodunuzu ES5'e aktarmak için Babel / Webpack'i kullanmak isteyebilirsiniz .

Kenar notu:

IE8 + 'dan başlayarak içindeki temel dize biçimlendirmesini kullanabilirsiniz console.log:

console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.

Öncesinde Firefox 34 / javascript mümkün değildi Krom 41 / Safari 9 / Microsoft Kenar, hayır. Aşağıdakilere başvurmanız gerekir:

var hello = "foo";
var my_string = "I pity the " + hello;

Önce Firefox 34 / Krom 41 / Safari 9 / Microsoft Kenar, hayır. JavaScript'in yarısına ulaşmak için sprintf'i deneyebilirsiniz.

var hello = "foo";
var my_string = sprintf("I pity the %s", hello);

Peki bunu yapabilirsin, ama genel esp değil

'I pity the $fool'.replace('$fool', 'fool')

Gerçekten ihtiyacınız varsa bunu akıllıca yapan bir işlevi kolayca yazabilirsiniz.

Komple cevap, kullanıma hazır:

 var Strings = {
        create : (function() {
                var regexp = /{([^{]+)}/g;

                return function(str, o) {
                     return str.replace(regexp, function(ignore, key){
                           return (key = o[key]) == null ? '' : key;
                     });
                }
        })()
};

Şu şekilde ara:

Strings.create("My firstname is {first}, my last name is {last}", {first:'Neo', last:'Andersson'});

String.prototype'e eklemek için:

String.prototype.create = function(o) {
           return Strings.create(this, o);
}

Ardından şu şekilde kullanın:

"My firstname is ${first}".create({first:'Neo'});

Bu tür bir şablonlama yapmak için bu javascript işlevini kullanabilirsiniz. Tüm kütüphaneyi eklemenize gerek yoktur.

function createStringFromTemplate(template, variables) {
    return template.replace(new RegExp("\{([^\{]+)\}", "g"), function(_unused, varName){
        return variables[varName];
    });
}

createStringFromTemplate(
    "I would like to receive email updates from {list_name} {var1} {var2} {var3}.",
    {
        list_name : "this store",
        var1      : "FOO",
        var2      : "BAR",
        var3      : "BAZ"
    }
);

Çıktı :"I would like to receive email updates from this store FOO BAR BAZ."

Bir işlevi String.replace () işlevine bağımsız değişken olarak kullanmak ECMAScript v3 özelliklerinin bir parçasıydı. Daha fazla ayrıntı için bu SO cevabına bakınız.

CoffeeScript yazmak isterseniz şunları yapabilirsiniz:

hello = "foo"
my_string = "I pity the #{hello}"

CoffeeScript aslında javascript IS, ancak çok daha iyi bir sözdizimi ile.

CoffeeScript'e genel bir bakış için bu başlangıç ​​kılavuzuna bakın .

Eğer gibi, I microtemplating için interpolasyon yapmak çalışıyorsanız Mustache.js bu amaçla.

Bu npm paketini yazdım stringinject https://www.npmjs.com/package/stringinject aşağıdakileri yapmanızı sağlar

var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]);

{0} ve {1} yerine dizi öğelerini koyar ve aşağıdaki dizeyi döndürür

"this is a test string for stringInject"

veya yer tutucuları nesne anahtarları ve değerlerle değiştirebilirsiniz:

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

"My username is tjcafferkey on Github" 

Arka kene kullanırdım ''.

let name1 = 'Geoffrey';
let msg1 = `Hello ${name1}`;
console.log(msg1); // 'Hello Geoffrey'

Ama name1ne zaman yarattığını bilmiyorsan msg1.

msg1Bir API'dan geliyorsa örnek için .

Kullanabilirsiniz :

let name2 = 'Geoffrey';
let msg2 = 'Hello ${name2}';
console.log(msg2); // 'Hello ${name2}'

const regexp = /\${([^{]+)}/g;
let result = msg2.replace(regexp, function(ignore, key){
    return eval(key);
});
console.log(result); // 'Hello Geoffrey'

Onun yerine ${name2}değeri gelecek .

Burada bahsedilen harici kütüphaneleri görmüyorum, ancak Lodash _.template(),

https://lodash.com/docs/4.17.10#template

Kütüphaneyi zaten kullanıyorsanız, kontrol edilmeye değer ve Lodash'ı kullanmıyorsanız, her zaman npm'den kiraz toplama yöntemlerini kullanabilirsiniz, npm install lodash.templateböylece yükü kesebilirsiniz.

En basit hal -

var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

Bir sürü yapılandırma seçeneği de var -

_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'

Özel sınırlayıcıları en ilginç buldum.

String.format()Java'ya benzer bir yöntem oluşturma

StringJoin=(s, r=[])=>{
  r.map((v,i)=>{
    s = s.replace('%'+(i+1),v)
  })
return s
}

kullanım

console.log(StringJoin('I can %1 a %2',['create','method'])) //output: 'I can create a method'

2020 barış teklifi:

Console.WriteLine("I {0} JavaScript!", ">:D<");

console.log(`I ${'>:D<'} C#`)

Basitçe kullanın:

var util = require('util');

var value = 15;
var s = util.format("The variable value is: %s", value)

String.prototype.interpole = function () {
    var c=0, txt=this;
    while (txt.search(/{var}/g) > 0){
        txt = txt.replace(/{var}/, arguments[c]);
        c++;
    }
    return txt;
}

uso:

var hello = "foo";
var my_string = "I pity the {var}".interpole(hello);
//resultado "I pity the foo"

var hello = "foo";

var my_string ="I pity the";

console.log (my_string, merhaba)