Bu kodu düşünün:

var age = 3;

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

Dize birleştirme dışında, bir değişkenin değerini bir dizeye eklemenin başka yolları var mı?

ES6'dan bu yana, şablon değişmezlerini kullanabilirsiniz :

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

PS ters tırnakların kullanımına dikkat: ``.

tl; Dr.

Varsa, ECMAScript 2015'in Şablon Dizesi Değişmezlerini kullanın.

açıklama

ECMAScript 5 spesifikasyonlarına göre bunu yapmanın doğrudan bir yolu yoktur, ancak ECMAScript 6, spesifikasyonun hazırlanması sırasında yarı değişmez olarak da bilinen şablon dizelerine sahiptir . Bunları şu şekilde kullanın:

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

İçindeki herhangi bir geçerli JavaScript ifadesini kullanabilirsiniz {}. Örneğin:

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

Diğer önemli şey, artık çok satırlı dizeler hakkında endişelenmenize gerek yok. Bunları basitçe şöyle yazabilirsiniz

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

Not: Yukarıda gösterilen tüm şablon dizelerini değerlendirmek için io.js v2.4.0 kullandım. Yukarıda gösterilen örnekleri test etmek için en son Chrome'u da kullanabilirsiniz.

Not: ES6 Teknik Özellikleri şimdi sonlandırılmıştır , ancak henüz tüm büyük tarayıcılar tarafından uygulanmamıştır.
Göre Mozilla Geliştirici Ağı sayfalarında kullanıcı bir Opera, Safari veya Internet Explorer konum ve şimdi bu merak ediyorsanız Firefox 34, Chrome 41, Internet Explorer 12: Bu aşağıdaki sürümlerinde başlayan temel destek için uygulanacak , bu test yatağı herkes buna destek olana kadar oyun oynamak için kullanılabilir.

Douglas Crockford'un Düzeltici JavaScript'i bir String.prototype.supplantişlev içerir . Kısa, tanıdık ve kullanımı kolaydır:

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

String'in prototipini değiştirmek istemezseniz, onu her zaman bağımsız olarak uyarlayabilir veya başka bir ad alanına veya başka bir yere yerleştirebilirsiniz.

Dikkat kelimesi: kendi sınırlayıcılarından kaçmanıza izin vermeyen herhangi bir şablon sisteminden kaçının. Örneğin, supplant()burada belirtilen yöntemi kullanarak aşağıdakileri çıkarmanın bir yolu yoktur .

"{Age} değişkenim sayesinde 3 yaşındayım."

Basit enterpolasyon, küçük müstakil scriptler için işe yarayabilir, ancak genellikle herhangi bir ciddi kullanımı sınırlandıracak bu tasarım hatası ile birlikte gelir. Dürüst olmak gerekirse aşağıdaki gibi DOM şablonları tercih ederim:

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

Ve jQuery manipülasyonunu kullanın: $('#age').text(3)

Alternatif olarak, dize birleştirme işleminden bıktıysanız, her zaman alternatif sözdizimi vardır:

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

Sprintf kütüphanesini deneyin (tam açık kaynaklı bir JavaScript sprintf uygulaması). Örneğin:

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

vsprintf bir dizi bağımsız değişken alır ve biçimlendirilmiş bir dize döndürür.

Henüz doğru bir şekilde nasıl yapılacağını bilmediğimde ve sadece hızlı bir şekilde bir fikir edinmek istediğimde bu deseni birçok dilde kullanıyorum:

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

Özellikle verimli olmasa da okunabilir buluyorum. Her zaman çalışır ve her zaman kullanılabilir:

' 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")

HER ZAMAN

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

Bir somunu kırmak için balyoz kullanmak istiyorsanız, Prototip'in şablon sistemini kullanabilirsiniz :

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

template stringES6 kullanarak kolayca yapabilir ve babel gibi mevcut herhangi bir transpilar kullanarak ES5'e aktarabilirsiniz.

const age = 3;

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

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

Dize enterpolasyonu için hafif bir JavaScript modülü olan kivi'yi deneyin .

Yapabilirsin

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

veya

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

console.logÇıktıda enterpolasyon yapmak istiyorsanız ,

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

Burada %s"format belirleyici" denir. console.logbu tür enterpolasyon desteğine sahiptir.

Değerleri olan bir nesneyi sağlamanızı gerektiren bir çözüm. Bir nesneyi parametre olarak sağlamazsanız, varsayılan olarak global değişkenleri kullanır. Ancak parametreyi kullanmaya daha iyi yapışır, çok daha temizdir.

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>

Greg Kindel'in ikinci cevabına genişleyerek, kazan plakasının bazılarını ortadan kaldırmak için bir işlev yazabilirsiniz:

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

Kullanımı:

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

Size bir örnek gösterebilirim:

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

ES6'dan beri, nesne anahtarlarında dize enterpolasyonu yapmak istiyorsanız, şöyle bir SyntaxError: expected property name, got '${'şey yaparsanız bir elde edersiniz:

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

Bunun yerine aşağıdakileri yapmalısınız:

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

@Chris Nielsen'in gönderisinin ES6 sürümü için daha fazlasını destekleyin .

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

Herkese açık kullanım için HTML oluşturuyorsanız, eski tarayıcılarda şablon sözdiziminin kullanılması başarısız olur. Birleştirme kullanmak, özellikle çok veya uzun ifadeleriniz varsa veya sayı ve dize öğelerinin (her ikisi de + işlecini kullanan) karışımlarını işlemek için parantez kullanmanız gerekiyorsa, zahmetli ve okunması zordur.

PHP değişkenleri içeren alıntılanmış dizeleri ve hatta bazı ifadeleri çok kompakt bir gösterim kullanarak genişletir: $a="the color is $color";

JavaScript'te, aşağıdakileri desteklemek için etkili bir işlev yazılabilir: var a=S('the color is ',color);değişken sayıda bağımsız değişken kullanılarak. Bu örnekte birleştirmeye göre bir avantaj olmamakla birlikte, ifadeler uzadığında bu sözdizimi daha net olabilir. Veya PHP'de olduğu gibi bir JavaScript işlevi kullanarak bir ifadenin başlangıcını belirtmek için dolar işareti kullanılabilir.

Öte yandan, eski tarayıcılar için dizelerin şablon benzeri genişlemesini sağlamak üzere etkili bir geçici çözüm işlevi yazmak zor olmaz. Birisi muhtemelen bunu zaten yapmıştı.

Son olarak, sprintf'in (C, C ++ ve PHP'de olduğu gibi) JavaScript'te yazılabileceğini, ancak bu diğer çözümlerden biraz daha az verimli olacağını hayal ediyorum.

Özel esnek enterpolasyon:

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>

Şablonlar muhtemelen tanımladığınız durum için en iyiyken, verilerinizi ve / veya bağımsız değişkenlerinizi yinelenebilir / dizi biçiminde varsa veya istiyorsanız, kullanabilirsiniz String.raw.

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

Veriler bir dizi olarak yayılma işlecini kullanabilirsiniz:

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

Aradığımı bulamadım, sonra buldum -

Node.js kullanıyorsanız, aşağıdaki utilgibi çalışan bir biçim işlevine sahip yerleşik bir paket vardır:

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

Tesadüfen bu artık console.logNode.js'de de lezzetlere yerleştirilmiştir -

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError