Grammatik und Typen

Grundlagen

JavaScript bernimmt den Groteil seiner Syntax von Java, C und C++, wurde aber auch von Awk, Perl und Python beeinflusst.

JavaScript ist schreibungsabhngig und verwendet den Unicode-Zeichensatz. Zum Beispiel knnte das Wort Frh als Variablenname verwendet werden.

const Frh = "foobar";

Aber die Variable frh ist nicht dasselbe wie Frh, da JavaScript schreibungsabhngig ist.

In JavaScript werden Anweisungen Anweisungen genannt und durch Semikolons (;) getrennt.

Ein Semikolon ist nach einer Anweisung nicht erforderlich, wenn sie in einer eigenen Zeile steht. Wenn jedoch mehr als eine Anweisung in einer Zeile gewnscht ist, mssen sie durch Semikolons getrennt werden.

Es gilt jedoch als beste Praxis, immer ein Semikolon nach einer Anweisung zu schreiben, auch wenn es nicht unbedingt erforderlich ist. Diese Praxis reduziert die Wahrscheinlichkeit, dass Fehler in den Code gelangen.

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

Kommentare

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

// a one line comment

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

Blockkommentare knnen nicht verschachtelt werden. Dies passiert hufig, wenn Sie versehentlich eine */-Sequenz in Ihren Kommentar aufnehmen, die den Kommentar beendet.

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

In diesem Fall mssen Sie das */-Muster unterbrechen. Zum Beispiel durch das Einfgen eines Backslashes:

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

Kommentare verhalten sich wie Leerzeichen und werden whrend der Skriptausfhrung verworfen.

Deklarationen

JavaScript hat fnf Arten von Variablendeklarationen.

var

Deklariert eine Variable und initialisiert sie optional mit einem Wert.

let

Deklariert eine block-sichtbare Variable und initialisiert sie optional mit einem Wert.

const

Deklariert eine block-sichtbare Variable, die nicht neu zugewiesen werden kann, und die bei der Deklaration initialisiert werden muss.

using

Deklariert eine Variable wie const, die synchron entsorgt wird.

await using

Deklariert eine Variable wie const, die asynchron entsorgt wird.

Wir werden in diesem Artikel nur ber die ersten drei sprechen: var, let und const. Die Deklarationen using und await using werden in Ressourcenmanagement eingefhrt.

Variablen

Sie verwenden Variablen als symbolische Namen fr Werte in Ihrer Anwendung. Die Namen von Variablen, sogenannte Bezeichner, mssen bestimmten Regeln entsprechen.

Ein JavaScript-Bezeichner beginnt normalerweise mit einem Buchstaben, Unterstrich (_) oder Dollarzeichen ($). Nachfolgende Zeichen knnen auch Ziffern (0 9) sein. Da JavaScript schreibungsabhngig ist, umfassen Buchstaben die Zeichen A bis Z (Grobuchstaben) sowie a bis z (Kleinbuchstaben).

Sie knnen die meisten Unicode-Buchstaben wie und in Bezeichnern verwenden. (Fr weitere Details siehe die lexikalische Grammatik-Referenz.) Sie knnen auch Unicode-Escape-Sequenzen verwenden, um Zeichen in Bezeichnern darzustellen.

Einige Beispiele fr zulssige Namen sind Number_hits, temp99, $credit und _name.

Variablen deklarieren

Sie knnen eine Variable auf zwei Arten deklarieren:

• Mit dem Schlsselwort var. Zum Beispiel var x = 42. Diese Syntax kann verwendet werden, um sowohl lokale als auch globale Variablen zu deklarieren, abhngig vom Ausfhrungskontext.
• Mit dem Schlsselwort const oder let. Zum Beispiel let y = 13. Diese Syntax kann verwendet werden, um eine block-sichtbare lokale Variable zu deklarieren. (Siehe Variablensichtbarkeit unten.)

