it-swarm.com.de

Eine JavaScript-Zeichenfolge mit Platzhaltern und einem Objekt der Ersetzung formatieren?

Ich habe eine Zeichenfolge mit sagen: My Name is %NAME% and my age is %AGE%.

%XXX% sind Platzhalter. Dort müssen wir Werte aus einem Objekt ersetzen.

Objekt sieht folgendermaßen aus: {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

Ich muss das Objekt analysieren und die Zeichenfolge durch entsprechende Werte ersetzen. Die endgültige Ausgabe ist also:

Mein Name ist Mike und ich bin 26 Jahre alt.

Das Ganze muss entweder mit reinem Javascript oder mit Jquery erledigt werden.

51
Joby Joseph

Die Anforderungen der ursprünglichen Frage konnten eindeutig nicht von der String-Interpolation profitieren, da es sich scheinbar um eine Laufzeitverarbeitung beliebiger Ersatzschlüssel handelt. 

Jedoch, wenn Sie nur die String-Interpolation durchführen mussten, können Sie Folgendes verwenden:

const str = `My name is ${replacements.name} and my age is ${replacements.age}.`

Beachten Sie die Backticks, die die Zeichenfolge begrenzen. Sie sind erforderlich.


Für eine Antwort, die der jeweiligen OP-Anforderung entspricht, können Sie String.prototype.replace() für die Ersetzung verwenden.

Mit dem folgenden Code werden alle Übereinstimmungen behandelt und keine Übereinstimmungen ohne Ersetzung (sofern Ihre Ersetzungswerte alle Zeichenfolgen sind, wenn nicht, siehe unten).

var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
    str = 'My Name is %NAME% and my age is %AGE%.';

str = str.replace(/%\w+%/g, function(all) {
   return replacements[all] || all;
});

jsFiddle .

Wenn einige Ihrer Ersetzungen keine Zeichenfolgen sind, stellen Sie sicher, dass sie zuerst im Objekt vorhanden sind. Wenn Sie ein Format wie das Beispiel haben, d. H. In Prozentzeichen eingeschlossen, können Sie den Operator in verwenden, um dies zu erreichen.

jsFiddle .

Wenn Ihr Format jedoch kein spezielles Format hat, dh keine Zeichenfolge, und Ihr Ersetzungsobjekt keinen Prototyp null hat, verwenden Sie Object.prototype.hasOwnProperty(). Es sei denn, Sie können garantieren, dass keine Ihrer potenziell ersetzten Teilzeichenfolgen mit den Eigenschaftsnamen der Eigenschaft kollidiert Prototyp.

jsFiddle .

Wenn Ihre Ersetzungszeichenfolge 'hasOwnProperty' wäre, würden Sie andernfalls eine fehlerhafte Zeichenfolge erhalten.

jsFiddle .


Als Randbemerkung sollten Sie replacements eine Object und keine Array heißen.

85
alex

Wie wäre es mit ES6-Vorlagen-Literalen? 

var a = "cat";
var b = "fat";
console.log(`my ${a} is ${b}`); //notice back-ticked string

Mehr über Vorlagenliterale ...

20

Sie können JQuery (jquery.validate.js) verwenden, damit es problemlos funktioniert.

$.validator.format("My name is {0}, I'm {1} years old",["Bob","23"]);

Oder wenn Sie nur diese Funktion verwenden möchten, können Sie diese Funktion definieren und einfach verwenden

function format(source, params) {
    $.each(params,function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    })
    return source;
}
alert(format("{0} is a {1}", ["Michael", "Guy"]));

gutschrift an das jquery.validate.js-Team

10
zawhtut

Wie bei modernen Browsern wird der Platzhalter von der neuen Version von Chrome/Firefox unterstützt, ähnlich der C-Style-Funktion printf().

Platzhalter:

  • %s String.
  • %d, %i Ganzzahl.
  • %f Gleitkommazahl.
  • %o Objekt-Hyperlink.

