Grammatik und Typen

JavaScript übernimmt den größten Teil seiner Syntax von Java, C und C++, wurde jedoch auch von Awk, Perl und Python beeinflusst.

JavaScript ist groß- und kleinschreibungssensitiv und verwendet den Unicode-Zeichensatz. Zum Beispiel könnte das Wort Früh (das 'früh' auf Deutsch bedeutet) als Variablenname verwendet werden.

const Früh = "foobar";

Aber die Variable früh ist nicht dasselbe wie Früh, weil JavaScript groß- und kleinschreibungssensitiv ist.

In JavaScript werden Anweisungen als Statements bezeichnet und durch Semikolons (;) getrennt.

Ein Semikolon ist nach einer Anweisung nicht erforderlich, wenn diese alleinstehend in einer Zeile geschrieben wird. Wenn jedoch mehr als eine Anweisung in einer Zeile erwünscht ist, müssen sie durch Semikolons getrennt werden.

Es gilt jedoch als bewährte Methode, immer ein Semikolon nach einer Anweisung zu setzen, selbst wenn es nicht strikt notwendig ist. Diese Praxis reduziert die Wahrscheinlichkeit, dass sich Bugs in den Code einschleichen.

Der Quelltext eines JavaScript-Skripts wird von links nach rechts gescannt und in eine Folge von Eingabeelementen umgewandelt, die Tokens, Steuerzeichen, Zeilenabschlüsse, Kommentare oder Leerzeichen sind. (Leerzeichen, Tabs und Zeilenumbruchzeichen werden als Leerzeichen betrachtet.)

Die Syntax von Kommentaren ist dieselbe wie in C++ und vielen anderen Sprachen:

// a one line comment

/* this is a longer,
 * multi-line comment
 */

Sie können Blockkommentare nicht verschachteln. Dies tritt oft auf, wenn Sie versehentlich eine */-Sequenz in Ihren Kommentar einfügen, die den Kommentar beendet.

/* You can't, however, /* nest comments */ SyntaxError */

In diesem Fall müssen Sie das */-Muster unterbrechen. Zum Beispiel durch Einfügen eines Backslashes:

/* You can /* nest comments *\/ by escaping slashes */

Kommentare verhalten sich wie Leerzeichen und werden während der Skriptausführung verworfen.

JavaScript hat drei Arten von Variablendeklarationen.

var

Deklariert eine Variable und initialisiert sie optional mit einem Wert.

let

Deklariert eine blockbezogene, lokale Variable und initialisiert sie optional mit einem Wert.

const

Deklariert eine blockbezogene, unveränderbare benannte Konstante.

Sie verwenden Variablen als symbolische Namen für Werte in Ihrer Anwendung. Die Namen der Variablen, sogenannte Bezeichner, unterliegen bestimmten Regeln.

Ein JavaScript-Bezeichner beginnt normalerweise mit einem Buchstaben, einem Unterstrich (_) oder einem Dollarzeichen ($). Nachfolgende Zeichen können auch Ziffern (0 – 9) sein. Da JavaScript groß- und kleinschreibungssensitiv ist, umfassen Buchstaben die Zeichen A bis Z (Großbuchstaben) sowie a bis z (Kleinbuchstaben).

Sie können die meisten Unicode-Buchstaben wie å und ü in Bezeichnern verwenden. (Für weitere Details siehe die Referenz zur lexikalischen Grammatik.) Sie können auch Unicode-Escape-Sequenzen verwenden, um Zeichen in Bezeichnern darzustellen.

Einige Beispiele für gültige Namen sind Number_hits, temp99, $credit und _name.

Sie können eine Variable auf zwei Arten deklarieren:

• Mit dem Schlüsselwort var. Zum Beispiel var x = 42. Diese Syntax kann verwendet werden, um sowohl lokale als auch globale Variablen zu deklarieren, abhängig vom Ausführungskontext.
• Mit den Schlüsselwörtern const oder let. Zum Beispiel let y = 13. Diese Syntax kann verwendet werden, um eine blockbezogene lokale Variable zu deklarieren. (Siehe Variablenbereich unten.)

Sie können Variablen deklarieren, um Werte mit der Destrukturierungs-Syntax zu entpacken. Zum Beispiel const { bar } = foo. Dies erstellt eine Variable namens bar und weist ihr den Wert zu, der dem gleichnamigen Schlüssel aus unserem Objekt foo entspricht.