Sie knnen Variablen deklarieren, um Werte mit der Destrukturierung-Syntax zu entpacken. Zum Beispiel const { bar } = foo. Dies erstellt eine Variable namens bar und weist ihr den Wert zu, der dem Schlssel mit demselben Namen in unserem Objekt foo entspricht.

Variablen sollten immer deklariert werden, bevor sie verwendet werden. JavaScript erlaubte frher die Zuweisung zu nicht deklarierten Variablen, was eine nicht deklarierte globale Variable erstellt. Dies ist ein Fehler im strengen Modus und sollte vermieden werden.

Deklaration und Initialisierung

In einer Anweisung wie let x = 42 wird der Teil let x als Deklaration bezeichnet, und der Teil = 42 wird als Initialisierer bezeichnet. Die Deklaration ermglicht es, spter im Code auf die Variable zuzugreifen, ohne einen ReferenceError auszulsen, whrend der Initialisierer der Variable einen Wert zuweist. In 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 entspricht let x = 42 der Anweisung let x; x = 42.

const-Deklarationen bentigen immer einen Initialisierer, da sie jede Art von Zuweisung nach der Deklaration verbieten und das implizite Initialisieren mit undefined wahrscheinlich ein Programmierfehler ist.

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

Variablensichtbarkeit

Eine Variable kann zu einem der folgenden Sichtbarkeiten gehren:

• Globale Sichtbarkeit: Die Standardsichtbarkeit fr alle im Skriptmodus ausgefhrten Codes.
• Modulsichtbarkeit: Die Sichtbarkeit fr im Modulmodus ausgefhrten Code.
• Funktionssichtbarkeit: Die Sichtbarkeit, die mit einer Funktion erstellt wird.

Darber hinaus knnen Variablen, die mit let oder const deklariert wurden, zu einer zustzlichen Sichtbarkeit gehren:

• Block-Sichtbarkeit: Die durch ein Paar geschweifter Klammern (einen Block) erstellte Sichtbarkeit.

Wenn Sie eine Variable auerhalb einer Funktion deklarieren, wird sie als globale Variable bezeichnet, da sie anderen Codes im aktuellen Dokument zur Verfgung steht. Wenn Sie eine Variable innerhalb einer Funktion deklarieren, wird sie als lokale Variable bezeichnet, da sie nur innerhalb dieser Funktion verfgbar ist.

let- und const-Deklarationen knnen auch auf die Block-Anweisung beschrnkt sein, in der sie deklariert sind.

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

Jedoch sind Variablen, die mit var erstellt wurden, nicht block-sichtbar, sondern nur lokal zur Funktion (oder globalen Sichtbarkeit), in der sich der Block befindet.

Zum Beispiel wird der folgende Code 5 protokollieren, da die Sichtbarkeit von x der globale Kontext (oder der Funktionskontext, wenn der Code Teil einer Funktion ist) ist. Die Sichtbarkeit von x ist nicht auf den unmittelbaren if-Anweisungsblock beschrnkt.

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

Variablen-Hoisting

Mit var-deklarierte Variablen werden gehoben, was bedeutet, dass Sie auf die Variable berall in ihrem Sichtbarkeitsbereich verweisen knnen, selbst wenn ihre Deklaration noch nicht erreicht ist. Sie knnen var-Deklarationen so betrachten, dass sie an den Anfang ihres Funktions- oder globalen Sichtbarkeitsbereichs "gehoben" werden. Allerdings, wenn Sie auf eine Variable zugreifen, bevor sie deklariert wird, ist der Wert immer undefined, da nur ihre Deklaration und Standardinitialisierung (mit undefined) gehoben, nicht aber ihre Wertzuweisung.

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

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

Die obigen Beispiele werden genauso interpretiert wie:

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

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

Aufgrund des Hoistings sollten alle var-Anweisungen in einer Funktion so nahe am Anfang der Funktion wie mglich platziert werden. Diese beste Praxis erhht die Klarheit des Codes.

Ob let und const gehoben werden, ist eine Definitionsfrage. Das Verweisen auf die Variable im Block vor der Variablendeklaration fhrt immer zu einem ReferenceError, weil die Variable in einer "zeitlichen Todeszone" von Beginn des Blocks bis zur Verarbeitung der Deklaration ist.

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

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

