Utilisation du caractère backtick (`) en JavaScript?

Question

En JavaScript, un backtick^† semble fonctionner comme une citation simple. Par exemple, je peux utiliser un backtick pour définir une chaîne comme celle-ci:

var s = `abc`;

Existe-t-il une quelconque différence entre le comportement de l’arrière-guichet et celui d’une citation unique?

---

^{† Notez que parmi les programmeurs, "backtick" est un nom pour ce qu'on appelle plus généralement le accent grave . Les programmeurs utilisent aussi parfois les noms alternatifs "backquote" et "backgrave". En outre, sur le dépassement de pile et ailleurs, d'autres orthographes courantes pour "backtick" sont "back-tick" et "back tick".}

Answer 1

Il s’agit d’une fonctionnalité appelée modèles de littéraux .

Elles ont été appelées "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 versions ultérieures, mais pas par Internet Explorer.

• Exemples: http://tc39wiki.calculist.org/es6/template-strings/
• Spécification officielle: Spécification de langue ECMAScript 2015, 12.2.9 Composants lexicaux littéraux de modèle (un peu sec)

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

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

Sortie:

---
   a is: 123
---

Qui plus est, ils peuvent contenir non seulement un nom de variable, mais également une expression Javascript:

var a = 3, b = 3.1415;

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

Answer 2

ECMAScript 6 propose un nouveau type de littéral de chaîne, utilisant le coche en arrière comme délimiteur. Ces littéraux permettent l'intégration d'expressions d'interpolation de chaînes 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 constater, nous avons utilisé le ` autour d'une série de caractères, interprétés comme un littéral de chaîne, mais toutes les expressions de la forme ${..} sont analysées et évaluées immédiatement en ligne.

Un avantage vraiment intéressant des littéraux de chaîne interpolés est qu'ils sont autorisés à se diviser en 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 dans ${..} dans un littéral de chaîne interpolé, y compris les appels de fonction, les appels d’expression de fonction inline 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 littéral de chaîne interpolé `${who}s` interne était un peu plus pratique pour nous lorsque nous combinions la variable who avec la chaîne "s", par opposition à who + "s". De plus, pour garder une note, un littéral de chaîne interpolé est uniquement délimité lexicalement là où il apparaît, et non dynamiquement de quelque manière que ce soit

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 code HTML est nettement plus lisible en réduisant les inconvénients.

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'êtes pas obligé d'échapper aux caractères de citation.
• Vous pouvez éviter des groupes tels que: ""> "
• Vous n'êtes pas obligé d'utiliser l'opérateur plus.

Littéraux de modèles étiquetés

Nous pouvons également étiqueter une chaîne de modèle. Lorsqu'une chaîne de modèle est étiquetée, les littéraux et les substitutions sont passés à function 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 ici l'opérateur spread pour transmettre plusieurs valeurs. Le premier argument - nous l'appelons des chaînes - est un tableau de toutes les chaînes simples (le contenu entre toutes les expressions interpolées).

Nous rassemblons ensuite tous les arguments suivants dans un tableau appelé valeurs à l’aide de ... gather/rest operator, bien que vous ayez bien sûr pu les laisser en tant que paramètres nommés individuels après le paramètre strings, 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

Le ou 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 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 propriété .raw, comme ceci:

function showraw(strings, ...values) {
  console.log(strings);
  console.log(strings.raw);
}
showraw`Hello\nWorld`;

Comme vous pouvez le constater, la version brute de la chaîne conserve la séquence échappée \n, tandis que la version traitée de la chaîne la traite comme une nouvelle ligne réelle non échappée. ECMAScript 6 est fourni avec une fonction intégrée qui peut être utilisée comme balise littérale de chaîne: String.raw(..). Il passe simplement à travers les versions brutes des chaînes:

console.log(`Hello\nWorld`);
/* "Hello
World" */

console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"

Answer 3

Les Backticks (`) sont utilisés pour définir les littéraux de modèles. Les littéraux de modèle sont une nouvelle fonctionnalité de ES6 facilitant l'utilisation des chaînes.

Caractéristiques:

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

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

Exemple:

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

Pour interpoler les variables ou les expressions, nous pouvons utiliser la notation ${expression} 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 qu'il n'est plus nécessaire d'utiliser \n pour les nouvelles lignes.

Exemple:

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

Sortie:

Hello Rohit!
How are you?

Answer 4

Les backticks englobent les littéraux de modèle, auparavant appelés chaînes de modèle. Les littéraux de modèle sont des littéraux de chaîne qui autorisent les expressions incorporées et les fonctionnalités d'interpolation de chaîne.

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

Pour échapper à un backtick, mettez une barre oblique inverse devant celui-ci:

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

Utilisez des backticks pour écrire plus facilement des chaînes multilignes:

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

ou

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

vanilla 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 lancés par \u, par exemple \u00A9
• Les échappements de points de code Unicode indiqués par \u{}, par exemple \u{2F804}
• Échappements hexadécimaux lancés par \x, par exemple \xA9
• Échappements littéraux octaux commençant par \ et un ou plusieurs chiffres, par exemple \251

Answer 5

Sommaire:

Les Backticks en JavaScript sont une fonctionnalité introduite dans ECMAScript 6 // ECMAScript 2015 pour faciliter la création de chaînes dynamiques. 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:

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

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:

Les littéraux de chaîne de modèle sont pris en charge de manière native par tous les principaux fournisseurs de navigateurs (sauf Internet Explorer). Il est donc plutôt prudent d’utiliser ce code dans votre code de production. Une liste plus détaillée des compatibilités de navigateur peut être trouvée ici .

Answer 6

La bonne partie est que nous pouvons faire les 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>

Cela devint 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>

Answer 7

En plus de l’interpolation de chaîne, 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 stylé , ils l'utilisent beaucoup.