Verwendung des Backtick-Zeichens (`) in JavaScript

In JavaScript scheint ein Backtick ^† genauso zu funktionieren wie ein einfaches Anführungszeichen. Zum Beispiel kann ich einen Backtick verwenden, um eine Zeichenfolge wie folgt zu definieren:

var s = `abc`;

Gibt es eine Art und Weise, in der sich das Verhalten des Backticks tatsächlich von dem eines einzelnen Anführungszeichens unterscheidet?

^{† Beachten Sie, dass unter Programmierern "Backtick" ein Name für das ist, was allgemein als schwerwiegender Akzent bezeichnet wird . Programmierer verwenden manchmal auch die alternativen Namen "backquote" und "backgrave". Auch auf Stack - Überlauf und anderswo, andere gemeinsame Schreibweisen für „Graviszeichen“ sind „Graviszeichen“ und „zurück tick“.}

Dies ist eine Funktion, die als Vorlagenliterale bezeichnet wird .

Sie wurden in früheren Ausgaben der ECMAScript 2015-Spezifikation als "Vorlagenzeichenfolgen" bezeichnet.

Vorlagenliterale werden von Firefox 34, Chrome 41 und Edge 12 und höher unterstützt, nicht jedoch von Internet Explorer.

• Beispiele: http://tc39wiki.calculist.org/es6/template-strings/
• Offizielle Spezifikation: ECMAScript 2015 Sprachspezifikation, 12.2.9 Template Literal Lexical Components (etwas trocken)

Vorlagenliterale können verwendet werden, um mehrzeilige Zeichenfolgen darzustellen, und können "Interpolation" verwenden, um Variablen einzufügen:

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

Ausgabe:

---
   a is: 123
---

Was noch wichtiger ist, sie können nicht nur einen Variablennamen, sondern einen beliebigen JavaScript-Ausdruck enthalten:

var a = 3, b = 3.1415;

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

ECMAScript 6 bietet einen neuen Typ von Zeichenfolgenliteral, bei dem der Backtick als Trennzeichen verwendet wird. Mit diesen Literalen können grundlegende Zeichenfolgeninterpolationsausdrücke eingebettet werden, die dann automatisch analysiert und ausgewertet werden.

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);

Wie Sie sehen können, haben wir `eine Reihe von Zeichen verwendet, die als Zeichenfolgenliteral interpretiert ${..}werden. Alle Ausdrücke des Formulars werden jedoch sofort analysiert und inline ausgewertet.

Ein wirklich schöner Vorteil interpolierter String-Literale ist, dass sie sich über mehrere Zeilen verteilen dürfen:

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!

Interpolierte Ausdrücke

Jeder gültige Ausdruck darf ${..}in einem interpolierten Zeichenfolgenliteral enthalten sein, einschließlich Funktionsaufrufen, Inline-Funktionsausdrucksaufrufen und sogar anderen interpolierten Zeichenfolgenliteralen!

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!

Hier war das innere `${who}s`interpolierte String-Literal für uns ein wenig angenehmer, wenn wir die whoVariable mit dem "s"String kombinierten , im Gegensatz zu who + "s". Um eine Notiz zu behalten, wird ein interpoliertes Zeichenfolgenliteral nur lexikalisch dort angezeigt, wo es angezeigt wird, und in keiner Weise dynamisch:

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!"

Die Verwendung des Vorlagenliteral für den HTML-Code ist definitiv besser lesbar, da der Ärger verringert wird.

Der einfache alte Weg:

'<div class="' + className + '">' +
  '<p>' + content + '</p>' +
  '<a href="' + link + '">Let\'s go</a>'
'</div>';

Mit ECMAScript 6:

`<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let's go</a>
</div>`

• Ihre Zeichenfolge kann mehrere Zeilen umfassen.
• Sie müssen Anführungszeichen nicht umgehen.
• Sie können Gruppierungen wie: ""> "vermeiden.
• Sie müssen den Plus-Operator nicht verwenden.

Verschlagwortet mit Vorlagenliterale

Wir können auch eine Vorlagenzeichenfolge markieren. Wenn eine Vorlagenzeichenfolge markiert wird, werden die Literale und Ersetzungen an die Funktion übergeben, die den resultierenden Wert zurückgibt.

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

Wir können hier den Spread-Operator verwenden, um mehrere Werte zu übergeben. Das erste Argument - wir haben es Strings genannt - ist ein Array aller einfachen Strings (das Zeug zwischen interpolierten Ausdrücken).

Wir sammeln dann alle nachfolgenden Argumente in ein Array mit Namen Werte bis unter Verwendung der ... gather/rest operator, obwohl man kann natürlich haben sie als einzelne benannte Parameter links ab und folgen den Saiten Parameter wie wir oben haben ( value1, value2usw.).

function myTaggedLiteral(strings, ...values) {
  console.log(strings);
  console.log(values);
}

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5

Die in unserem Wertearray gesammelten Argumente sind die Ergebnisse der bereits ausgewerteten Interpolationsausdrücke, die im Zeichenfolgenliteral gefunden wurden. Ein mit Tags versehenes String-Literal ähnelt einem Verarbeitungsschritt, nachdem die Interpolationen ausgewertet wurden, jedoch bevor der endgültige String-Wert kompiliert wurde, sodass Sie mehr Kontrolle über das Generieren des Strings aus dem Literal haben. Schauen wir uns ein Beispiel für die Erstellung wiederverwendbarer Vorlagen an.

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);