Im Gegensatz zu var-Deklarationen, die nur die Deklaration, aber nicht deren Wert hoisten, werden Funktionsdeklarationen vollstndig gehoben - Sie knnen die Funktion sicher berall in ihrem Geltungsbereich aufrufen. Siehe den Hoisting Glossareintrag fr weitere Diskussionen.

Globale Variablen

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 knnen. 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.

Folglich knnen Sie auf globale Variablen, die in einem Fenster oder Rahmen deklariert wurden, von einem anderen Fenster oder Rahmen zugreifen, indem Sie den Namen des window oder frame angeben. Zum Beispiel, wenn eine Variable namens phoneNumber in einem Dokument deklariert wird, knnen Sie in einem iframe auf diese Variable als parent.phoneNumber verweisen.

Konstanten

Sie knnen eine schreibgeschtzte, benannte Konstante mit dem Schlsselwort const erstellen. Die Syntax eines Konstantenbezeichners entspricht jedem Variablenbezeichner: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen ($) beginnen und kann alphabetische, numerische oder Unterstrichzeichen enthalten.

const PI = 3.14;

Eine Konstante kann ihren Wert durch Zuweisung nicht ndern oder whrend der Ausfhrung des Skripts neu deklariert werden. Sie muss mit einem Wert initialisiert werden. Die Geltungsbereichsregeln fr Konstanten sind dieselben wie fr let-block-sichtbare Variablen.

Sie knnen eine Konstante nicht 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 Neu-Zuweisungen, aber nicht Mutationen. Die Eigenschaften von Objekten, die Konstanten zugewiesen sind, sind nicht geschtzt, sodass die folgende Anweisung ohne Probleme ausgefhrt wird.

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

Auch der Inhalt eines Arrays ist nicht geschtzt, sodass die folgende Anweisung ohne Probleme ausgefhrt wird.

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

Datenstrukturen und Typen

Datentypen

Der neueste ECMAScript-Standard definiert acht Datentypen:

• Sieben Datentypen sind Primitive:

  1. Boolean. true und false.
  2. null. Ein spezielles Schlsselwort, das einen Nullwert kennzeichnet. (Da JavaScript schreibungsabhngig ist, ist null nicht dasselbe wie Null, NULL oder irgendeine andere Variante.)
  3. undefined. Eine Top-Level-Eigenschaft, deren Wert nicht definiert ist.
  4. Number. Eine Ganzzahl oder eine Gleitkommazahl. Zum Beispiel: 42 oder 3.14159.
  5. BigInt. Eine Ganzzahl mit beliebiger Genauigkeit. Zum Beispiel: 9007199254740992n.
  6. String. Eine Zeichenkette, die einen Textwert darstellt. Zum Beispiel: "Howdy".
  7. Symbol. Ein Datentyp, dessen Instanzen einzigartig und unvernderlich sind.

• und Object

Obwohl diese Datentypen relativ wenige sind, ermglichen sie Ihnen, ntzliche Operationen mit Ihren Anwendungen durchzufhren. Funktionen sind die anderen grundlegenden Elemente der Sprache. Whrend Funktionen technisch gesehen eine Art Objekt sind, knnen Sie sich Objekte als benannte Container fr Werte vorstellen und Funktionen als Prozeduren, die Ihr Skript ausfhren kann.

Konvertierung von Datentypen

JavaScript ist eine dynamisch getypte Sprache. Das bedeutet, dass Sie den Datentyp einer Variablen nicht angeben mssen, wenn Sie sie deklarieren. Es bedeutet auch, dass Datentypen whrend der Skriptausfhrung nach Bedarf automatisch konvertiert werden.

So knnten Sie beispielsweise eine Variable wie folgt definieren:

let answer = 42;

Und spter knnten Sie derselben Variablen einen String-Wert zuweisen, zum Beispiel:

answer = "Thanks for all the fish!";

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

