Wie interpoliert man Variablen in Strings in JavaScript, ohne Verkettung?

Question

Ich weiß, dass wir in PHP etwas Ähnliches machen können:

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

Ausgabe: "I pity the foo"

Ich habe mich gefragt, ob das Gleiche auch in JavaScript möglich ist. Die Verwendung von Variablen innerhalb von Strings ohne Verkettung - das sieht prägnanter und eleganter aus.

Answer 1

Sie können folgende Vorteile in Anspruch nehmen Vorlage Literale und verwenden Sie diese Syntax:

`String text ${expression}`

Schablonenliterale werden von der Rückwärtshaken (` `) (Grabakzent) anstelle von doppelten oder einfachen Anführungszeichen.

Diese Funktion wurde in ES2015 (ES6) eingeführt.

Beispiel

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

Ist das nicht toll?

Bonus:

Es ermöglicht auch für mehrzeilige Zeichenfolgen in Javascript ohne escaping, die für Vorlagen groß ist:

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

_Browser-Unterstützung :_

Da diese Syntax von älteren Browsern (vor allem Internet Explorer) nicht unterstützt wird, sollten Sie Babel /Webpack, um Ihren Code in ES5 zu transpilieren, damit er überall läuft.

---

Nebenbei bemerkt:

Ab IE8+ können Sie die grundlegende String-Formatierung innerhalb von console.log :

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

Answer 2

Vor Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, nein, das war in Javascript nicht möglich. Du müsstest darauf zurückgreifen:

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

Answer 3

Vor Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, nein. Obwohl Sie versuchen könnten sprintf für JavaScript um auf halbem Weg dorthin zu gelangen:

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

Answer 4

Nun, das könnte man tun, aber es ist nicht besonders allgemein

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

Sie könnten leicht eine Funktion schreiben, die dies auf intelligente Weise erledigt, wenn Sie es wirklich nötig hätten

Answer 5

Vollständige und gebrauchsfertige Antwort für <ES6 :

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

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

Aufruf als

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

Zum Anbringen an String.prototype :

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

Dann verwenden Sie als :

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

Wenn Sie auf >ES6 dann können Sie das auch tun:

let first = 'Neo'; 
`My firstname is ${first}`;