Variablen sollten immer deklariert werden, bevor sie verwendet werden. JavaScript erlaubte es früher, nicht deklarierte Variablen zuzuweisen, was eine nicht deklarierte globale Variable erstellt. Dies ist ein Fehler im Strikten Modus und sollte insgesamt vermieden werden.

In einer Anweisung wie let x = 42 wird der Teil let x als Deklaration bezeichnet, und der Teil = 42 als Initialisierer. Die Deklaration ermöglicht den späteren Zugriff auf die Variable im Code, ohne einen ReferenceError zu werfen, während der Initialisierer der Variablen einen Wert zuweist. Bei var- und let-Deklarationen ist der Initialisierer optional. Wenn eine Variable ohne Initialisierer deklariert wird, wird ihr der Wert undefined zugewiesen.

let x;
console.log(x); // logs "undefined"

Im Wesentlichen ist let x = 42 äquivalent zu let x; x = 42.

const-Deklarationen benötigen immer einen Initialisierer, da sie nach der Deklaration jede Art von Zuweisung verbieten, und sie implizit mit undefined zu initialisieren, wäre wahrscheinlich ein Programmierfehler.

const x; // SyntaxError: Missing initializer in const declaration

Eine Variable kann einem der folgenden Bereiche angehören:

• Globaler Bereich: Der Standardbereich für alle im Skriptmodus ausgeführten Codes.
• Modulisierungsbereich: Der Bereich für im Modus laufen Modul.
• Funktionsbereich: Der Bereich, der mit einer Funktion erstellt wurde.

Zusätzlich können Variablen, die mit let oder const definiert sind, einem zusätzlichen Bereich angehören:

• Blockbereich: Der Bereich, der mit einem Paar geschweifter Klammern (einem Block) erstellt wurde.

Wenn Sie eine Variable außerhalb einer Funktion deklarieren, wird sie als globale Variable bezeichnet, da sie für jeden anderen Code im aktuellen Dokument verfügbar ist. Wenn Sie eine Variable innerhalb einer Funktion deklarieren, wird sie als lokale Variable bezeichnet, da sie nur innerhalb dieser Funktion verfügbar ist.

let- und const-Deklarationen können auch auf den Blockanweisung begrenzt werden, in dem sie deklariert werden.

if (Math.random() > 0.5) {
  const y = 5;
}
console.log(y); // ReferenceError: y is not defined

Allerdings sind mit var erstellte Variablen nicht blockbezogen, sondern nur lokal zu der Funktion (oder dem globalen Bereich), in der sich der Block befindet.

Beispielsweise wird der folgende Code 5 protokollieren, da der Bereich von x der globale Kontext (oder der Funktionskontext, wenn der Code Teil einer Funktion ist) ist. Der Bereich von x ist nicht auf den unmittelbaren if-Anweisungsblock beschränkt.

if (true) {
  var x = 5;
}
console.log(x); // x is 5

Mit var-deklarierte Variablen werden gehoben, was bedeutet, dass Sie auf die Variable an jeder Stelle in ihrem Bereich verweisen können, selbst wenn ihre Deklaration noch nicht erreicht ist. Sie können var-Deklarationen als "angehoben" an den Anfang ihres Funktions- oder globalen Bereichs betrachten. Wenn Sie jedoch auf eine Variable zugreifen, bevor sie deklariert wird, ist der Wert immer undefined, weil nur ihre Deklaration und Standardinitialisierung (mit undefined) gehoben wird, nicht aber ihre Wertzuteilung.

console.log(x === undefined); // true
var x = 3;

(function () {
  console.log(x); // undefined
  var x = "local value";
})();

Die obigen Beispiele werden so interpretiert, als ob sie wie folgt wären:

var x;
console.log(x === undefined); // true
x = 3;

(function () {
  var x;
  console.log(x); // undefined
  x = "local value";
})();

Aufgrund der Hebung sollten alle var-Anweisungen in einer Funktion möglichst nahe am Anfang der Funktion platziert werden. Diese bewährte Praxis erhöht die Klarheit des Codes.

Ob let und const gehoben werden, ist umstritten. Das Verweisen auf die Variable im Block vor der Variablendeklaration führt immer zu einem ReferenceError, da sich die Variable von Anfang des Blocks bis zur Verarbeitung der Deklaration in einer "zeitlichen Toten Zone" befindet.

console.log(x); // ReferenceError
const x = 3;

console.log(y); // ReferenceError
let y = 3;