Zahlen und der '+' Operator

In Ausdrcken, die numerische und Zeichenkettenwerte mit dem +-Operator enthalten, konvertiert JavaScript numerische Werte in Zeichenfolgen. Betrachten Sie zum Beispiel 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"

Bei allen anderen Operatoren konvertiert JavaScript nicht numerische Werte in Zeichenfolgen. Zum Beispiel:

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

Zeichenfolgen in Zahlen umwandeln

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

• parseInt()
• parseFloat()
• Number()

parseInt liefert nur ganze Zahlen zurck, daher ist sein Nutzen fr Dezimalzahlen eingeschrnkt.

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

Eine alternative Methode, um eine Zahl aus einer Zeichenkette zu erhalten, ist der + (unre Plus) Operator. Dies fhrt implizit eine Zahlenkonvertierung durch, die derselbe Prozess ist wie die Number()-Funktion.

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

Literale

Literale stellen Werte in JavaScript dar. Dies sind feste Werte - keine Variablen -, die Sie buchstblich in Ihr Skript aufnehmen. Dieser Abschnitt beschreibt die folgenden Typen von Literalen:

• Array-Literale
• Boolesche Literale
• Numerische Literale
• Objekt-Literale
• RegExp-Literale
• Zeichenketten-Literale

Array-Literale

Ein Array-Literal ist eine Liste von null oder mehr Ausdrcken, 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 Elemente 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, wenn das Literal ausgewertet wird, ein neues Array-Objekt. Zum Beispiel wird ein Array, das mit einem Literal im globalen Geltungsbereich definiert wird, einmal erstellt, wenn das Skript geladen wird. Wenn das Array-Literal jedoch innerhalb einer Funktion ist, wird jedes Mal, wenn diese Funktion aufgerufen wird, ein neues Array instanziiert.

Zustzliche Kommas in Array-Literalen

Wenn Sie zwei Kommas in einer Reihe in einem Array-Literal platzieren, lsst das Array einen leeren Slot fr das nicht spezifizierte Element. Das folgende Beispiel erstellt das fish-Array:

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

Wenn Sie dieses Array protokollieren, werden Sie sehen:

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

Beachten Sie, dass das zweite Element "leer" ist, was nicht genau dasselbe ist wie der tatschliche undefined-Wert. Wenn Sie Array-Durchlaufmethoden wie Array.prototype.map verwenden, werden leere Slots bersprungen. Das Indexzugreifen fish[1] gibt jedoch immer noch undefined zurck.

Wenn Sie ein abschlieendes Komma am Ende der Liste der Elemente einschlieen, wird das Komma ignoriert.

Im folgenden Beispiel betrgt die length des Arrays drei. Es gibt kein myList[3] und myList[1] ist leer. Alle anderen Kommas in der Liste zeigen ein neues Element an.

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

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

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

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

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

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

Das Verstndnis des Verhaltens zustzlicher Kommas ist wichtig, um JavaScript als Sprache zu verstehen.

Wenn Sie jedoch Ihren eigenen Code schreiben, sollten Sie die fehlenden Elemente ausdrcklich als undefined deklarieren oder zumindest einen Kommentar einfgen, um auf ihr Fehlen hinzuweisen. Dies erhht die Klarheit und Wartbarkeit Ihres Codes.

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

Boolesche Literale

Der Boolesche Typ hat zwei literale Werte: true und false.

Numerische Literale

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

Beachten Sie, dass die Sprachspezifikation erfordert, dass numerische Literale nicht signiert sind. Dennoch sind Codefragmente wie -123.4 in Ordnung, da sie als unre --Operator auf das numerische Literal 123.4 angewendet interpretiert werden.

Ganzzahlliterale

Ganzzahlen und BigInt-Literale knnen in Dezimal (Basis 10), Hexadezimal (Basis 16), Oktal (Basis 8) und Binr (Basis 2) geschrieben werden.

