ECMAScript 6 viene con un nuevo tipo de cadena literal, usando el backtick como delimitador. Estos literales permiten incrustar expresiones básicas de interpolación de cadenas, que luego se analizan y evalúan automáticamente.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
Como puede ver, utilizamos `alrededor de una serie de caracteres, que se interpretan como un literal de cadena, pero cualquier expresión del formulario ${..}se analiza y evalúa en línea de inmediato.
Un beneficio realmente agradable de los literales de cadena interpolados es que se les permite 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);
// Now is the time for all good men
// to come to the aid of their
// country!
Expresiones Interpoladas
¡Cualquier expresión válida puede aparecer dentro ${..}de un literal de cadena interpolado, incluidas las llamadas a funciones, las llamadas a expresiones de función en línea e incluso otros literales de cadena interpolados!
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);
// A very WARM welcome
// to all of you READERS!
Aquí, el `${who}s`literal de cadena interpolado interno fue un poco más conveniente para nosotros al combinar la whovariable con la "s"cadena, en lugar de who + "s". Además, para mantener una nota, un literal de cadena interpolado solo tiene un alcance léxico donde aparece, no tiene un alcance dinámico de ninguna manera:
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
Usar el literal de plantilla para el HTML es definitivamente más legible al reducir la molestia.
La vieja manera simple:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Con ECMAScript 6:
`<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 cita.
- Puede evitar agrupaciones como: '">'
- No tiene que usar el operador más.
Etiquetado Literales de plantilla
También podemos etiquetar una cadena de plantilla, cuando se etiqueta una cadena de plantilla, los literales y las sustituciones se pasan a la función que devuelve el valor resultante.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Podemos usar el operador de propagación aquí para pasar múltiples valores. El primer argumento, lo llamamos cadenas, es una matriz de todas las cadenas simples (el material entre cualquier expresión interpolada).
A continuación, recogemos todos los argumentos posteriores en una matriz llamada valores utilizando el ... gather/rest operator, aunque se puede, por supuesto, ellos han dejado como parámetros con nombre individuales siguiendo las cadenas de parámetros como lo hicimos anteriormente ( value1, value2, etc.).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Los argumentos reunidos en nuestra matriz de valores son los resultados de las expresiones de interpolación ya evaluadas que se encuentran en el literal de cadena. Un literal de cadena etiquetado es como un paso de procesamiento después de evaluar las interpolaciones, pero antes de que se compile el valor final de la cadena, lo que le permite un mayor control sobre la generación de la cadena a partir del literal. Veamos un ejemplo de creación de plantillas reutilizables.
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 cadenas, que es una matriz. Pero hay un bit adicional de datos incluidos: las versiones sin procesar sin procesar de todas las cadenas. Puede acceder a esos valores de cadena sin formato utilizando la .rawpropiedad, como esta:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Como puede ver, la versión sin procesar de la cadena conserva la \nsecuencia escapada , mientras que la versión procesada de la cadena la trata como una nueva línea real sin escape. ECMAScript 6 viene con una función incorporada que puede ser usado como una etiqueta literal de cadena: String.raw(..). Simplemente pasa por las versiones en bruto de las cadenas:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"