Betrachten Sie diesen Code:
var age = 3;
console.log("I'm " + age + " years old!");
Gibt es neben der Verkettung von Zeichenfolgen noch andere Möglichkeiten, den Wert einer Variablen in eine Zeichenfolge einzufügen?
javascript
string
string-interpolation
Tom Lehman
quelle
quelle
Show GRAPH of : ${fundCode}-${funcCode}
holt michShow GRAPH of : AIP001-_sma
(benutze Backticks um String 1 .... kann hier nicht angezeigt werden)Antworten:
Seit ES6 können Sie Vorlagenliterale verwenden :
PS Beachten Sie die Verwendung von Backticks :
``
.quelle
tl; dr
Verwenden Sie gegebenenfalls die Vorlagenzeichenfolgenliterale von ECMAScript 2015.
Erläuterung
Es gibt keinen direkten Weg, dies gemäß den ECMAScript 5-Spezifikationen zu tun, aber ECMAScript 6 verfügt über Vorlagenzeichenfolgen , die bei der Erstellung der Spezifikation auch als Quasi-Literale bezeichnet wurden. Verwenden Sie sie wie folgt:
Sie können einen beliebigen gültigen JavaScript-Ausdruck innerhalb von verwenden
{}
. Zum Beispiel:Die andere wichtige Sache ist, dass Sie sich nicht mehr um mehrzeilige Zeichenfolgen kümmern müssen. Sie können sie einfach als schreiben
Hinweis: Ich habe io.js v2.4.0 verwendet, um alle oben gezeigten Vorlagenzeichenfolgen auszuwerten. Sie können auch das neueste Chrome verwenden, um die oben gezeigten Beispiele zu testen.
Hinweis: Die ES6-Spezifikationen sind jetzt fertiggestellt , müssen jedoch noch von allen gängigen Browsern implementiert werden.
Laut den Seiten des Mozilla Developer Network wird dies für die grundlegende Unterstützung ab den folgenden Versionen implementiert: Firefox 34, Chrome 41, Internet Explorer 12. Wenn Sie ein Opera-, Safari- oder Internet Explorer-Benutzer sind und jetzt neugierig darauf sind Mit diesem Prüfstand kann herumgespielt werden, bis alle Unterstützung dafür erhalten.
quelle
Douglas Crockfords Remedial JavaScript enthält eine
String.prototype.supplant
Funktion. Es ist kurz, vertraut und einfach zu bedienen:Wenn Sie den Prototyp von String nicht ändern möchten, können Sie ihn jederzeit eigenständig anpassen oder in einen anderen Namespace oder was auch immer einfügen.
quelle
"The {0} says {1}, {1}, {1}!".supplant(['cow', 'moo'])
Achtung: Vermeiden Sie jedes Vorlagensystem, bei dem Sie sich nicht den eigenen Trennzeichen entziehen können. Zum Beispiel gibt es keine Möglichkeit, Folgendes mit der
supplant()
hier erwähnten Methode auszugeben .Eine einfache Interpolation kann für kleine in sich geschlossene Skripte funktionieren, bringt jedoch häufig diesen Konstruktionsfehler mit sich, der jede ernsthafte Verwendung einschränkt. Ich bevorzuge ehrlich DOM-Vorlagen wie:
Und verwenden Sie die jQuery-Manipulation:
$('#age').text(3)
Wenn Sie die Verkettung von Zeichenfolgen einfach satt haben, gibt es alternativ immer eine andere Syntax:
quelle
Array.join()
Ist langsamer als die direkte (+
Stil-) Verkettung, da Browser-Engines (einschließlich V8, einschließlich Knoten und fast alles, was JS heutetoken
Sie also kein Datenobjekt mit einem Element angeben, istage
dies in Ordnung.supplant
ist nicht gerechtfertigt:"I am 3 years old thanks to my {age} variable.".supplant({}));
Gibt genau die angegebene Zeichenfolge zurück. Wennage
gegeben, könnte man noch drucken{
und}
verwenden{{age}}
Probieren Sie die Sprintf- Bibliothek aus (eine vollständige Open-Source-JavaScript-Sprintf-Implementierung). Zum Beispiel:
vsprintf verwendet ein Array von Argumenten und gibt eine formatierte Zeichenfolge zurück.
quelle
Ich verwende dieses Muster in vielen Sprachen, wenn ich noch nicht weiß, wie ich es richtig machen soll, und nur schnell eine Idee haben möchte:
Obwohl es nicht besonders effizient ist, finde ich es lesbar. Es funktioniert immer und ist immer verfügbar:
IMMER
quelle
Sie können das Template-System von Prototype verwenden, wenn Sie wirklich Lust haben, mit einem Vorschlaghammer eine Nuss zu knacken:
quelle
Sie können ES6 problemlos verwenden
template string
und mit jedem verfügbaren Transpilar wie babel auf ES5 übertragen.http://www.es6fiddle.net/im3c3euc/
quelle
Probieren Sie Kiwi aus , ein leichtes JavaScript-Modul für die String-Interpolation.
Du kannst tun
oder
quelle
Wenn Sie in der
console.log
Ausgabe interpolieren möchten , dann einfachHier
%s
ist ein sogenannter "Formatbezeichner".console.log
hat diese Art der Interpolationsunterstützung eingebaut.quelle
Hier ist eine Lösung, bei der Sie einem Objekt die Werte bereitstellen müssen. Wenn Sie kein Objekt als Parameter angeben, werden standardmäßig globale Variablen verwendet. Aber halten Sie sich besser an den Parameter, er ist viel sauberer.
quelle
eval
,eval
ist böse!eval
, aber manchmal nicht. Wenn das OP beispielsweise eine Möglichkeit zum Interpolieren mit dem aktuellen Bereich haben möchte, ohne ein Suchobjekt übergeben zu müssen (wie die Groovy-Interpolation funktioniert), bin ich mir ziemlich sicher,eval
dass dies erforderlich wäre. Greifen Sie nicht einfach auf das alte "Eval is Evil" zurück.eval
ist dies die einzige Möglichkeit, auf lokale Variablen im Gültigkeitsbereich zuzugreifen . Also lehne es nicht ab, nur weil es deine Gefühle verletzt. Übrigens bevorzuge ich auch den alternativen Weg, weil er sicherer ist, aber dieeval
Methode beantwortet genau die Frage von OP, daher ist sie in der Antwort enthalten.eval
ist, dass nicht von einem anderen Bereich aus auf Variablen zugegriffen werden kann. Wenn sich Ihr.interpolate
Aufruf also in einer anderen Funktion befindet und nicht global, funktioniert er nicht.Wenn Sie die zweite Antwort von Greg Kindel erweitern , können Sie eine Funktion schreiben, um einen Teil der Boilerplate zu entfernen:
Verwendungszweck:
quelle
Ich kann Ihnen ein Beispiel zeigen:
quelle
Wenn Sie seit ES6 eine Zeichenfolgeninterpolation in Objektschlüsseln durchführen möchten, erhalten Sie eine,
SyntaxError: expected property name, got '${'
wenn Sie Folgendes tun:Sie sollten stattdessen Folgendes tun:
quelle
quelle
Die Verwendung der Vorlagensyntax schlägt in älteren Browsern fehl. Dies ist wichtig, wenn Sie HTML für die öffentliche Verwendung erstellen. Die Verwendung der Verkettung ist langwierig und schwer zu lesen, insbesondere wenn Sie viele oder lange Ausdrücke haben oder wenn Sie Klammern verwenden müssen, um Mischungen aus Zahlen- und Zeichenfolgenelementen zu verarbeiten (beide verwenden den Operator +).
PHP erweitert Zeichenfolgen in Anführungszeichen, die Variablen und sogar einige Ausdrücke enthalten, mit einer sehr kompakten Notation:
$a="the color is $color";
In JavaScript kann eine effiziente Funktion geschrieben werden, um dies zu unterstützen:
var a=S('the color is ',color);
unter Verwendung einer variablen Anzahl von Argumenten. In diesem Beispiel gibt es zwar keinen Vorteil gegenüber der Verkettung, aber wenn die Ausdrücke länger werden, ist diese Syntax möglicherweise klarer. Oder man kann das Dollarzeichen verwenden, um den Beginn eines Ausdrucks mithilfe einer JavaScript-Funktion wie in PHP zu signalisieren.Andererseits wäre es nicht schwierig, eine effiziente Problemumgehungsfunktion zu schreiben, um eine vorlagenähnliche Erweiterung von Zeichenfolgen für ältere Browser bereitzustellen. Jemand hat es wahrscheinlich schon getan.
Schließlich stelle ich mir vor, dass sprintf (wie in C, C ++ und PHP) in JavaScript geschrieben werden könnte, obwohl es etwas weniger effizient wäre als diese anderen Lösungen.
quelle
Benutzerdefinierte flexible Interpolation:
quelle
Während Vorlagen für den von Ihnen beschriebenen Fall wahrscheinlich am besten geeignet sind, können Sie sie verwenden, wenn Sie Ihre Daten und / oder Argumente in iterierbarer / Array-Form haben oder möchten
String.raw
.Mit den Daten als Array kann man den Spread-Operator verwenden:
quelle
Konnte nicht finden, wonach ich suchte, dann fand ich es -
Wenn Sie Node.js verwenden, gibt es ein integriertes
util
Paket mit einer Formatierungsfunktion, die folgendermaßen funktioniert:Zufälligerweise ist dies jetzt
console.log
auch in Node.js in Aromen integriert -quelle