• Ein dezimaler Ganzzahlliteral ist eine Folge von Ziffern ohne fhrende 0 (Null).
• Eine fhrende 0 (Null) auf einem Ganzzahlliteral, oder eine fhrende 0o (oder 0O) weist darauf hin, dass es sich um eine oktal handelt. Oktale Ganzzahlliterale knnen nur die Ziffern 0 7 enthalten.
• Eine fhrende 0x (oder 0X) weist auf ein hexadezimalen Ganzzahlliteral hin. Hexadezimale Ganzzahlen knnen Ziffern (0 9) und die Buchstaben a f und A F enthalten. (Die Gro-/Kleinschreibung eines Zeichens ndert seinen Wert nicht. Daher gilt: 0xa = 0xA = 10 und 0xf = 0xF = 15.)
• Eine fhrende 0b (oder 0B) zeigt auf ein binres Ganzzahlliteral hin. Binre Ganzzahlliterale knnen nur die Ziffern 0 und 1 enthalten.
• Ein nachgestelltes n-Suffix auf einem Ganzzahlliteral weist auf ein BigInt-Literal hin. Das BigInt-Literal kann jede der oben genannten Basen verwenden. Beachten Sie, dass eine Syntax mit fhrenden Nullen wie 0123n nicht erlaubt ist, aber 0o123n ist in Ordnung.

Einige Beispiele fr 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)

Fr weitere Informationen siehe Numerische Literale in der Lexikalische Grammatik Referenz.

Gleitkommaliterale

Ein Gleitkommaliteral kann die folgenden Teile haben:

• Eine unsignierte Dezimalzahl,
• Ein Dezimalpunkt (.),
• Ein Bruch (eine weitere Dezimalzahl),
• Ein Exponent.

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

Kurz gesagt, die Syntax lautet:

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

Zum Beispiel:

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

Objekt-Literale

Ein Objekt-Literal ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und zugehrigen Werten eines Objekts, eingeschlossen in geschweiften Klammern ({}).

Das folgende ist ein Beispiel fr ein Objekt-Literal. Das erste Element des car-Objekts definiert eine Eigenschaft, myCar, und weist ihr eine neue Zeichenkette, "Saturn", zu; das zweite Element, die getCar-Eigenschaft, wird sofort mit dem Ergebnis des Aufrufs der Funktion (carTypes("Honda")) zugewiesen; das dritte Element, die special-Eigenschaft, 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

Zustzlich knnen Sie eine numerische oder Zeichenkettenliterale fr den Namen einer Eigenschaft verwenden oder ein Objekt in ein anderes einbetten. 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 knnen beliebige Zeichenketten sein, einschlielich der leeren Zeichenkette. Wenn der Eigenschaftenname kein gltiger JavaScript-Bezeichner oder keine Zahl wre, muss er in Anfhrungszeichen eingeschlossen werden.

Eigenschaftsnamen, die keine gltigen Bezeichner sind, knnen 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 mssen sie mit der Klammernotation ([]) zugegriffen werden.

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

Erweiterte Objektliterale

Objekt-Literale untersttzen eine Reihe von Kurzschreibweisen, die das Festlegen des Prototyps bei der Erstellung, die Kurzschreibweise fr foo: foo-Zuweisungen, das Definieren von Methoden, das Aufrufen von super und das Berechnen von Eigenschaftsnamen mit Ausdrcken umfassen.

Zusammen bringen diese auch Objektliterale und Klassendeklarationen nher zusammen und ermglichen objekbasierter Designanstzen einige derselben Annehmlichkeiten zu profitieren.

const theProtoObj = {};
const handler = {};
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,
};

RegExp-Literale

Ein Regex-Literal (das ausfhrlich spter beschrieben wird) ist ein Muster, das zwischen Schrgstrichen eingeschlossen ist. Das folgende ist ein Beispiel fr ein Regex-Literal.

const re = /ab+c/;

Zeichenketten-Literale