Anders als var-Deklarationen, die nur die Deklaration heben, aber nicht ihren Wert, werden Funktionsdeklarationen vollständig gehoben — Sie können die Funktion sicher überall in ihrem Bereich aufrufen. Siehe den Hebung Glossareintrag für eine weitere Diskussion.

Globale Variablen sind in der Tat Eigenschaften des globalen Objekts.

Auf Webseiten ist das globale Objekt window, sodass Sie globale Variablen mit der Syntax window.variable lesen und setzen können. In allen Umgebungen kann die Variable globalThis (die selbst eine globale Variable ist) verwendet werden, um globale Variablen zu lesen und zu setzen. Dies soll eine konsistente Schnittstelle zwischen verschiedenen JavaScript-Laufzeiten bieten.

Daher können Sie von einem Fenster oder Rahmen aus auf globale Variablen zugreifen, die in einem anderen Fenster oder Rahmen deklariert wurden, indem Sie den window- oder frame-Namen angeben. Wenn beispielsweise eine Variable namens phoneNumber in einem Dokument deklariert wird, können Sie von einem iframe aus auf diese Variable als parent.phoneNumber verweisen.

Sie können eine unveränderliche, benannte Konstante mit dem Schlüsselwort const erstellen. Die Syntax eines Konstantenbezeichners ist dieselbe wie jeder andere Variablenbezeichner: Er muss mit einem Buchstaben, einem Unterstrich oder einem Dollarzeichen ($) beginnen und kann alphabetische, numerische oder Unterstrichzeichen enthalten.

const PI = 3.14;

Eine Konstante kann während der Skriptausführung weder durch Zuweisung geändert noch erneut deklariert werden. Sie muss mit einem Wert initialisiert werden. Die Geltungsbereichsregeln für Konstanten sind dieselben wie für let-blockbezogene Variablen.

Sie können keine Konstante mit demselben Namen wie eine Funktion oder Variable im selben Geltungsbereich deklarieren. Zum Beispiel:

// THIS WILL CAUSE AN ERROR
function f() {}
const f = 5;

// THIS WILL CAUSE AN ERROR TOO
function f() {
  const g = 5;
  var g;
}

Allerdings verhindert const nur Neuzuweisungen, jedoch nicht Mutationen. Die Eigenschaften von Objekten, die Konstanten zugewiesen sind, sind nicht geschützt, sodass die folgende Anweisung ohne Probleme ausgeführt wird.

const MY_OBJECT = { key: "value" };
MY_OBJECT.key = "otherValue";

Auch der Inhalt eines Arrays ist nicht geschützt, sodass die folgende Anweisung ohne Probleme ausgeführt wird.

const MY_ARRAY = ["HTML", "CSS"];
MY_ARRAY.push("JAVASCRIPT");
console.log(MY_ARRAY); // ['HTML', 'CSS', 'JAVASCRIPT'];

Der neueste ECMAScript-Standard definiert acht Datentypen:

• Sieben Datentypen, die Primitive sind:

  1. Boolean. true und false.
  2. null. Ein spezielles Schlüsselwort zur Bezeichnung eines Nullwerts. (Da JavaScript groß- und kleinschreibungssensitiv ist, ist null nicht dasselbe wie Null, NULL oder eine andere Variante.)
  3. undefined. Eine übergeordnete Eigenschaft, deren Wert nicht definiert ist.
  4. Number. Eine Ganzzahl oder Gleitkommazahl. Zum Beispiel: 42 oder 3.14159.
  5. BigInt. Eine Ganzzahl mit beliebiger Präzision. Zum Beispiel: 9007199254740992n.
  6. String. Eine Zeichenfolge, die einen Textwert darstellt. Zum Beispiel: "Howdy".
  7. Symbol. Ein Datentyp, dessen Instanzen einzigartig und unveränderlich sind.

• und Object

Obwohl diese Datentypen relativ wenige sind, ermöglichen sie Ihnen nützliche Operationen mit Ihren Anwendungen auszuführen. Funktionen sind die anderen grundlegenden Elemente der Sprache. Während Funktionen technisch eine Art von Objekt sind, können Sie sich Objekte als benannte Container für Werte vorstellen, und Funktionen als Prozeduren, die Ihr Skript ausführen kann.

JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass Sie bei der Deklaration einer Variablen den Datentyp nicht angeben müssen. Es bedeutet auch, dass Datentypen bei Bedarf während der Skriptausführung automatisch konvertiert werden.

