Vollzeitblogger

JavaScript ES6 Template Strings

January 28, 2016

Mit ES6/ES2015 ist es nun möglich Strings mit Variablen zu definieren. Die Variablen müssen nu nicht mehr mit dem + an den richtigen Stellen in den String gekettet werden, wobei das + in JavaScript auch kein eindeutiger Verkettungsoperator wie . in PHP ist, sondern auch das arithmetische Plus.

Mit den ES6 Templates in JavaScript kann man definierte Variablen durch ihren Namen mit folgender Syntax verwenden: ${variablenName}.

Beispiel:

<code style="background-color: transparent" class="language-javascript"
  >var name = 'Jonathan'; console.log(`Guten Morgen, ${name}!`); // output:
  Guten Morgen, Jonathan!
</code>

Wenn der auszugebende String nicht in Backticks (`) ist, wird der Platzhalter nicht ausgetauscht:

<code style="background-color: transparent" class="language-javascript"
  >var name = 'Jonathan'; console.log('Guten Morgen, ${name}!'); // output:
  Guten Morgen, ${name}!
</code>

Diese Methode um Platzhalter in Strings zu ersetzen wird meist string interpolation genannt und ist mit ES6/ES2015 auch in JavaScript möglich.