es6 - ¿Cómo puedo hacer la interpolación de cadenas en JavaScript?

template string javascript html

Question

Considere este código:

var age = 3;

console.log("I''m " + age + " years old!");

¿Hay otras formas de insertar el valor de una variable en una cadena, aparte de la concatenación de cadenas?

Answer 1

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 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , que también se conocían como quasi-literals durante la redacción de la especificación. Úsalos así:

> var n = 42;
undefined
> `foo${n}bar`
''foo42bar''

Puedes usar cualquier expresión válida de JavaScript dentro de {} . Por ejemplo:

> `foo${{name: ''Google''}.name}bar`
''fooGooglebar''
> `foo${1 + 3}bar`
''foo4bar''

La otra cosa importante es que ya no tiene que preocuparse por las cadenas de varias líneas. Puedes escribirlos simplemente como

> `foo
...     bar`
''foo/n    bar''

Nota: usé io.js v2.4.0 para evaluar todas las cadenas de plantillas que se muestran arriba. También puede usar el Chrome más reciente para probar los ejemplos mostrados anteriormente.

Nota: las especificaciones de ES6 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… están developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , pero aún no han sido implementadas por los principales navegadores.
De acuerdo con las páginas de la Red de desarrolladores de Mozilla , 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 sientes curiosidad por esto ahora , este banco de pruebas se puede usar para jugar hasta que todos reciban apoyo para esto.

Answer 2

Advertencia: evite cualquier sistema de plantillas que no le permita escapar de sus propios delimitadores. Por ejemplo, no habría manera de generar lo siguiente utilizando el método supplant() mencionado aquí.

"Tengo 3 años gracias a mi variable {age}".

La interpolación simple puede funcionar con pequeños scripts autocontenidos, pero a menudo viene con este defecto de diseño que limitará cualquier uso serio. Honestamente prefiero las plantillas DOM, tales como:

<div> I am <span id="age"></span> years old!</div>

Y use jQuery manipulation: $(''#age'').text(3)

Alternativamente, si simplemente estás cansado de la concatenación de cadenas, siempre hay una sintaxis alternativa:

var age = 3;
var str = ["I''m only", age, "years old"].join(" ");

Answer 3

Ampliando la segunda respuesta de Greg Kindel , puede escribir una función para eliminar parte de la repetición:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join('' '');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

Uso:

var age = 7;
var years = 5;
var sentence = fmt.join(''I am now'', age, ''years old!'');
fmt.log(''In'', years, ''years I will be'', age + years, ''years old!'');

Answer 4

Aquí hay una solución que requiere que proporcione un objeto con los valores. Si no proporciona un objeto como parámetro, usará por defecto variables globales. Pero mejor atenerse a usar el parámetro, es mucho más limpio.

String.prototype.interpolate = function(props) {
    return this.replace(//{(/w+)/}/g, function(match, expr) {
        return (props || window)[expr];
    });
};

// Test:

// Using the parameter (advised approach)
document.getElementById("resultA").innerText = "Eruption 1: {eruption1}".interpolate({ eruption1: 112 });

// Using the global scope
var eruption2 = 116;
document.getElementById("resultB").innerText = "Eruption 2: {eruption2}".interpolate();

<div id="resultA"></div><div id="resultB"></div>

Answer 5

Desde ES6, puedes usar literales de plantilla :

let age = 3;
console.log(`I''m ${age} years old!`);

PD Ten en cuenta el uso de backticks: ` .

Answer 6

Otro martillo: jquery-tmpl (plantillas con jQuery).

Answer 7

Podría usar el sistema de plantillas de Prototype si realmente tiene ganas de usar un martillo para romper una tuerca:

var template = new Template("I''m #{age} years old!");
alert(template.evaluate({age: 21}));

Answer 8

Prueba sprintf . Por ejemplo:

vsprintf(''The first 4 letters of the english alphabet are: %s, %s, %s and %s'', [''a'', ''b'', ''c'', ''d'']);

Answer 9

Pruebe kiwi , un módulo ligero de JavaScript para la interpolación de cadenas.

Tu puedes hacer

Kiwi.compose("I''m % years old!", [age]);

o

Kiwi.compose("I''m %{age} years old!", {"age" : age});

Answer 10

Puede hacerlo fácilmente usando template string ES6 y transpilar a ES5 usando cualquier transpilar disponible como babel.

const age = 3;

console.log(`I''m ${age} years old!`);

http://www.es6fiddle.net/im3c3euc/

Answer 11

Si desea interpolar en la salida de console.log , simplemente

console.log("Eruption 1: %s", eruption1);
                         ^^

Aquí, %s es lo que se llama un "especificador de formato". console.log tiene este tipo de soporte de interpolación incorporado.

Answer 12

Te puedo mostrar con un ejemplo:

function fullName(first, last) {
  let fullName = first + " " + last;
  return fullName;
}

function fullNameStringInterpolation(first, last) {
  let fullName = `${first} ${last}`;
  return fullName;
}

console.log(''Old School: '' + fullName(''Carlos'', ''Gutierrez''));

console.log(''New School: '' + fullNameStringInterpolation(''Carlos'', ''Gutierrez''));

Answer 13

Utilizo este patrón en muchos idiomas cuando todavía no sé cómo hacerlo correctamente y solo quiero tener una idea rápidamente:

// JavaScript
var stringValue = ''Hello, my name is {name}. You {action} my {relation}.''
    .replace(/{name}/g    ,''Indigo Montoya'')
    .replace(/{action}/g  ,''killed'')
    .replace(/{relation}/g,''father'')
    ;

Aunque no es particularmente eficiente, me parece legible. Siempre funciona, y siempre está disponible:

'' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

SIEMPRE

* COBOL
INSPECT stringvalue REPLACING FIRST ''{name}''     BY ''Grendel''
INSPECT stringvalue REPLACING FIRST ''{relation}'' BY ''Mother''
INSPECT stringvalue REPLACING FIRST ''{action}''   BY ''did unspeakable things to''

ACTUALIZACIÓN : He actualizado la versión de javascript para reemplazar todas las ocurrencias en lugar de solo la primera.

Answer 14

use ` ( acentos graves también conocidos como comillas invertidas ) en lugar de comillas simples ( '' ) o comillas dobles ( " ) y el signo de dólar / corchete ${ variable }

Por ejemplo:

console.log(
  `current date: ${new Date()}`
);

Lea más sobre los literales de plantilla aquí .

Answer 15

Remedial JavaScript de Douglas Crockford incluye una función String.prototype.supplant . Es corto, 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.