So könnten Sie beispielsweise eine Variable wie folgt definieren:

let answer = 42;

Und später könnten Sie derselben Variablen einen String-Wert zuweisen, zum Beispiel:

answer = "Thanks for all the fish!";

Da JavaScript dynamisch typisiert ist, verursacht diese Zuweisung keine Fehlermeldung.

In Ausdrücken, die numerische und string-Werte mit dem +-Operator enthalten, konvertiert JavaScript numerische Werte in Strings. Zum Beispiel betrachten Sie die folgenden Anweisungen:

x = "The answer is " + 42; // "The answer is 42"
y = 42 + " is the answer"; // "42 is the answer"
z = "37" + 7; // "377"

Mit allen anderen Operatoren konvertiert JavaScript numerische Werte nicht in Strings. Zum Beispiel:

"37" - 7; // 30
"37" * 7; // 259

Falls ein Wert, der eine Zahl darstellt, als String im Speicher liegt, gibt es Methoden zur Konvertierung.

• parseInt()
• parseFloat()

parseInt gibt nur ganze Zahlen zurück, daher ist seine Verwendung bei Dezimalzahlen weniger geeignet.

parseInt("101", 2); // 5

Eine alternative Methode, um eine Zahl aus einem String zu erhalten, ist der + (unäre Plus) Operator:

"1.1" + "1.1"; // '1.11.1'
(+"1.1") + (+"1.1"); // 2.2
// Note: the parentheses are added for clarity, not required.

Literale stellen Werte in JavaScript dar. Diese sind feste Werte—nicht Variablen—die Sie buchstäblich in Ihrem Skript angeben. Dieser Abschnitt beschreibt die folgenden Arten von Literalen:

• Array-Literale
• Boolean-Literale
• Numerische Literale
• Objekt-Literale
• RegExp-Literale
• String-Literale

Ein Array-Literal ist eine Liste von null oder mehr Ausdrücken, von denen jedes ein Array-Element darstellt, eingeschlossen in eckige Klammern ([]). Wenn Sie ein Array mit einem Array-Literal erstellen, wird es mit den angegebenen Werten als seinen Elementen initialisiert, und seine length wird auf die Anzahl der angegebenen Argumente gesetzt.

Das folgende Beispiel erstellt das coffees Array mit drei Elementen und einer length von drei:

const coffees = ["French Roast", "Colombian", "Kona"];

Ein Array-Literal erstellt jedes Mal ein neues Array-Objekt, wenn das Literal ausgewertet wird. Wenn beispielsweise ein Array mit einem Literal im globalen Bereich definiert wird, wird es einmal erstellt, wenn das Skript geladen wird. Ist jedoch das Array-Literal innerhalb einer Funktion, wird bei jedem Aufruf dieser Funktion ein neues Array instanziiert.

Zusätzliche Kommas in Array-Literalen

Wenn Sie in einem Array-Literal zwei Kommas hintereinander setzen, bleibt im Array ein leerer Platz für das unbestimmte Element. Das folgende Beispiel erstellt das fish Array:

const fish = ["Lion", , "Angel"];

Wenn Sie dieses Array protokollieren, sehen Sie:

console.log(fish);
// [ 'Lion', <1 empty item>, 'Angel' ]

Beachten Sie, dass das zweite Element "leer" ist, was nicht dasselbe wie der tatsächliche Wert undefined ist. Bei der Verwendung von Array-Durchlaufmethoden wie Array.prototype.map werden leere Stellen übersprungen. Jedoch gibt das Zugreifen auf den Index fish[1] weiterhin undefined zurück.

Wenn Sie ein abschließendes Komma am Ende der Elementliste hinzufügen, wird das Komma ignoriert.

Im folgenden Beispiel ist die length des Arrays drei. Es gibt kein myList[3]. Alle anderen Kommas in der Liste kennzeichnen ein neues Element.

const myList = ["home", , "school"];

Im folgenden Beispiel ist die length des Arrays vier, und myList[0] und myList[2] fehlen.

const myList = [, "home", , "school"];

Im folgenden Beispiel ist die length des Arrays vier, und myList[1] und myList[3] fehlen. Nur das letzte Komma wird ignoriert.

const myList = ["home", , "school", ,];

