Wie interpoliere ich Variablen in Strings in JavaScript ohne Verkettung?

408

Ich weiß, dass wir in PHP so etwas tun können:

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

Ausgabe: "I pity the foo"

Ich habe mich gefragt, ob dasselbe auch in JavaScript möglich ist. Verwenden von Variablen in Zeichenfolgen ohne Verkettung - das Schreiben sieht prägnanter und eleganter aus.

DMin
quelle

Antworten:

694

Sie können Vorlagenliterale nutzen und diese Syntax verwenden:

`String text ${expression}`

Vorlagenliterale werden anstelle von doppelten oder einfachen Anführungszeichen durch das Back-Tick (``) (schwerwiegender Akzent) eingeschlossen.

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

Beispiel

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

Wie ordentlich ist das?

Bonus:

Es ermöglicht auch mehrzeilige Zeichenfolgen in Javascript, ohne zu maskieren, was sich hervorragend für Vorlagen eignet:

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

Browserunterstützung :

Da diese Syntax von älteren Browsern (meistens Internet Explorer) nicht unterstützt wird, möchten Sie möglicherweise Babel / Webpack verwenden, um Ihren Code in ES5 zu transpilieren und sicherzustellen, dass er überall ausgeführt wird.


Randnotiz:

Ab IE8 + können Sie die grundlegende Formatierung von Zeichenfolgen verwenden console.log:

console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.
bformet
quelle
56
Verpassen Sie nicht die Tatsache, dass die Vorlagenzeichenfolge durch hintere Häkchen (`) anstelle Ihrer normalen Anführungszeichen begrenzt ist. "${foo}"ist buchstäblich $ {foo} `${foo}`ist das, was Sie tatsächlich wollen
Hovis Biddle
1
Es gibt auch viele Transpiler, die ES6 in ES5 verwandeln, um das Kompatibilitätsproblem zu beheben!
Nick
wenn ich a oder b Wert ändere. console.log ( Fifteen is ${a + b}.); ändert sich nicht dynamisch. es zeigt immer, dass fünfzehn 15 ist.
Dharan
168

Vor Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge war dies in Javascript nicht möglich. Sie müssten auf Folgendes zurückgreifen:

var hello = "foo";
var my_string = "I pity the " + hello;
Sarfraz
quelle
2
Es wird bald in Javascript (ES6) mit Template Strings möglich sein, siehe meine ausführliche Antwort unten.
Bformet
Es ist möglich, wenn Sie CoffeeScript schreiben möchten, das tatsächlich Javascript mit einer besseren Syntax ist.
Bformet
1
Toller Ruf für ältere Browser :)
Kirsty Marks
1
Ich habe Mitleid mit dem FOO !!! das ist großartig
Adam Hughes
32

Nun, Sie könnten dies tun, aber es ist nicht besonders allgemein

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

Sie könnten leicht eine Funktion schreiben, die dies intelligent macht, wenn Sie es wirklich brauchen

Scott Evernden
quelle
Eigentlich ziemlich anständig.
Herr B
1
Diese Antwort ist gut, wenn Sie Vorlagenzeichenfolge in der Datenbank speichern und bei Bedarf verarbeiten müssen
Dima Escaroda
Gut, es funktioniert gut. sehr einfach, kam mir aber nicht in den Sinn.
Sam
13

Vollständige Antwort, gebrauchsfertig:

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

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

Rufen Sie an als

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

So hängen Sie es an String.prototype an:

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

Dann verwenden als:

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

Sie können diese Javascript-Funktion verwenden, um diese Art von Vorlagen zu erstellen. Es ist nicht erforderlich, eine gesamte Bibliothek einzuschließen.

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

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

Die Verwendung einer Funktion als Argument für die Funktion String.replace () war Teil der ECMAScript v3-Spezifikation. Weitere Informationen finden Sie in dieser SO-Antwort .

Eric Seastrand
quelle
Ist das effizient?
mmm
Die Effizienz hängt weitgehend vom Browser des Benutzers ab, da diese Lösung das "schwere Heben" des Abgleichs des regulären Ausdrucks und des Ersetzens von Zeichenfolgen an die nativen Funktionen des Browsers delegiert. In jedem Fall ist die Effizienz kein so großes Problem, da dies ohnehin auf der Browserseite geschieht. Wenn Sie serverseitiges Template (für Node.JS oder ähnliches) möchten, sollten Sie die von @bformet beschriebene ES6-Template-Literal-Lösung verwenden, da diese wahrscheinlich effizienter ist.
Eric Seastrand
9

Wenn Sie gerne CoffeeScript schreiben, können Sie Folgendes tun:

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

CoffeeScript ist eigentlich Javascript, aber mit einer viel besseren Syntax.

Eine Übersicht über CoffeeScript finden Sie in dieser Anleitung für Anfänger .

bformet
quelle
4

Wenn Sie versuchen, Interpolation für Mikrotemplating durchzuführen, mag ich Moustache.js für diesen Zweck.

Joe Martinez
quelle
3

Ich habe dieses npm-Paket stringinject https://www.npmjs.com/package/stringinject geschrieben , mit dem Sie Folgendes tun können

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

Dadurch werden {0} und {1} durch die Array-Elemente ersetzt und die folgende Zeichenfolge zurückgegeben

"this is a test string for stringInject"

oder Sie können Platzhalter durch Objektschlüssel und Werte wie folgt ersetzen:

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

"My username is tjcafferkey on Github" 
tjcafferkey
quelle
3

Ich würde das Back-Tick `` verwenden.

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

Aber wenn Sie nicht wissen, name1wann Sie erstellenmsg1 .

Zum Beispiel, wenn msg1es von einer API stammt.

Sie können verwenden:

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'

Es wird durch ${name2}seinen Wert ersetzt.

gturquais
quelle
2

Hier werden keine externen Bibliotheken erwähnt, aber Lodash hat _.template():

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

Wenn Sie die Bibliothek bereits nutzen, lohnt es sich, sie zu überprüfen. Wenn Sie Lodash nicht verwenden, können Sie ab npm immer Methoden auswählen, npm install lodash.templateum den Overhead zu reduzieren.

Einfachste Form -

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

Es gibt auch eine Reihe von Konfigurationsoptionen -

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

Ich fand benutzerdefinierte Trennzeichen am interessantesten.

Mark Carpenter Jr.
quelle
0

Erstellen Sie eine ähnliche Methode wie String.format()Java

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

verwenden

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

Friedenszitat von 2020:

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

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

Verwenden Sie einfach:

var util = require('util');

var value = 15;
var s = util.format("The variable value is: %s", value)
Federico Caccia
quelle
-1
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"
Abran Salas Molina
quelle
-2

var hello = "foo";

var my_string ="I pity the";

console.log (my_string, hallo)

lalithya
quelle
1
Das beantwortet die Frage nicht. Sie können beide Zeichenfolgen in einer Zeile abmelden, aber das gibt Ihnen keine neue Zeichenfolge, die beide Zeichenfolgen enthält, was OP verlangt.
Max Vollmer