ECMAScript 6 propone un nuovo tipo di stringa letterale, usando il backtick come delimitatore. Questi valori letterali consentono di incorporare espressioni di interpolazione di stringhe di base, che vengono quindi analizzate e valutate 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);
Come puoi vedere, abbiamo usato il `around una serie di caratteri, che sono interpretati come una stringa letterale, ma qualsiasi espressione del modulo ${..}viene analizzata e valutata immediatamente in linea.
Un vantaggio davvero interessante dei letterali interpolati di stringhe è che possono dividersi su più righe:
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!
Espressioni interpolate
Ogni espressione valida può apparire all'interno ${..}di una stringa interpolata letterale, comprese le chiamate di funzione, le chiamate di espressione di funzione in linea e persino altri letterali di stringa interpolati!
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!
Qui, la `${who}s`stringa interpolata interna letterale è stata per noi un po 'più comoda quando si combina la whovariabile con la "s"stringa, al contrario who + "s". Inoltre, per mantenere una nota è una stringa interpolata letterale con ambito lessicale solo dove appare, non con ambito dinamico in alcun modo:
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!"
L'uso del modello letterale per l'HTML è decisamente più leggibile riducendo il fastidio.
Il vecchio modo semplice:
'<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>`
- La stringa può estendersi su più righe.
- Non è necessario sfuggire ai caratteri di citazione.
- Puoi evitare raggruppamenti come: ""> "
- Non è necessario utilizzare l'operatore plus.
Letterali modello con tag
Possiamo anche taggare una stringa di modello, quando viene taggata una stringa di modello, i valori letterali e le sostituzioni vengono passati alla funzione che restituisce il valore risultante.
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
Qui possiamo usare l'operatore spread per passare più valori. Il primo argomento - l'abbiamo chiamato stringhe - è un array di tutte le stringhe semplici (il materiale tra le espressioni interpolate).
Abbiamo poi raccogliamo tutti gli argomenti successivi in un array chiamato valori utilizzando la ... gather/rest operator, anche se si potrebbe, naturalmente, li hanno lasciato come singoli parametri denominati seguenti stringhe di parametri come abbiamo fatto in precedenza ( value1, value2, ecc).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Gli argomenti raccolti nella nostra matrice di valori sono i risultati delle espressioni di interpolazione già valutate trovate nella stringa letterale. Una stringa con tag letterale è come una fase di elaborazione dopo la valutazione delle interpolazioni, ma prima che venga compilato il valore della stringa finale, consentendo un maggiore controllo sulla generazione della stringa dal valore letterale. Diamo un'occhiata a un esempio di creazione di modelli riutilizzabili.
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);
Stringhe grezze
Le nostre funzioni tag ricevono un primo argomento che abbiamo chiamato stringhe, che è un array. Ma c'è un ulteriore bit di dati incluso: le versioni non elaborate non elaborate di tutte le stringhe. Puoi accedere a quei valori di stringa non elaborati utilizzando la .rawproprietà, in questo modo:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Come puoi vedere, la versione grezza della stringa preserva la \nsequenza di escape , mentre la versione elaborata della stringa la tratta come una vera nuova riga senza escape . ECMAScript 6 è dotato di una funzione built-in che può essere utilizzato come un tag letterali stringa: String.raw(..). Passa semplicemente attraverso le versioni non elaborate delle stringhe:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"