Anmerkung: Abschließende Kommas helfen dabei, die git-Diffs sauber zu halten, wenn Sie ein mehrzeiliges Array haben, da das Hinzufügen eines Elements zum Ende nur eine Zeile hinzufügt, aber die vorherige Zeile nicht ändert.

diff

const myList = [
  "home",
  "school",
+ "hospital",
];

Das Verständnis des Verhaltens zusätzlicher Kommas ist wichtig, um JavaScript als Sprache zu verstehen.

Wenn Sie Ihren eigenen Code schreiben, sollten Sie jedoch die fehlenden Elemente ausdrücklich als undefined deklarieren oder zumindest einen Kommentar hinzufügen, um auf dessen Fehlen hinzuweisen. Dadurch wird die Klarheit und Wartbarkeit Ihres Codes erhöht.

const myList = ["home", /* empty */, "school", /* empty */, ];

Der Boolean-Typ hat zwei literale Werte: true und false.

JavaScript-Zahlenliterale umfassen Ganzzahlliterale in verschiedenen Basen sowie Gleitkommaliterale in Basis-10.

Beachten Sie, dass die Sprachspezifikation verlangt, dass numerische Literale ohne Vorzeichen sind. Trotzdem sind Codefragmente wie -123.4 in Ordnung, da sie als unärer --Operator interpretiert werden, der auf das numerische Literal 123.4 angewendet wird.

Ganzzahlliterale

Ganzzahlliterale und BigInt-Literale können in dezimal (Basis 10), hexadezimal (Basis 16), oktal (Basis 8) und binär (Basis 2) geschrieben werden.

• Ein dezimaler Ganzzahlliteral ist eine Ziffernfolge ohne führende 0 (Null).
• Eine führende 0 (Null) in einem Ganzzahlliteral oder ein führendes 0o (oder 0O) zeigt an, dass es sich um oktal handelt. Oktale Ganzzahlliterale können nur die Ziffern 0 – 7 enthalten.
• Ein führendes 0x (oder 0X) zeigt ein hexadezimales Ganzzahlliteral an. Hexadezimale Ganzzahlen können Ziffern (0 – 9) und die Buchstaben a – f und A – F enthalten. (Die Groß- oder Kleinschreibung eines Zeichens ändert seinen Wert nicht. Daher: 0xa = 0xA = 10 und 0xf = 0xF = 15.)
• Ein führendes 0b (oder 0B) zeigt ein binäres Ganzzahlliteral an. Binäre Ganzzahlliterale können nur die Ziffern 0 und 1 enthalten.
• Ein nachgestelltes n-Suffix bei einem Ganzzahlliteral zeigt ein BigInt-Literal an. Das BigInt-Literal kann jede der oben genannten Basen verwenden. Beachten Sie, dass die Oktalkurzform mit führender Null wie 0123n nicht erlaubt ist, aber 0o123n in Ordnung ist.

Einige Beispiele für Ganzzahlliterale sind:

0, 117, 123456789123456789n             (decimal, base 10)
015, 0001, 0o777777777777n              (octal, base 8)
0x1123, 0x00111, 0x123456789ABCDEFn     (hexadecimal, "hex" or base 16)
0b11, 0b0011, 0b11101001010101010101n   (binary, base 2)

Für weitere Informationen siehe Numerische Literale im Referenzhandbuch zur lexikalischen Grammatik.

Gleitkommaliterale

Ein Gleitkommaliteral kann die folgenden Teile haben:

• Eine unsignierte dezimale Ganzzahl,
• ein Dezimaltrennzeichen (.),
• ein Bruchteil (eine weitere Dezimalzahl),
• ein Exponent.

Der Exponententeil ist ein e oder E gefolgt von einer Ganzzahl, die positiv oder negativ sein kann (eingeleitet durch + oder -). Ein Gleitkommaliteral muss mindestens eine Ziffer haben und entweder ein Dezimaltrennzeichen oder e (oder E).

Kurz gesagt, die Syntax ist:

[digits].[digits][(E|e)[(+|-)]digits]

Zum Beispiel:

3.1415926
.123456789
3.1E+12
.1e-23

Ein Objektliteral ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und zugeordneten Werten eines Objekts, eingeschlossen in geschwungenen Klammern ({}).

Das folgende ist ein Beispiel für ein Objektliteral. Das erste Element des Objekts car definiert eine Eigenschaft myCar und weist ihr eine neue Zeichenkette "Saturn" zu; das zweite Element, die Eigenschaft getCar, wird sofort mit dem Ergebnis des Aufrufs der Funktion (carTypes("Honda")) initialisiert; das dritte Element, die Eigenschaft special, verwendet eine vorhandene Variable (sales).

