ECMAScript 6 propose un nouveau type de chaîne littérale, utilisant le backtick comme délimiteur. Ces littéraux permettent d'incorporer des expressions d'interpolation de chaîne de base, qui sont ensuite automatiquement analysées et évaluées.
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);
Comme vous pouvez le voir, nous avons utilisé `autour d'une série de caractères, qui sont interprétés comme un littéral de chaîne, mais toutes les expressions du formulaire ${..}sont analysées et évaluées en ligne immédiatement.
Un très bon avantage des littéraux de chaîne interpolés est qu'ils sont autorisés à se répartir sur plusieurs lignes:
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!
Expressions interpolées
Toute expression valide est autorisée à apparaître à l'intérieur ${..}dans un littéral de chaîne interpolé, y compris les appels de fonction, les appels d'expression de fonction en ligne et même d'autres littéraux de chaîne interpolés!
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!
Ici, le `${who}s`littéral de chaîne interpolé intérieur était un peu plus pratique pour nous lors de la combinaison de la whovariable avec la "s"chaîne, par opposition à who + "s". De plus, pour conserver une note, un littéral de chaîne interpolée est juste délimité lexicalement là où il apparaît, non limité dynamiquement en aucune façon:
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'utilisation du modèle littéral pour le HTML est nettement plus lisible en réduisant la gêne.
La vieille manière simple:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Avec ECMAScript 6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Votre chaîne peut s'étendre sur plusieurs lignes.
- Vous n'avez pas à échapper les guillemets.
- Vous pouvez éviter les regroupements tels que: ""> "
- Vous n'avez pas besoin d'utiliser l'opérateur plus.
Littéraux de modèle balisés
Nous pouvons également baliser une chaîne de modèle, lorsqu'une chaîne de modèle est balisée, les littéraux et les substitutions sont passés à la fonction qui renvoie la valeur résultante.
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
Nous pouvons utiliser l'opérateur d'étalement ici pour passer plusieurs valeurs. Le premier argument - nous l'avons appelé chaînes - est un tableau de toutes les chaînes simples (le truc entre toutes les expressions interpolées).
Nous recueillons ensuite tous les arguments suivants dans un tableau appelé valeurs à l' aide ... gather/rest operator, mais vous pouvez bien sûr les ont laissé en tant que paramètres nommés individuels suivant les chaînes de paramètres comme nous l' avons fait ci - dessus ( value1, value2, etc.).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Les arguments rassemblés dans notre tableau de valeurs sont les résultats des expressions d'interpolation déjà évaluées trouvées dans le littéral de chaîne. Un littéral de chaîne balisé est comme une étape de traitement après l'évaluation des interpolations, mais avant la compilation de la valeur de chaîne finale, ce qui vous permet de mieux contrôler la génération de la chaîne à partir du littéral. Regardons un exemple de création de modèles réutilisables.
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);
Cordes brutes
Nos fonctions de balise reçoivent un premier argument que nous avons appelé chaînes, qui est un tableau. Mais il y a un peu de données supplémentaires incluses: les versions brutes non traitées de toutes les chaînes. Vous pouvez accéder à ces valeurs de chaîne brutes à l'aide de la .rawpropriété, comme ceci:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Comme vous pouvez le voir, la version brute de la chaîne préserve la \nséquence d'échappement, tandis que la version traitée de la chaîne la traite comme une véritable nouvelle ligne sans échappement. ECMAScript 6 est livré avec une fonction intégrée qui peut être utilisé comme une chaîne littérale étiquette: String.raw(..). Il passe simplement par les versions brutes des chaînes:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"