O ECMAScript 6 apresenta um novo tipo de literal de cadeia de caracteres, usando o backtick como delimitador. Esses literais permitem que expressões básicas de interpolação de cadeia sejam incorporadas, que são então analisadas e avaliadas automaticamente.
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 você pode ver, usamos `uma série de caracteres, que são interpretados como uma cadeia de caracteres literal, mas qualquer expressão do formulário ${..}é analisada e avaliada imediatamente em linha.
Um benefício muito bom dos literais de string interpolados é que eles podem se dividir em várias linhas:
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!
Expressões interpoladas
É permitido que qualquer expressão válida apareça dentro ${..}de um literal de seqüência de caracteres interpolado, incluindo chamadas de função, chamadas de expressão de função em linha e até mesmo outros literais de seqüência de caracteres 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!
Aqui, o `${who}s`literal interno da string interpolada foi uma conveniência um pouco melhor para nós quando combinamos a whovariável com a "s"string, em oposição a who + "s". Além disso, para manter uma nota, uma string interpolada literalmente tem um escopo lexicamente onde aparece, sem um escopo dinâmico de forma alguma:
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 o literal do modelo para o HTML é definitivamente mais legível, reduzindo o aborrecimento.
A maneira antiga e simples:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Com o ECMAScript 6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Sua string pode abranger várias linhas.
- Você não precisa escapar de caracteres de cotação.
- Você pode evitar agrupamentos como: '">'
- Você não precisa usar o operador mais.
Literais de modelo com a tag
Também podemos marcar uma sequência de modelo, quando uma sequência de modelo é marcada, os literais e substituições são passados para a função que retorna o 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 o operador spread aqui para passar vários valores. O primeiro argumento - que chamamos de strings - é uma matriz de todas as strings simples (o material entre quaisquer expressões interpoladas).
Em seguida, reunir-se todos os argumentos subseqüentes em uma matriz valores chamados usando o ... gather/rest operator, embora você poderia naturalmente ter deixado-los como individuais parâmetros nomeados seguintes as cordas de parâmetros como fizemos acima ( value1, value2, etc.).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Os argumentos reunidos em nossa matriz de valores são os resultados das expressões de interpolação já avaliadas encontradas na cadeia literal. Um literal de sequência marcado é como uma etapa de processamento após a avaliação das interpolações, mas antes da compilação do valor final da sequência, permitindo maior controle sobre a geração da sequência a partir do literal. Vejamos um exemplo de criação de modelos reutilizáveis.
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);
Raw Strings
Nossas funções de tag recebem um primeiro argumento que chamamos de strings, que é uma matriz. Mas há um bit adicional de dados incluído: as versões não processadas brutas de todas as strings. Você pode acessar esses valores de cadeia bruta usando a .rawpropriedade, assim:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Como você pode ver, a versão bruta da string preserva a \nsequência de escape , enquanto a versão processada da string a trata como uma nova linha real sem escape. ECMAScript 6 vem com uma função built-in que pode ser usado como um Tag literal string: String.raw(..). Ele simplesmente passa pelas versões brutas das strings:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"