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


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. Usar variables dentro de cadenas sin usar concatenación: se ve más conciso y elegante para escribir.


191
2017-07-21 21:28


origen


Respuestas:


A partir de Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge puede usar una función ES2015 / ES6 llamada Literales de plantilla y usa esta sintaxis:

`String text ${expression}`

Los literales de plantilla están encerrados por 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 de varias líneas en javascript sin escaparse, lo que es genial para las plantillas:

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

Soporte del navegador:

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


Nota al margen: 

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

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

337
2018-01-22 12:37



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

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

149
2017-07-21 21:30



Antes de Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no. Aunque podrías intentar sprintf para JavaScript para llegar a la mitad allí:

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

37
2017-07-21 21:32



bien podrías hacer esto, pero no es especialmente general

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

Podría escribir fácilmente una función que lo haga de forma inteligente si realmente necesitara


23
2017-07-21 21:34



Si te gusta escribir CoffeeScript, puedes hacer lo siguiente:

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 esto Guía para principiantes.


8
2018-02-13 10:33



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 usa como:

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

6
2017-07-05 17:12



Puede 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 () era parte de la especificación ECMAScript v3. Ver esta respuesta SO para más detalles.


6
2018-02-07 21:47