Wie interpoliere ich Variablen in Strings in JavaScript ohne Verkettung?

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.

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.

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;

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

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

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

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

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 .

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 .

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

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" 

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.

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.

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'

Friedenszitat von 2020:

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

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

Verwenden Sie einfach:

var util = require('util');

var value = 15;
var s = util.format("The variable value is: %s", value)

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"

var hello = "foo";

var my_string ="I pity the";

console.log (my_string, hallo)