numeros - template string javascript

¿Cómo interpolar variables en cadenas en JavaScript, sin concatenación?

Question

Sé que en PHP podemos hacer algo como esto:

$hello = "foo";
$my_string = "I pity the $hello";

Salida: "I pity the foo"

Me preguntaba si esto también es posible en JavaScript. Uso de variables dentro de cadenas sin utilizar concatenación: parece más conciso y elegante de escribir.

Answer 1

A partir de Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, puede usar una característica de ES2015 / ES6 llamada Template Literals y usar esta sintaxis:

`String text ${expression}`

Los literales de la plantilla están encerrados por el back-tick (``) (acento grave) en lugar de comillas dobles o simples.

Ejemplo:

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.

¿Qué tan bueno es eso?

Prima:

También permite cadenas multilínea en javascript sin escape, lo que es ideal para las plantillas:

return `
    <div class="${foo}">
         ...
    </div>
`;

Soporte del navegador :

Como esta sintaxis no es compatible con los navegadores más antiguos (Internet Explorer y Safari <= 8), es posible que desee usar Babel para transpilar su código a ES5 para asegurarse de que se ejecutará en todas partes.

Nota al margen:

A partir de IE8 + puede usar el formato de cadena básico dentro de console.log :

console.log(''%s is %d.'', ''Fifteen'', 15);
// Fifteen is 15.

Answer 2

Bueno, podrías hacer esto, pero no es esp general

''I pity the $fool''.replace(''$fool'', ''fool'')

Fácilmente podría escribir una función que haga esto de manera inteligente si realmente lo necesita.

Answer 3

Escribí este paquete npm stringinject https://www.npmjs.com/package/stringinject que le permite hacer lo siguiente

var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]);

que reemplazará {0} y {1} con los elementos de la matriz y devolverá la siguiente cadena

"this is a test string for stringInject"

o podría reemplazar los marcadores de posición con claves de objeto y valores como:

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

"My username is tjcafferkey on Github" 

Answer 4

No veo ninguna biblioteca externa mencionada aquí, pero Lodash tiene _.template() ,

https://lodash.com/docs/4.17.10#template

Si ya está haciendo uso de la biblioteca, vale la pena echarle un vistazo, y si no está utilizando Lodash, siempre puede elegir los métodos desde npm npm install lodash.template para que pueda reducir los gastos generales.

La forma mas simple -

var compiled = _.template(''hello <%= user %>!'');
compiled({ ''user'': ''fred'' });
// => ''hello fred!''

También hay un montón de opciones de configuración -

_.templateSettings.interpolate = /{{([/s/S]+?)}}/g;
var compiled = _.template(''hello {{ user }}!'');
compiled({ ''user'': ''mustache'' });
// => ''hello mustache!''

Encontré los delimitadores personalizados más interesantes.

Answer 5

Puedes usar esta función de javascript para hacer este tipo de plantillas. No es necesario incluir una biblioteca completa.

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

Salida : "I would like to receive email updates from this store FOO BAR BAZ."

Usar una función como argumento para la función String.replace () fue parte de la especificación ECMAScript v3. Ver esta respuesta SO para más detalles.

Answer 6

Si estás tratando de hacer una interpolación para la microtemplación, me gusta Mustache.js para ese propósito.

Answer 7

Si te gusta escribir CoffeeScript puedes hacer:

hello = "foo"
my_string = "I pity the #{hello}"

CoffeeScript en realidad ES javascript, pero con una sintaxis mucho mejor.

Para obtener una descripción general de CoffeeScript, consulte esta guía para principiantes .

Answer 8

Respuesta completa, lista para ser utilizada:

 var Strings = {
        create : (function() {
                var regexp = /{([^{]+)}/g;

                return function(str, o) {
                     return str.replace(regexp, function(ignore, key){
                           return (key = o[key]) == null ? '''' : key;
                     });
                }
        })()
};

Llamar como

Strings.create("My firstname is {first}, my last name is {last}", {first:''Neo'', last:''Andersson''});

Para adjuntarlo a String.prototype:

String.prototype.create = function(o) {
           return Strings.create(this, o);
}

Entonces use como:

"My firstname is ${first}".create({first:''Neo''});

Answer 9

Antes de Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no, eso no era posible en javascript. Tendrías que recurrir a:

var hello = "foo";
var my_string = "I pity the " + hello;

Answer 10

Antes de Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no. Aunque puedes probar el sprintf para JavaScript a mitad de camino:

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