ES6presenta un nuevo tipo de literal de cadena, utilizando la `marca de retroceso como delimitador. Estos literales permiten incrustar expresiones de interpolación de cadenas básicas, que luego se analizan y evalúan automáticamente.
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
Como puede ver, usamos .. '' alrededor de una serie de caracteres, que se interpretan como una cadena literal, pero cualquier expresión del formulario ${..}se analiza y evalúa en línea inmediatamente.
Un beneficio realmente bueno de los literales de cadena interpolados es que pueden dividirse en varias líneas:
var Actor = {"name" : "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
Expresiones interpoladas
Cualquier expresión válida puede aparecer dentro ${..}de una cadena interpolada lit‐ eral, incluidas las llamadas a funciones, las llamadas a expresiones de funciones en línea e incluso otras interpo‐ lated string literals.
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
Aquí, el literal de cadena interpolado interno $ {who} s`` fue un poco más conveniente para nosotros al combinar la variable who con la "s"cadena, a diferencia de who + "s". Además, para mantener una nota, una cadena literal interpolada está justo lexically scopeddonde aparece, no dynamically scopedde ninguna manera
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar();
El uso template literalde HTML es definitivamente más legible al reducir la molestia.
La vieja manera sencilla:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Con ES6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Su cadena puede abarcar varias líneas.
- No tiene que escapar de los caracteres de comillas.
- Puede evitar agrupaciones como: '">'
- No tiene que usar el operador más.
Literales de plantilla etiquetados
También podemos etiquetar una templatecadena, cuando templatese etiqueta una cadena, las literalssustituciones y se pasan a la función que devuelve el valor resultante.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`;
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
Podemos usar el spreadoperador aquí para pasar múltiples valores. El primer argumento, lo llamamos cadenas, es una matriz de todas las cadenas simples (el material entre las expresiones interpoladas).
luego reunimos todos los argumentos subsiguientes en una matriz denominada valores usando el ... gather/rest operator, aunque por supuesto podría haberlos dejado como parámetros con nombre individuales siguiendo el parámetro de cadenas como hicimos anteriormente (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
Los argument(s)recopilados en nuestra matriz de valores son los resultados de las expresiones de interpolación ya evaluadas que se encuentran en el literal de cadena. A tagged string literales como un paso de procesamiento después de que se evalúan las interpolaciones pero antes de que se compile el valor final de la cadena, lo que le permite tener más control sobre la generación de la cadena a partir del literal. Veamos un ejemplo de cómo crear un re-usable templates.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Cuerdas crudas
nuestras funciones de etiqueta reciben un primer argumento que llamamos strings, que es un array. Pero hay un dato adicional incluido: las versiones sin procesar sin procesar de todas las cadenas. Puede acceder a esos valores de cadena sin procesar utilizando la .rawpropiedad, así:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
Como puede ver, la rawversión de la cadena conserva la secuencia \ n de escape, mientras que la versión procesada de la cadena la trata como una nueva línea real sin escape. ES6viene con una función incorporada que puede ser usado como una etiqueta literal de cadena: String.raw(..). Simplemente pasa por las versiones sin procesar de strings:
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );