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

Question

sé en PHP que podemos hacer algo como esto:

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

Salida: "I pity the foo"

Me preguntaba si esto mismo es posible en JavaScript también. Usar variables dentro de cadenas sin usar concatenación: se ve más conciso y elegante para escribir.

Answer 1

A partir de Firefox 34/Chrome 41/Safari 9/Microsoft Edge puede utilizar un ES2015/función ES6 llama Template Literals y utilizar 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. 

Cómo limpio es eso?

Bono:

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

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

Browser support:

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

---

Nota al margen:

A partir de IE8 + puede utilizar cadena básica de formatear el interior console.log:

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

Answer 2

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge, no, eso no fue posible en javascript. Usted tendría que recurrir a:

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

Answer 3

Prior to Firefox 34/41 Chrome/Safari 9/Microsoft Edge, no. Aunque se puede tratar de conseguir sprintf for JavaScript a mitad de camino:

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

Answer 4

Si usted está tratando de hacer interpolación para microtemplating, me gusta Mustache.js para ese propósito.

Answer 5

bien que podría hacer esto, pero no es especialmente generales

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

Desde aquí se puede escribir una función que hace esto de forma inteligente si realmente se necesita para

Answer 6

Si te gusta escribir CoffeeScript que podría hacer:

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

CoffeeScript actualmente ES javasc ript, pero con una sintaxis mucho mejor.

Para obtener una descripción general de CoffeeScript, consulte este beginner's guide.

Answer 7

Puede usar esta función de javascript para realizar este tipo de creación 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."

Utilizando una función como un argumento para la función String.replace() era parte de especificación de la ECMAScript v3. Ver this SO answer para más detalles.

Answer 8

La respuesta completa, lista para ser usada:

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

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

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

A continuación, utilice como:

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

Answer 9

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 sustituirá a la {0} y {1} con los elementos de matriz y regresar la siguiente cadena

"this is a test string for stringInject" 

o podría reemplazar los marcadores de posición con las teclas de objetos y valores, así:

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

"My username is tjcafferkey on Github" 

Answer 10

Bueno, podría usar this is ${variable} o puede usar "this is "+variable Ambos funcionan bien.

También recuerde usar la tilde (``) clave en torno a la this is ${variable} en lugar de "o"