¿Cómo puedo hacer una interpolación de cadenas en JavaScript?
Considere este código:
var age = 3;
console.log("I'm " + age + " years old!");
¿Existen otras formas de insertar el valor de una variable en una cadena, además de la concatenación de cadenas?
Desde ES6, puedes usar literales de plantilla :
const age = 3
console.log(`I'm ${age} years old!`)PD : tenga en cuenta el uso de comillas invertidas: ``.
tl; dr
Utilice los literales de cadena de plantilla de ECMAScript 2015, si corresponde.
Explicación
No hay una forma directa de hacerlo, según las especificaciones de ECMAScript 5, pero ECMAScript 6 tiene cadenas de plantilla , que también se conocían como cuasiliterales durante la redacción de la especificación. Úsalos así:
> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'
Puede utilizar cualquier expresión JavaScript válida dentro del archivo {}. Por ejemplo:
> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'
La otra cosa importante es que ya no tienes que preocuparte por cadenas de varias líneas. Puedes escribirlos simplemente como
> `foo
... bar`
'foo\n bar'
Nota: utilicé io.js v2.4.0 para evaluar todas las cadenas de plantilla que se muestran arriba. También puede utilizar la última versión de Chrome para probar los ejemplos que se muestran arriba.
Nota: Las especificaciones de ES6 ya están finalizadas , pero aún no se han implementado en los principales navegadores.
Según las páginas de Mozilla Developer Network , esto se implementará para soporte básico a partir de las siguientes versiones: Firefox 34, Chrome 41, Internet Explorer 12. Si eres usuario de Opera, Safari o Internet Explorer y tienes curiosidad sobre esto ahora , este banco de pruebas se puede utilizar para jugar hasta que todos obtengan apoyo para esto.
El JavaScript correctivo de Douglas Crockford incluye una String.prototype.supplantfunción. Es breve, familiar y fácil de usar:
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' }));
Si no desea cambiar el prototipo de String, siempre puede adaptarlo para que sea independiente, o colocarlo en algún otro espacio de nombres, o lo que sea.