Ein Zeichenkettenliteral besteht aus null oder mehr Zeichen, die in doppelte (") oder einfache (') Anfhrungszeichen eingeschlossen sind. Eine Zeichenkette muss durch Anfhrungszeichen des gleichen Typs begrenzt werden (entweder beide einfache oder beide doppelte Anfhrungszeichen).

Die folgenden sind Beispiele fr Zeichenkettenliterale:

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

Sie sollten Zeichenkettenliterale verwenden, es sei denn, Sie mssen speziell ein String-Objekt verwenden. Siehe String fr weitere Details zu String-Objekten.

Sie knnen jede der Methoden des String-Objekts auf einem Zeichenkettenliteralwert aufrufen. JavaScript konvertiert das Zeichenkettenliteral automatisch in ein temporres String-Objekt, ruft die Methode auf und verwirft dann das temporre String-Objekt. Sie knnen auch die length-Eigenschaft mit einem Zeichenkettenliteral 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 verfgbar. Template-Literale sind in ein Backtick (`) (Gravis)-Zeichen anstelle von doppelten oder einfachen Anfhrungszeichen eingeschlossen.

Template-Literale bieten Zuckersyntax fr die Erstellung von Zeichenketten. (Dies hnelt den String-Interpolationseigenschaften 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}?`;

Getaggte Templates sind eine kompakte Syntax, um ein Template-Literal zusammen mit einem Aufruf einer "Tag"-Funktion zu spezifizieren, um es zu parsen. Ein getaggtes Template ist nur eine prgnantere und semantischere Mglichkeit, eine Funktion aufzurufen, die eine Zeichenkette und eine Reihe relevanter Werte verarbeitet. Der Name der Template-Tag-Funktion steht vor dem Template-Literal - wie im folgenden Beispiel, in dem die Template-Tag-Funktion print genannt wird. Die print-Funktion wird die Argumente interpolieren und alle Objekte oder Arrays serialisieren, die auftreten knnen, um das lstige [object Object] zu vermeiden.

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 getaggte Template-Literale nur Zucker fr Funktionsaufrufe sind, knnen Sie das obige als quivalenten Funktionsaufruf umschreiben:

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

Dies knnte 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 getaggte Template natrlicher ist als eine traditionelle "Formatter"-Funktion, bei der die Variablen und das Template selbst separat deklariert werden mssen.

Verwenden spezieller Zeichen in Zeichenketten

Zustzlich zu normalen Zeichen knnen Sie auch Sonderzeichen in Zeichenketten einfgen, wie im folgenden Beispiel gezeigt.

"one line \n another line";

Die folgende Tabelle listet die Sonderzeichen auf, die Sie in JavaScript-Zeichenketten verwenden knnen.

Zeichen entziehen

Fr Zeichen, die in der Tabelle nicht aufgefhrt sind, wird ein vorangestellter Backslash ignoriert, aber diese Verwendung ist veraltet und sollte vermieden werden.

Sie knnen ein Anfhrungszeichen innerhalb einer Zeichenkette einfgen, indem Sie ihm einen Backslash voranstellen. Dies ist als Escaping des Anfhrungszeichens bekannt. Zum Beispiel:

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

Das Ergebnis davon wre:

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

Um einen wrtlichen Backslash innerhalb einer Zeichenkette einzuschlieen, mssen Sie das Backslash-Zeichen entziehen. Zum Beispiel, um den Dateipfad c:\temp einer Zeichenkette zuzuweisen, verwenden Sie folgendes:

const home = "c:\\temp";

Sie knnen auch Zeilenumbrche durch Voranstellen mit 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.

Mehr Informationen

Dieses Kapitel konzentriert sich auf die grundlegende Syntax fr Deklarationen und Typen. Um mehr ber die Sprachkonstrukte von JavaScript zu erfahren, siehe auch die folgenden Kapitel in diesem Leitfaden:

• Kontrollfluss und Fehlerbehandlung Leitfaden
• Schleifen und Iteration
• Funktionen
• Ausdrcke und Operatoren Leitfaden

Im nchsten Kapitel werden wir uns mit Kontrollflusskonstrukten und Fehlerbehandlung befassen.

• Zurck
• Weiter