Verwendung des Backtick-Zeichens (`) in JavaScript

Question

In JavaScript funktioniert ein Backtick† anscheinend genauso wie ein einfaches Anführungszeichen. Zum Beispiel kann ich ein Backtick verwenden, um einen String wie diesen zu definieren:

var s = `abc`;

Gibt es eine Möglichkeit, in der sich das Verhalten des Backticks tatsächlich von dem eines einfachen Anführungszeichens unterscheidet?

---

† Beachten Sie, dass unter Programmierern "Backtick" eine Bezeichnung für das ist, was allgemeiner als Gravis bezeichnet wird. Programmierer verwenden manchmal auch die alternativen Bezeichnungen "Backquote" und "Backgrave". Außerdem sind auf Stack Overflow und anderswo andere gängige Schreibweisen für "Backtick" "back-tick" und "back tick".

Answer 1

Zusammenfassung:

Backticks in JavaScript ist ein Feature, das in ECMAScript 6 // ECMAScript 2015 eingeführt wurde, um das Erstellen von dynamischen Zeichenketten zu erleichtern. Dieses ECMAScript 6-Feature wird auch als Vorlagenzeichenfolge bezeichnet. Es bietet die folgenden Vorteile im Vergleich zu normalen Zeichenketten:

• In Vorlagenzeichenfolgen sind Zeilenumbrüche zulässig und können daher mehrzeilig sein. Normale Zeichenkettenliterale (deklariert mit '' oder "") dürfen keine Zeilenumbrüche haben.
• Wir können einfach Variablenwerte in die Zeichenkette mit der Syntax ${myVariable} interpolieren.

Beispiel:

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

const story = `
  Mein Name ist: ${name}
  Und ich bin: ${age} Jahre alt
`;

console.log(story);

Browserkompatibilität:

Vorlagenzeichenfolgen werden von allen großen Browserherstellern nativ unterstützt (außer Internet Explorer). Daher ist es ziemlich sicher, sie in Ihrem Produktionscode zu verwenden. Eine detailliertere Liste der Browserkompatibilitäten finden Sie hier.

Answer 2

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

let nuts = 7

more.innerHTML = `

Es wurde wirklich nützlich in einer Fabrikfunktion:

function nuts(it){
  return `
    Du hast ${it} Nüsse! 
    Cosinus deiner Nüsse: ${Math.cos(it)} 
    Dreifache Nüsse: ${3 * it} 
    Deine Nüsse im BASE64 formatiert: ${btoa(it)}
  `
}

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

Answer 3

Das Backtick-Zeichen (`) in JavaScript wird verwendet, um Vorlage-Zeichenfolgen zu definieren. Eine Vorlage-Zeichenfolge ist ein spezieller Stringtyp, der es Ihnen ermöglicht, Ausdrücke einzubetten, die ausgewertet und in den endgültigen String aufgenommen werden. Sie werden dadurch gekennzeichnet, dass sie vom Backtick-Zeichen (`) umgeben sind, anstatt von einfachen Anführungszeichen (') oder doppelten Anführungszeichen (").

Hier ist ein Beispiel für die Verwendung einer Vorlagezeichenfolge, um einen Ausdruck in einem String einzubetten:

const name = "Akila";
const message = `Hallo, ${name}!`;
console.log(message); // Ausgabe: Hallo, Akila!

In dem obigen Beispiel wird der Ausdruck ${name} ausgewertet und in den endgültigen String aufgenommen, der der Variablen message zugewiesen wird.

Vorlagezeichenfolgen bieten auch mehrere praktische Funktionen, wie Mehrzeilenzeichenfolgen und Zeichenfolgeninterpolation. Mehrzeilenzeichenfolgen ermöglichen es Ihnen, Zeilenumbrüche in Ihren Zeichenfolgen zu verwenden, was besonders nützlich für die Erstellung formatierten Texts ist.

Hier ist ein Beispiel für die Verwendung einer Mehrzeilenzeichenfolge mit einer Vorlagezeichenfolge:

const message = `Dies ist eine
Mehrzeilenzeichenfolge.`;
console.log(message);

Ausgabe

Dies ist eine
Mehrzeilenzeichenfolge.

Zusammenfassend wird das Backtick-Zeichen (`) in JavaScript verwendet, um Vorlagezeichenfolgen zu definieren, die eine bequeme Möglichkeit bieten, Ausdrücke und Mehrzeilenzeichenfolgen in Ihrem JavaScript-Code einzuschließen.

Answer 4

Viele der Kommentare beantworten die meisten Ihrer Fragen, aber ich wollte hauptsächlich zu dieser Frage beitragen:

Gibt es eine Möglichkeit, wie sich das Verhalten des Backticks tatsächlich von dem eines einfachen Anführungszeichens unterscheidet?

Ein Unterschied, den ich bei Template-Strings festgestellt habe, ist die Unfähigkeit, diese als Objekteigenschaft festzulegen. Weitere Informationen unter diesem Beitrag; ein interessantes Zitat aus der akzeptierten Antwort:

Template-Strings sind Ausdrücke, keine Literale1.

Aber im Grunde, wenn Sie es jemals als Objekteigenschaft verwenden wollen, müssten Sie es in eckige Klammern einschließen.

// Wirft einen Fehler
const object = {`templateString`: true};

// Funktioniert
const object = {[`templateString`]: true};

Answer 5

Es handelt sich um eine ziemlich nützliche Funktionalität, hier ist zum Beispiel ein Node.js-Codeausschnitt, um die Einrichtung einer 3-Sekunden-Zeitfunktion zu testen.

const waitTime = 3000;
console.log(`eine Verzögerung von ${waitTime/1000} Sekunden einstellen`);

Erklärung

1. Warten Siezeit als 3000 deklarieren
2. Mit dem Gravis-Zeichen (backtick) können Sie das Ergebnis der Berechnung von 'Wartezeit' geteilt durch 1000 in derselben Zeile mit Ihrem ausgewählten Text einbetten.
3. Ein weiterer Aufruf einer Timerfunktion mit der Konstanten 'waitTime' führt zu einer 3-Sekunden-Verzögerung, wie im Argument von console.log berechnet.