wake-up-neo.com

Wie kann ich eine String-Interpolation in JavaScript durchführen?

Betrachten Sie diesen Code:

var age = 3;

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

Gibt es andere Möglichkeiten, den Wert einer Variablen in eine Zeichenfolge einzufügen, außer der Verkettung von Zeichenfolgen?

373
Tom Lehman

Seit ES6 können Sie Vorlagenliterale verwenden:

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

P.S. Beachten Sie die Verwendung von Backticks: ``.

290
Damjan Pavlica

tl; dr

Verwenden Sie ggf. ECMAScript 2015 'Template String Literals'.

Erläuterung

Es gibt keine direkte Möglichkeit, dies gemäß den Spezifikationen von ECMAScript 5 zu tun, aber ECMAScript 6 hat Template-Strings , die auch als Quasi-Literale während der Erstellung der Spezifikation bezeichnet wurden. Verwenden Sie sie wie folgt:

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

Sie können einen beliebigen gültigen JavaScript-Ausdruck in {} verwenden. Zum Beispiel:

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

Die andere wichtige Sache ist, dass Sie sich nicht mehr um mehrzeilige Zeichenketten kümmern müssen. Sie können sie einfach als schreiben

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

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: ES6-Spezifikationen sind jetzt abgeschlossen , müssen aber noch von allen gängigen Browsern implementiert werden. 
Laut den Seiten des Mozilla Developer Network wird dies für die grundlegende Unterstützung in den folgenden Versionen implementiert: Firefox 34, Chrome 41, Internet Explorer 12. Wenn Sie Opera, Safari oder Internet Explorer sind und dies tun Neugierig auf dieses jetzt, dieses Testbett kann verwendet werden, um zu spielen, bis jeder Unterstützung dafür bekommt.

216
thefourtheye

Douglas Crockfords Remedial JavaScript enthält eine String.prototype.supplant-Funktion. Es ist kurz, vertraut und einfach zu bedienen:

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

Wenn Sie den Prototyp von String nicht ändern möchten, können Sie ihn immer als Standalone anpassen oder in einen anderen Namespace oder in einen anderen Bereich einfügen.

182
Chris Nielsen

Vorsicht: Vermeiden Sie alle Schablonensysteme, die es Ihnen erlauben, ihre eigenen Trennzeichen zu umgehen. Zum Beispiel gibt es keine Möglichkeit, mit der hier genannten supplant()-Methode Folgendes auszugeben.

"Ich bin 3 Jahre alt, dank meiner Variable {Alter}."

Die einfache Interpolation kann für kleine, in sich geschlossene Skripte funktionieren, bringt jedoch häufig einen Konstruktionsfehler mit sich, der die ernsthafte Verwendung einschränkt. Ich bevorzuge ehrlich DOM-Vorlagen wie:

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

Und benutze die jQuery-Manipulation: $('#age').text(3)

Wenn Sie einfach nur die Verkettung von Strings satt haben, gibt es immer eine alternative Syntax:

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

Versuchen Sie sprintf . Zum Beispiel:

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

Sie könnten das Prototyp-Vorlagensystem verwenden, wenn Sie wirklich Lust haben, mit einem Vorschlaghammer eine Nuss zu knacken:

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

Ich verwende dieses Muster in vielen Sprachen, wenn ich noch nicht richtig weiß, wie ich es machen soll und einfach nur eine Idee haben möchte:

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

Obwohl nicht besonders effizient, finde ich es lesbar. Es funktioniert immer und ist immer verfügbar:

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

IMMER

* 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'
15
Jefferey Cave

Sie können mit ES6 template string problemlos und mit jedem verfügbaren Transpilar wie babel auf ES5 transpilieren.

const age = 3;

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

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

9
Mohammad Arif

Hier ist eine Lösung, bei der Sie ein Objekt mit den Werten angeben müssen. Wenn Sie kein Objekt als Parameter angeben, werden standardmäßig globale Variablen verwendet. Bleiben Sie besser bei der Verwendung des Parameters, er ist viel sauberer.

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>

6

Versuchen Sie kiwi , ein leichtes JavaScript-Modul für die String-Interpolation.

Du kannst tun

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

oder

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

verwenden Sie ` ( gravierende Akzente, auch bekannt als backtick ) anstelle von einfachen Anführungszeichen (') oder doppelten Anführungszeichen (") und dem Dollarzeichen/Klammerzeichen ${ variable }.

Zum Beispiel:

console.log(
  `current date: ${new Date()}`
);

Lesen Sie mehr über Vorlagenliterale hier .

5
Hardik

Wenn Sie in der console.log-Ausgabe interpolieren möchten, dann einfach

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

Hier wird %s als "Formatbezeichner" bezeichnet. console.log verfügt über eine integrierte Interpolationsunterstützung.

4
user663031

Ein weiterer Vorschlaghammer: jquery-tmpl (Vorlage mit jQuery).

3
Jo Liss

Wenn Sie die Antwort auf Greg Kindel Sekunde erweitern, können Sie eine Funktion schreiben, um einige der Boilerplates zu entfernen:

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

Verwendungszweck:

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

Ich kann Ihnen ein Beispiel zeigen:

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

1
shades3002

Mehr für ES6 Version von @Chris Nielsens Beitrag.

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

Wenn Sie seit ES6 eine String-Interpolation in Objektschlüsseln durchführen möchten, erhalten Sie einen SyntaxError: expected property name, got '${', wenn Sie Folgendes tun:

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

Sie sollten stattdessen Folgendes tun:

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

Benutzerdefinierte flexible Interpolation:

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>
0
vsync

Die Verwendung der Vorlagensyntax schlägt in älteren Browsern fehl. Dies ist wichtig, wenn Sie HTML für die öffentliche Verwendung erstellen. Die Verwendung von Verkettung ist langwierig und schwer lesbar, insbesondere wenn Sie viele oder lange Ausdrücke haben oder wenn Sie Mischungen aus Zahlen- und Zeichenfolgenelementen verwenden müssen (beide verwenden den Operator +).

PHP erweitert zitierte Zeichenfolgen, die Variablen und sogar einige Ausdrücke enthalten, in einer sehr kompakten Notation: $a="the color is $color";

In JavaScript kann eine effiziente Funktion geschrieben werden, die dies unterstützt: var a=S('the color is ',color);, wobei eine variable Anzahl von Argumenten verwendet wird. In diesem Beispiel gibt es keinen Vorteil gegenüber der Verkettung. Wenn die Ausdrücke jedoch länger werden, ist diese Syntax möglicherweise klarer. Oder Sie können das Dollarzeichen verwenden, um den Start eines Ausdrucks mit einer JavaScript-Funktion zu signalisieren, wie in PHP.

Auf der anderen Seite wäre das Schreiben einer effizienten Workaround-Funktion zur Bereitstellung einer vorlagenartigen Erweiterung von Strings für ältere Browser nicht schwierig. Jemand hat es wahrscheinlich schon gemacht.

Schließlich kann ich mir vorstellen, 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.

0
David Spector