Utilisation du caractère backtick (`) en JavaScript

En JavaScript, un backtick ^† semble fonctionner de la même manière qu'un devis simple. Par exemple, je peux utiliser un backtick pour définir une chaîne comme celle-ci:

var s = `abc`;

Existe-t-il un moyen pour que le comportement du backtick diffère réellement de celui d'un guillemet simple?

^{† Notez que parmi les programmeurs, "backtick" est un nom pour ce qui est plus généralement appelé l' accent grave . Les programmeurs utilisent également parfois les noms alternatifs "backquote" et "backgrave". En outre, sur Stack Overflow et ailleurs, d'autres orthographes courantes pour "backtick" sont "back-tick" et "back tick".}

Il s'agit d'une fonctionnalité appelée littéraux de modèle .

Ils étaient appelés «chaînes de modèle» dans les éditions précédentes de la spécification ECMAScript 2015.

Les littéraux de modèle sont pris en charge par Firefox 34, Chrome 41 et Edge 12 et supérieur, mais pas par Internet Explorer.

• Exemples: http://tc39wiki.calculist.org/es6/template-strings/
• Spécification officielle: ECMAScript 2015 Language Specification, 12.2.9 Template Literal Lexical Components (un peu sec)

Les littéraux de modèle peuvent être utilisés pour représenter des chaînes multilignes et peuvent utiliser une "interpolation" pour insérer des variables:

var a = 123, str = `---
   a is: ${a}
---`;
console.log(str);

Production:

---
   a is: 123
---

Plus important encore, ils peuvent contenir non seulement un nom de variable, mais toute expression JavaScript:

var a = 3, b = 3.1415;

console.log(`PI is nearly ${Math.max(a, b)}`);

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"

Les backticks ( `) sont utilisés pour définir les littéraux de modèle. Les littéraux de modèle sont une nouvelle fonctionnalité d'ECMAScript 6 pour faciliter le travail avec les chaînes.

Fonctionnalités:

• nous pouvons interpoler n'importe quel type d'expression dans les littéraux de modèle.
• Ils peuvent être multilignes.

Remarque: nous pouvons facilement utiliser des guillemets simples ( ') et des guillemets doubles ( ") à l'intérieur des backticks ( `).

Exemple:

var nameStr = `I'm "Rohit" Jindal`;

Pour interpoler les variables ou l'expression, nous pouvons utiliser la ${expression}notation pour cela.

var name = 'Rohit Jindal';
var text = `My name is ${name}`;
console.log(text); // My name is Rohit Jindal

Les chaînes multilignes signifient que vous n'avez plus besoin d'utiliser \nde nouvelles lignes.

Exemple:

const name = 'Rohit';
console.log(`Hello ${name}!
How are you?`);

Production:

Hello Rohit!
How are you?

Les backticks contiennent des littéraux de modèle, anciennement appelés chaînes de modèle. Les littéraux de modèle sont des littéraux de chaîne qui permettent des expressions incorporées et des fonctions d'interpolation de chaîne.

Les littéraux de modèle ont des expressions intégrées dans des espaces réservés, désignées par le signe dollar et les accolades autour d'une expression, c'est-à-dire ${expression}. L'espace réservé / expressions est passé à une fonction. La fonction par défaut concatène simplement la chaîne.

Pour échapper à un backtick, mettez une barre oblique inverse avant:

`\`` === '`'; => true

Utilisez des raccourcis pour écrire plus facilement une chaîne de plusieurs lignes:

console.log(`string text line 1
string text line 2`);

ou

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

vs vanille JavaScript:

console.log('string text line 1\n' +
'string text line 2');

ou

console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

Séquences d'échappement:

• Échappements Unicode démarrés par \u, par exemple\u00A9
• Les échappements de point de code Unicode indiqués par \u{}, par exemple\u{2F804}
• Les échappements hexadécimaux commencés par \x, par exemple\xA9
• Les échappements littéraux octaux commencés par \et (a) chiffre (s), par exemple\251

Résumé:

Les backticks en JavaScript sont une fonctionnalité introduite dans ECMAScript 6 // ECMAScript 2015 pour créer des chaînes dynamiques faciles. Cette fonctionnalité ECMAScript 6 est également appelée littéral de chaîne de modèle . Il offre les avantages suivants par rapport aux chaînes normales:

• Dans les chaînes de modèle, les sauts de ligne sont autorisés et peuvent donc être multilignes. Les littéraux de chaîne normaux (déclarés avec ''ou "") ne peuvent pas avoir de sauts de ligne.
• Nous pouvons facilement interpoler les valeurs des variables dans la chaîne avec la ${myVariable}syntaxe.

Exemple:

const name = 'Willem';
const age = 26;

const story = `
  My name is: ${name}
  And I'm: ${age} years old
`;

console.log(story);

Compatibilité du navigateur:

Le littéral de chaîne de modèle est pris en charge nativement par tous les principaux fournisseurs de navigateurs (sauf Internet Explorer). Il est donc assez économique de l'utiliser dans votre code de production. Une liste plus détaillée des compatibilités du navigateur peut être trouvée ici .

Outre l'interpolation de chaînes, vous pouvez également appeler une fonction à l'aide de back-tick.

var sayHello = function () {
    console.log('Hello', arguments);
}

// To call this function using ``

sayHello`some args`; // Check console for the output

// Or
sayHello`
    some args
`;

Vérifiez le composant stylisé . Ils l'utilisent beaucoup.

La bonne partie est que nous pouvons faire des mathématiques de base directement:

let nuts = 7

more.innerHTML = `

<h2>You collected ${nuts} nuts so far!

<hr>

Double it, get ${nuts + nuts} nuts!!

`

<div id="more"></div>

Il est devenu vraiment utile dans une fonction d'usine:

function nuts(it){
  return `
    You have ${it} nuts! <br>
    Cosinus of your nuts: ${Math.cos(it)} <br>
    Triple nuts: ${3 * it} <br>
    Your nuts encoded in BASE64:<br> ${btoa(it)}
  `
}

nut.oninput = (function(){
  out.innerHTML = nuts(nut.value)
})

<h3>NUTS CALCULATOR
<input type="number" id="nut">

<div id="out"></div>