const sales = "Toyota";

function carTypes(name) {
  return name === "Honda" ? name : `Sorry, we don't sell ${name}.`;
}

const car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };

console.log(car.myCar); // Saturn
console.log(car.getCar); // Honda
console.log(car.special); // Toyota

Darüber hinaus können Sie einen numerischen oder Zeichenfolgenliteral für den Namen einer Eigenschaft verwenden oder ein Objekt in ein anderes verschachteln. Das folgende Beispiel verwendet diese Optionen.

const car = { manyCars: { a: "Saab", b: "Jeep" }, 7: "Mazda" };

console.log(car.manyCars.b); // Jeep
console.log(car[7]); // Mazda

Objekteigenschaftsnamen können jede Zeichenkette sein, einschließlich der leeren Zeichenkette. Wenn der Eigenschaftsname kein gültiger JavaScript Bezeichner oder keine Zahl wäre, muss er in Anführungszeichen eingeschlossen werden.

Eigenschaftsnamen, die keine gültigen Bezeichner sind, können nicht als Punkt (.)-Eigenschaft zugegriffen werden.

const unusualPropertyNames = {
  '': 'An empty string',
  '!': 'Bang!'
}
console.log(unusualPropertyNames.'');   // SyntaxError: Unexpected string
console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !

Stattdessen müssen sie mit der Klammernotation ([]) zugegriffen werden.

console.log(unusualPropertyNames[""]); // An empty string
console.log(unusualPropertyNames["!"]); // Bang!

Verbesserte Objektliterale

Objektliterale unterstützen eine Reihe von Kurzschriftsyntaxen, die das Setzen des Prototyps bei der Erstellung, eine Kurzfassung für foo: foo-Zuweisungen, das Definieren von Methoden, das Verwenden von super-Aufrufen und das Berechnen von Eigenschaftsnamen mit Ausdrücken umfassen.

Zusammen nähern sich diese auch Objektliteralen und Klassendeklarationen näher an und ermöglichen es, dass objektbasiertes Design von einigen der gleichen Annehmlichkeiten profitiert.

const obj = {
  // __proto__
  __proto__: theProtoObj,
  // Shorthand for 'handler: handler'
  handler,
  // Methods
  toString() {
    // Super calls
    return "d " + super.toString();
  },
  // Computed (dynamic) property names
  ["prop_" + (() => 42)()]: 42,
};

Ein Regulärer Ausdruck-Literal (der später im Detail definiert ist) ist ein Muster, das von Schrägstrichen eingeschlossen ist. Das folgende ist ein Beispiel für ein Regulärer Ausdruck-Literal.

const re = /ab+c/;