Rohe Saiten

Unsere Tag-Funktionen erhalten ein erstes Argument, das wir als Strings bezeichnet haben. Dabei handelt es sich um ein Array. Es sind jedoch noch einige weitere Daten enthalten: die unverarbeiteten Rohversionen aller Zeichenfolgen. Sie können mit der .rawEigenschaft wie folgt auf diese Rohzeichenfolgenwerte zugreifen :

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

Wie Sie sehen können, \nbehält die Rohversion der Zeichenfolge die maskierte Sequenz bei, während die verarbeitete Version der Zeichenfolge sie wie eine echte neue Zeile behandelt. ECMAScript 6 verfügt über eine integrierte Funktion, die als String-Literal-Tag verwendet werden kann : String.raw(..). Es werden einfach die Rohversionen der Zeichenfolgen durchlaufen:

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

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

Backticks ( `) werden verwendet, um Vorlagenliterale zu definieren. Vorlagenliterale sind eine neue Funktion in ECMAScript 6, um die Arbeit mit Zeichenfolgen zu vereinfachen.

Eigenschaften:

• Wir können jede Art von Ausdruck in den Vorlagenliteralen interpolieren.
• Sie können mehrzeilig sein.

Hinweis: Wir können problemlos einfache Anführungszeichen ( ') und doppelte Anführungszeichen ( ") in den Backticks ( `) verwenden.

Beispiel:

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

Um die Variablen oder den Ausdruck zu interpolieren, können wir dafür die ${expression}Notation verwenden.

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

Mehrzeilige Zeichenfolgen bedeuten, dass Sie sie nicht mehr \nfür neue Zeilen verwenden müssen.

Beispiel:

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

Ausgabe:

Hello Rohit!
How are you?

Backticks schließen Vorlagenliterale ein, die früher als Vorlagenzeichenfolgen bezeichnet wurden. Vorlagenliterale sind Zeichenfolgenliterale, die eingebettete Ausdrücke und Zeichenfolgeninterpolationsfunktionen ermöglichen.

Vorlagenliterale haben in Platzhalter eingebettete Ausdrücke, die durch das Dollarzeichen und geschweifte Klammern um einen Ausdruck gekennzeichnet sind, d ${expression}. H. Der Platzhalter / die Ausdrücke werden an eine Funktion übergeben. Die Standardfunktion verkettet nur die Zeichenfolge.

Um einem Backtick zu entkommen, setzen Sie einen Backslash davor:

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

Verwenden Sie Backticks, um mehrzeilige Zeichenfolgen einfacher zu schreiben:

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

oder

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

Vanille JavaScript:

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

oder

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

Escape-Sequenzen:

• Unicode-Escapezeichen \u, die beispielsweise von gestartet wurden\u00A9
• Unicode-Codepunkt-Escapezeichen werden \u{}beispielsweise durch angezeigt\u{2F804}
• Hexadezimale Escapezeichen \x, die beispielsweise von gestartet wurden\xA9
• Oktal-Literal-Escapezeichen, die beispielsweise mit \und (a) Ziffer (n) beginnen\251

Zusammenfassung:

Backticks in JavaScript sind eine Funktion, die in ECMAScript 6 // ECMAScript 2015 eingeführt wurde, um einfache dynamische Zeichenfolgen zu erstellen. Diese ECMAScript 6-Funktion wird auch als Vorlagenzeichenfolgenliteral bezeichnet . Es bietet im Vergleich zu normalen Saiten folgende Vorteile:

• In Vorlagenzeichenfolgen sind Zeilenumbrüche zulässig und können daher mehrzeilig sein. Normale String-Literale (mit ''oder deklariert "") dürfen keine Zeilenumbrüche aufweisen.
• Mit der ${myVariable}Syntax können wir problemlos Variablenwerte in den String interpolieren .

Beispiel:

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

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

console.log(story);

Browser-Kompatibilität:

Template-String-Literal wird von allen großen Browser-Anbietern (außer Internet Explorer) nativ unterstützt. Die Verwendung in Ihrem Produktionscode ist also ziemlich sicher. Eine detailliertere Liste der Browserkompatibilitäten finden Sie hier .

Neben der String-Interpolation können Sie eine Funktion auch mit Back-Tick aufrufen.

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

// To call this function using ``

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

// Or
sayHello`
    some args
`;

Überprüfen Sie die gestaltete Komponente . Sie benutzen es stark.

Der gute Teil ist, dass wir grundlegende Mathematik direkt machen können:

let nuts = 7

more.innerHTML = `

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

<hr>

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

`

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

Es wurde wirklich nützlich in einer Fabrikfunktion:

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>