z.B.

console.log("generation 0:\t%f, %f, %f", a1a1, a1a2, a2a2);

BTW,, um die Ausgabe zu sehen:

  • Verwenden Sie in Chrome die Verknüpfung Ctrl + Shift + J oder F12, um das Entwicklerwerkzeug zu öffnen.
  • Verwenden Sie in Firefox die Verknüpfung Ctrl + Shift + K, um das Entwicklertool zu öffnen. (Verwenden Sie nicht F12, wodurch Firebug geöffnet wird, die nicht mehr gepflegt wird, und auf dem Konsolenreiter wird keine Nachricht angezeigt.).

@Update - Nodejs Unterstützung

Scheint, dass nodejs %f nicht unterstützt, stattdessen könnte %d in nodejs ..__ verwendet werden. Mit %d wird die Zahl als Floating-Nummer und nicht nur als Ganzzahl ausgegeben.

7
Eric Wang

Sie können eine benutzerdefinierte Ersetzungsfunktion wie folgt verwenden:

var str = "My Name is %NAME% and my age is %AGE%.";
var replaceData = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};

function substitute(str, data) {
    var output = str.replace(/%[^%]+%/g, function(match) {
        if (match in data) {
            return(data[match]);
        } else {
            return("");
        }
    });
    return(output);
}

var output = substitute(str, replaceData);

Sie können es hier sehen: http://jsfiddle.net/jfriend00/DyCwk/ .

3
jfriend00

Verwenden Sie einfach replace()

var values = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};
var substitutedString = "My Name is %NAME% and my age is %AGE%.".replace("%NAME%", $values["%NAME%"]).replace("%AGE%", $values["%AGE%"]);
2
hafichuk

So können Sie genau das tun 

NPM: https://www.npmjs.com/package/stringinject

GitHub: https://github.com/tjcafferkey/stringinject

Gehen Sie folgendermaßen vor:

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

// My username is tjcafferkey on Git
1
tjcafferkey

Wenn Sie etwas näher an console.log arbeiten möchten, ersetzen Sie% s Platzhalter wie in

>console.log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>Hello Loreto how are you today is everything allright?

Ich habe das geschrieben

function log() {
  var args = Array.prototype.slice.call(arguments);
  var rep= args.slice(1, args.length);
  var i=0;
  var output = args[0].replace(/%s/g, function(match,idx) {
    var subst=rep.slice(i, ++i);
    return( subst );
  });
   return(output);
}
res=log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright");
document.getElementById("console").innerHTML=res;
<span id="console"/>

sie erhalten

>log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>"Hello Loreto how are you today is everything allright?"

UPDATE

Ich habe eine einfache Variante als String.prototype hinzugefügt, die bei String-Transformationen nützlich ist. Hier ist es:

String.prototype.log = function() {
    var args = Array.prototype.slice.call(arguments);
    var rep= args.slice(0, args.length);
    var i=0;
    var output = this.replace(/%s|%d|%f|%@/g, function(match,idx) {
      var subst=rep.slice(i, ++i);
      return( subst );
    });
    return output;
   }

In diesem Fall wirst du tun

"Hello %s how are you %s is everything %s?".log("Loreto", "today", "allright")
"Hello Loreto how are you today is everything allright?"

Probiere diese Version hier

1
loretoparisi

Eine andere Möglichkeit besteht darin, die es6-Vorlagenliterale zur Laufzeit dynamisch zu verwenden.

const str = 'My name is ${name} and my age is ${age}.'
const obj = {name:'Simon', age:'33'}


const result = new Function('const {' + Object.keys(obj).join(',') + '} = this.obj;return `' + str + '`').call({obj})

document.body.innerHTML = result

0
Simon Schärer

Als schnelles Beispiel:

var name = 'jack';
var age = 40;
console.log('%s is %d yrs old',name,age);

Die Ausgabe ist: 

jack ist 40 Jahre alt

0
Yomi