Ein Stringliteral ist null oder mehr Zeichen in doppelten (") oder einfachen (') Anführungszeichen eingeschlossen. Ein String muss von Anführungszeichen desselben Typs begrenzt sein (das heißt, entweder beide einfache Anführungszeichen oder beide doppelte Anführungszeichen).

Die folgenden sind Beispiele für String-Literale:

'foo'
"bar"
'1234'
'one line \n another line'
"Joyo's cat"

Sie sollten String-Literale verwenden, es sei denn, Sie müssen speziell ein String-Objekt verwenden. Siehe String für Details zu String-Objekten.

Sie können jede der Methoden des String-Objekts auf einem Stringliteral-Wert aufrufen. JavaScript konvertiert das Stringliteral automatisch in ein temporäres String-Objekt, ruft die Methode auf und verwirft dann das temporäre String-Objekt. Sie können auch die length-Eigenschaft mit einem Stringliteral verwenden:

// Will print the number of symbols in the string including whitespace.
console.log("Joyo's cat".length); // In this case, 10.

Template Literals sind ebenfalls verfügbar. Template Literals werden durch das Back-Tick (`) (Gravis) Zeichen umschlossen, statt durch doppelte oder einfache Anführungszeichen.

Template Literals bieten syntaktischen Zucker für die Konstruktion von Zeichenketten. (Dies ist ähnlich wie String-Interpolation-Funktionen in Perl, Python und mehr.)

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript, template strings can run
 over multiple lines, but double and single
 quoted strings cannot.`

// String interpolation
const name = 'Lev', time = 'today';
`Hello ${name}, how are you ${time}?`

Tagged Templates sind eine kompakte Syntax, um ein Template-Literal zusammen mit einem Aufruf einer "Tag"-Funktion zu spezifizieren, die es analysiert. Ein Tagged Template ist nur eine übersichtliche und semantische Art, eine Funktion zu invokieren, die eine Zeichenkette und einen Satz relevanter Werte verarbeitet. Der Name der Template-Tag-Funktion steht vor dem Template-Literal — wie im folgenden Beispiel, bei dem die Template-Tag-Funktion print genannt wird. Die print-Funktion interpoliert die Argumente und serialisiert alle Objekte oder Arrays, die auftauchen könnten, und umgeht das lästige [object Object].

const formatArg = (arg) => {
  if (Array.isArray(arg)) {
    // Print a bulleted list
    return arg.map((part) => `- ${part}`).join("\n");
  }
  if (arg.toString === Object.prototype.toString) {
    // This object will be serialized to "[object Object]".
    // Let's print something nicer.
    return JSON.stringify(arg);
  }
  return arg;
};

const print = (segments, ...args) => {
  // For any well-formed template literal, there will always be N args and
  // (N+1) string segments.
  let message = segments[0];
  segments.slice(1).forEach((segment, index) => {
    message += formatArg(args[index]) + segment;
  });
  console.log(message);
};

const todos = [
  "Learn JavaScript",
  "Learn Web APIs",
  "Set up my website",
  "Profit!",
];

const progress = { javascript: 20, html: 50, css: 10 };

print`I need to do:
${todos}
My current progress is: ${progress}
`;

// I need to do:
// - Learn JavaScript
// - Learn Web APIs
// - Set up my website
// - Profit!
// My current progress is: {"javascript":20,"html":50,"css":10}

Da Tagged Template Literale nur Zucker von Funktionsaufrufen sind, können Sie das oben genannte als einen äquivalenten Funktionsaufruf umschreiben:

print(["I need to do:\n", "\nMy current progress is: ", "\n"], todos, progress);

Das könnte an die console.log-Art der Interpolation erinnern:

console.log("I need to do:\n%o\nMy current progress is: %o\n", todos, progress);

Man kann sehen, wie das Tagged Template natürlicher liest als eine herkömmliche "Formatter"-Funktion, bei der die Variablen und das Template selbst separat deklariert werden müssen.

Spezielle Zeichen in Zeichenketten verwenden

Zusätzlich zu normalen Zeichen können Sie auch spezielle Zeichen in Zeichenketten einfügen, wie im folgenden Beispiel gezeigt.

"one line \n another line";

Die folgende Tabelle listet die speziellen Zeichen auf, die Sie in JavaScript-Zeichenketten verwenden können.

Zeichen entziehen

Für Zeichen, die nicht in der Tabelle aufgelistet sind, wird ein vorausgehender Backslash ignoriert, aber diese Verwendung ist veraltet und sollte vermieden werden.

Sie können ein Anführungszeichen innerhalb einer Zeichenkette durch einen vorausgehenden Backslash einfügen. Dies wird als Escaping des Anführungszeichens bezeichnet. Zum Beispiel:

const quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
console.log(quote);

Das Ergebnis wäre:

He read "The Cremation of Sam McGee" by R.W. Service.

Um einen literalen Backslash in einer Zeichenkette einzufügen, müssen Sie das Backslash-Zeichen entziehen. Zum Beispiel, um den Dateipfad c:\temp einer Zeichenkette zuzuweisen, verwenden Sie das Folgende:

const home = "c:\\temp";

Sie können Zeilenumbrüche auch durch ein vorausgehendes Backslash entziehen. Der Backslash und der Zeilenumbruch werden beide aus dem Wert der Zeichenkette entfernt.

const str =
  "this string \
is broken \
across multiple \
lines.";
console.log(str); // this string is broken across multiple lines.

Dieses Kapitel konzentriert sich auf die grundlegende Syntax für Deklarationen und Typen. Um mehr über die Sprachkonstrukte von JavaScript zu erfahren, lesen Sie auch die folgenden Kapitel in diesem Leitfaden:

• Kontrollfluss und Fehlerbehandlung Leitfaden
• Schleifen und Iteration
• Funktionen
• Ausdrücke und Operatoren Leitfaden

Im nächsten Kapitel werfen wir einen Blick auf Kontrollfluss-Konstrukte und Fehlerbehandlung.

• Zurück
• Weiter