¿Dar formato a una cadena de JavaScript utilizando marcadores de posición y un objeto de sustituciones?

Tengo una cadena con decir: My Name is %NAME% and my age is %AGE%.

%XXX%son marcadores de posición. Necesitamos sustituir valores allí de un objeto.

El objeto se parece a: {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

Necesito analizar el objeto y reemplazar la cadena con los valores correspondientes. Entonces ese resultado final será:

Mi nombre es Mike y mi edad es 26.

Todo debe hacerse usando javascript puro o jquery.

Los requisitos de la pregunta original claramente no podrían beneficiarse de la interpolación de cadenas, ya que parece que es un procesamiento en tiempo de ejecución de claves de reemplazo arbitrarias.

Sin embargo , si solo tuviera que hacer una interpolación de cadenas, puede usar:

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

Tenga en cuenta las comillas inversas que delimitan la cadena, son obligatorias.

Para obtener una respuesta que se adapte a los requisitos del OP en particular, puede usar String.prototype.replace()para los reemplazos.

El siguiente código manejará todas las coincidencias y no las tocará sin un reemplazo (siempre que sus valores de reemplazo sean todas cadenas, si no, vea a continuación).

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 .

Si algunos de sus reemplazos no son cadenas, asegúrese de que existan primero en el objeto. Si tiene un formato como el del ejemplo, es decir, envuelto en signos de porcentaje, puede usar el inoperador para lograrlo.

jsFiddle .

Sin embargo, si su formato no tiene un formato especial, es decir, ninguna cadena, y su objeto de reemplazo no tiene un nullprototipo, utilice Object.prototype.hasOwnProperty(), a menos que pueda garantizar que ninguna de sus posibles subcadenas reemplazadas chocará con los nombres de propiedad en el prototipo.

jsFiddle .

De lo contrario, si su cadena de reemplazo fuera 'hasOwnProperty', obtendría una cadena desordenada resultante.

jsFiddle .

Como nota al margen, debería llamarse replacementsun Object, no un Array.

¿Qué tal el uso de literales de plantilla ES6?

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

Más sobre las plantillas literales ...

Puede usar JQuery (jquery.validate.js) para que funcione fácilmente.

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

O si desea usar solo esa función, puede definir esa función y usarla como

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

crédito al equipo de jquery.validate.js

Al igual que con los navegadores modernos, marcador de posición es apoyada por la nueva versión de Chrome / Firefox, similar a la función de estilo C printf().

Marcadores de posición:

• %s Cuerda.
• %d, %iNúmero entero.
• %f Número de coma flotante.
• %o Hipervínculo de objeto.

p.ej

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

Por cierto, para ver la salida:

• En Chrome, use el acceso directo Ctrl + Shift + JoF12 para abrir la herramienta de desarrollo.
• En Firefox, use el acceso directo Ctrl + Shift + Ko F12para abrir la herramienta de desarrollo.

@Update - soporte de nodejs

Parece que nodejs no es compatible %f, en cambio, podría usarse %den nodejs. Con %dnúmero se imprimirá como número flotante, no solo como entero.

Solo usa 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%"]);

Puede usar una función de reemplazo personalizada como esta:

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

Puedes verlo funcionar aquí: http://jsfiddle.net/jfriend00/DyCwk/ .

Si quieres hacer algo más cercano a console.log como reemplazar% s marcadores de posición como en

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

yo escribí esto

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"/>

conseguirás

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

ACTUALIZAR

He agregado una variante simple tan String.prototypeútil cuando se trata de transformaciones de cadenas, aquí está:

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

En ese caso lo harás

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

Prueba esta versión aquí

Actualmente todavía no existe una solución nativa en Javascript para este comportamiento. Las plantillas etiquetadas son algo relacionado, pero no lo resuelvas.

Aquí hay un refactor de la solución de Alex con un objeto para reemplazos.

La solución utiliza funciones de flecha y una sintaxis similar para los marcadores de posición como la interpolación nativa de Javascript en literales de plantilla (en {}lugar de %%). Además, no es necesario incluir delimitadores (% ) en los nombres de los reemplazos.

Hay dos sabores: descriptivo y reducido.

Solución descriptiva:

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(
  /{\w+}/g,
  placeholderWithDelimiters => {
    const placeholderWithoutDelimiters = placeholderWithDelimiters.substring(
      1,
      placeholderWithDelimiters.length - 1,
    );
    const stringReplacement = replacements[placeholderWithoutDelimiters] || placeholderWithDelimiters;
    return stringReplacement;
  },
);

console.log(string);

Solución reducida:

const stringWithPlaceholders = 'My Name is {name} and my age is {age}.';

const replacements = {
  name: 'Mike',
  age: '26',
};

const string = stringWithPlaceholders.replace(/{\w+}/g, placeholder =>
  replacements[placeholder.substring(1, placeholder.length - 1)] || placeholder,
);

console.log(string);

Esto te permite hacer exactamente eso

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

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

Haciendo lo siguiente:

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

// My username is tjcafferkey on Git

Aquí hay otra forma de hacer esto mediante el uso de literales de plantilla es6 dinámicamente en tiempo de ejecución.

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

Como ejemplo rápido:

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

La salida es:

Jack tiene 40 años

const stringInject = (str = '', obj = {}) => {
  let newStr = str;
  Object.keys(obj).forEach((key) => {
    let placeHolder = `#${key}#`;
    if(newStr.includes(placeHolder)) {
      newStr = newStr.replace(placeHolder, obj[key] || " ");
    }
  });
  return newStr;
}

Input: stringInject("Hi #name#, How are you?", {name: "Ram"});
Output: "Hi Ram, How are you?"

He escrito un código que te permite formatear cadenas fácilmente.

Utilice esta función.

function format() {
    if (arguments.length === 0) {
        throw "No arguments";
    }
    const string = arguments[0];
    const lst = string.split("{}");
    if (lst.length !== arguments.length) {
        throw "Placeholder format mismatched";
    }
    let string2 = "";
    let off = 1;
    for (let i = 0; i < lst.length; i++) {
        if (off < arguments.length) {
            string2 += lst[i] + arguments[off++]
        } else {
            string2 += lst[i]
        }
    }
    return string2;
}

Ejemplo

format('My Name is {} and my age is {}', 'Mike', 26);

Salida

Mi nombre es Mike y mi edad es 26