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 gro- und kleinschreibungsempfindlich und verwendet das Unicode-Zeichensatz. Zum Beispiel knnte das Wort Frh (was auf Deutsch "frh" bedeutet) als Variablenname verwendet werden.

const Frh = "foobar";

Allerdings ist die Variable frh nicht identisch mit Frh, da JavaScript gro- und kleinschreibungsempfindlich ist.

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

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

Es wird jedoch als Best Practice angesehen, immer ein Semikolon nach einer Anweisung zu schreiben, selbst wenn es nicht zwingend erforderlich ist. Diese Praxis verringert 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, Zeilenendezeichen, Kommentare oder Leerzeichen sind. (Leerzeichen, Tabs und Zeilenumbrche werden als Leerzeichen betrachtet.)

Kommentare

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

// a one line comment

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

Sie knnen Blockkommentare nicht verschachteln. Dies passiert hufig, wenn Sie versehentlich eine */-Sequenz in Ihren Kommentar einfgen, was den Kommentar beenden wird.

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

In diesem Fall mssen Sie das */-Muster aufbrechen, 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 verfgt ber drei Arten von Variablendeklarationen.

var

Deklariert eine Variable, optional initialisiert mit einem Wert.

let

Deklariert eine block-scoped lokale Variable, optional initialisiert mit einem Wert.

const

Deklariert eine block-scoped, schreibgeschtzte benannte Konstante.

Variablen

Sie verwenden Variablen als symbolische Namen fr Werte in Ihrer Anwendung. Die Namen von Variablen, die als Identifiers bezeichnet werden, mssen bestimmten Regeln entsprechen.

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

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

Einige Beispiele fr rechtmige 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 den Schlsselwrtern const oder let. Zum Beispiel: let y = 13. Diese Syntax kann verwendet werden, um eine block-scope lokale Variable zu deklarieren. (Siehe Variable scope unten.)

Sie knnen Variablen deklarieren, um Werte unter Verwendung der Destructuring-Syntax zu entpacken. Zum Beispiel: const { bar } = foo. Dies wird eine Variable mit dem Namen bar erzeugen und ihr den Wert zuweisen, der dem gleichnamigen Schlssel unseres Objekts foo entspricht.

Variablen sollten immer deklariert werden, bevor sie verwendet werden. JavaScript erlaubte frher die Zuweisung an nicht deklarierte Variablen, was eine undeclared global Variable erstellt. Dies ist ein Fehler im Strikten Modus und sollte insgesamt 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 Initializer bezeichnet. Die Deklaration ermglicht es, spter im Code auf die Variable zuzugreifen, ohne einen ReferenceError auszulsen, whrend der Initializer der Variablen einen Wert zuweist. In var- und let-Deklarationen ist der Initializer optional. Wenn eine Variable ohne Initializer deklariert wird, wird ihr der Wert undefined zugewiesen.

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

Im Wesentlichen ist let x = 42 gleichbedeutend mit let x; x = 42.

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

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

Variablenbereich

Eine Variable kann zu einem der folgenden Scopes gehren:

• Globaler Scope: Der Standard-Scope fr alle in Skript-Modus laufenden Codes.
• Modul-Scope: Der Scope fr Codes, die im Modul-Modus laufen.
• Funktionsscope: Der Scope, der mit einer Funktion erstellt wird.

Zustzlich knnen Variablen, die mit let oder const deklariert wurden, zu einem zustzlichen Scope gehren:

• Blockscope: Der Scope, der mit einem Paar geschweifter Klammern (ein Block) erstellt wird.

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

let- und const-Deklarationen knnen auch auf den Block-Statement beschrnkt sein, in dem sie deklariert werden.

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

Jedoch sind mit var erstellte Variablen nicht blockgebunden, sondern nur lokal zum Funktions- (oder globalen Scope), in dem sich der Block befindet.

Zum Beispiel wird der folgende Code 5 ausgeben, weil der Scope von x der globale Kontext ist (oder der Funktionskontext, wenn der Code Teil einer Funktion ist). Der Scope von x ist nicht auf den unmittelbaren if-Block 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 Scope verweisen knnen, auch wenn ihre Deklaration noch nicht erreicht wurde. Sie knnen sich var-Deklarationen als "an die Spitze" ihrer Funktions- oder globalen Scope "gehoben" vorstellen. Jedoch, wenn Sie auf eine Variable zugreifen, bevor sie deklariert wird, ist der Wert immer undefined, weil nur die Deklaration und die Standardinitialisierung (mit undefined) gehoben werden, nicht aber die Wertzuweisung.

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

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

Die obigen Beispiele werden interpretiert als:

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 nah wie mglich an den Anfang der Funktion gestellt werden. Diese Best Practice erhht die Klarheit des Codes.

Ob let und const gehoben werden, ist eine Frage der Definitionsdebatte. Der Versuch, auf die Variable im Block vor der Variablendeklaration zuzugreifen, fhrt immer zu einem ReferenceError, weil sich die Variable in einer "zeitlichen Todeszone" von Beginn des Blocks bis zur Verarbeitung der Deklaration befindet.

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 ihren Wert anheben, werden Funktionsdeklarationen vollstndig angehoben Sie knnen die Funktion sicher berall in ihrem Scope aufrufen. Siehe den Hoisting-Glossarbeitrag fr weitere Diskussionen.

Globale Variablen

Globale Variablen sind in der Tat Eigenschaften des globalen Objekts.

In Webseiten ist das globale Objekt window, sodass Sie globale Variablen mit der Syntax window.variable lesen und setzen knnen. In allen Umgebungen kann die globalThis-Variable (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 Frame deklariert sind, von einem anderen Fenster oder Frame zugreifen, indem Sie den window- oder frame-Namen angeben. Zum Beispiel, wenn eine Variable namens phoneNumber in einem Dokument deklariert ist, knnen Sie auf diese Variable aus einem iframe wie folgt zugreifen: parent.phoneNumber.

Konstanten

Sie knnen eine schreibgeschtzte, benannte Konstante mit dem Schlsselwort const erstellen. Die Syntax eines Konstanten-Identifikators ist die gleiche wie bei jedem anderen Variablen-Identifikator: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen ($) beginnen und kann alphabetische, numerische oder Unterstrichzeichen enthalten.

const PI = 3.14;

Eine Konstante kann whrend der Skriptausfhrung weder durch Zuweisung einen neuen Wert erhalten noch neu deklariert werden. Sie muss mit einem Wert initialisiert werden. Die Scope-Regeln fr Konstanten sind dieselben wie fr let-Blockbereichsvariablen.

Sie knnen keine Konstante mit dem gleichen Namen wie eine Funktion oder Variable im gleichen Scope 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, nicht aber Mutationen. Die Eigenschaften von Objekten, die Konstanten zugewiesen sind, sind nicht geschtzt, sodass die folgende Anweisung problemlos 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, die primitive sind:

  1. Boolean. true und false.
  2. null. Ein spezielles Schlsselwort, das einen Nullwert bezeichnet. (Da JavaScript gro- und kleinschreibungsempfindlich ist, ist null nicht das gleiche wie Null, NULL oder eine andere Variante.)
  3. undefined. Eine oberste Eigenschaft, deren Wert nicht definiert ist.
  4. Number. Eine ganze Zahl oder eine Gleitkommazahl. Zum Beispiel: 42 oder 3.14159.
  5. BigInt. Eine ganze Zahl mit beliebiger Genauigkeit. Zum Beispiel: 9007199254740992n.
  6. String. Eine Zeichenfolge, 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 es Ihnen, ntzliche Operationen mit Ihren Anwendungen auszufhren. Funktionen sind die anderen grundlegenden Elemente der Sprache. Whrend Funktionen technisch eine Art von Objekt sind, knnen Sie sich Objekte als benannte Container fr Werte vorstellen und Funktionen als Verfahren, die Ihr Skript ausfhren kann.

Datentypkonvertierung

JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass Sie beim Deklarieren einer Variablen den Datentyp nicht angeben mssen. Es bedeutet auch, dass Datentypen bei Bedarf whrend der Skriptausfhrung automatisch konvertiert werden.

So knnten Sie zum Beispiel 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 typisiert ist, fhrt diese Zuweisung nicht zu einer Fehlermeldung.

Zahlen und der '+'-Operator

In Ausdrcken mit numerischen und String-Werten, die den +-Operator verwenden, konvertiert JavaScript numerische Werte zu Strings. Zum Beispiel, beachten 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"

Bei allen anderen Operatoren konvertiert JavaScript nicht numerische Werte zu Strings. Zum Beispiel:

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

Konvertierung von Strings zu Zahlen

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

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

parseInt gibt nur ganze Zahlen zurck, sodass seine Verwendung bei Dezimalzahlen eingeschrnkt ist.

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

Eine alternative Methode, um eine Zahl aus einem String zu erhalten, ist mit dem + (unren Plus) Operator. Dies fhrt implizit eine Zahlkonvertierung durch, die dem gleichen Prozess wie die Number()-Funktion entspricht.

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

Literale

Literale reprsentieren Werte in JavaScript. Dies sind feste Werte keine Variablen , die Sie in Ihr Skript wrtlich eingeben. In diesem Abschnitt werden folgende Typen von Literalen beschrieben:

• Array-Literale
• Boolesche Literale
• Numerische Literale
• Objektliterale
• RegExp-Literale
• Stringliterale

Array-Literale

Ein Array-Literal ist eine Liste von null oder mehr Ausdrcken, von denen jedes ein Array-Element darstellt, eingeschlossen in eckigen Klammern ([]). Wenn Sie ein Array mithilfe eines Array-Literals erstellen, wird es mit den angegebenen Werten als seine 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 bei jeder Auswertung des Literals ein neues Array-Objekt. Zum Beispiel, ein Array, das mit einem Literal im globalen Scope definiert ist, wird einmal erstellt, wenn das Skript geladen wird. Befindet sich jedoch das Array-Literal in einer Funktion, wird bei jedem Aufruf der Funktion ein neues Array instanziiert.

Zustzliche Kommas in Array-Literalen

Wenn Sie zwei Kommas in einem Array-Literal hintereinander setzen, lsst das Array einen leeren Platz fr das nicht spezifizierte 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 genau dasselbe ist wie der tatschliche undefined-Wert. Bei der Verwendung von Array-Durchsuchungsmethoden wie Array.prototype.map werden leere Felder bersprungen. Der Indexzugriff fish[1] gibt jedoch immer noch undefined zurck.

Wenn Sie ein abschlieendes Komma am Ende der Liste der Elemente einfgen, 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 kennzeichnen ein neues Element.

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

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

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

In dem folgenden Beispiel betrgt die length des Arrays vier und myList[1] sowie 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 Ihren eigenen Code schreiben, sollten Sie fehlende Elemente jedoch explizit als undefined deklarieren oder zumindest einen Kommentar einfgen, um auf das Fehlen hinzuweisen. Dies erhht die Klarheit und Wartbarkeit Ihres Codes.

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

Boolesche Literale

Der Boolean-Typ hat zwei Literalwerte: true und false.

Numerische Literale

JavaScript-numerische Literale schlieen ganze Zahlen in verschiedenen Basen sowie Gleitkommaliterale in Basis-10 ein.

Beachten Sie, dass die Sprachspezifikation verlangt, dass numerische Literale unsigniert sind. Dennoch sind Codefragmente wie -123.4 in Ordnung und werden als unrer - Operator interpretiert, der auf das numerische Literal 123.4 angewendet wird.

Ganze Zahlen-Literale

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

• Ein dezimales Ganzzahlliteral ist eine Folge von Ziffern ohne fhrende 0 (Null).
• Eine fhrende 0 (Null) bei einem Ganzzahlliteral oder eine fhrende 0o (oder 0O) zeigt an, dass es sich um oktale Zahlen handelt. Oktale Ganzzahlliterale knnen nur die Ziffern 0 7 enthalten.
• Eine fhrende 0x (oder 0X) zeigt ein hexadezimales Ganzzahlliteral an. Hexadezimale Zahlen knnen Ziffern (0 9) und die Buchstaben a f und A F enthalten. (Die Gro-/Kleinschreibung eines Zeichens ndert dessen Wert nicht. Daher: 0xa = 0xA = 10 und 0xf = 0xF = 15.)
• Eine fhrende 0b (oder 0B) zeigt ein binres Ganzzahlliteral an. Binre Ganzzahlliterale knnen nur die Ziffern 0 und 1 enthalten.
• Ein suffix n bei einem Ganzzahlliteral zeigt ein BigInt-Literal an. Das BigInt-Literal kann alle oben genannten Basen verwenden. Beachten Sie, dass das fhrende Null-Oktalsyntax wie 0123n nicht erlaubt ist, aber 0o123n in Ordnung ist.

Einige Beispiele fr Ganzzahl-Literale 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 mehr Informationen siehe Numerische Literale in der lexikalischen Grammatikreferenz.

Gleitpunkt-Literale

Ein Gleitpunkt-Literal kann die folgenden Teile haben:

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

Der Exponententeil ist ein e oder E, gefolgt von einer Ganzzahl, die vorzeichenbehaftet sein kann (eingeleitet durch + oder -). Ein Gleitpunkt-Literal muss mindestens eine Ziffer und entweder einen Dezimalpunkt oder e (oder E) enthalten.

Krzer beschrieben ist die Syntax:

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

Zum Beispiel:

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

Objektliterale

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

Das folgende ist ein Beispiel fr ein Objektliteral. Das erste Element des car-Objekts definiert eine Eigenschaft, myCar, und weist ihr einen neuen String zu, "Saturn"; 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 bestehende 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

Darber hinaus knnen Sie einen numerischen oder string Literal fr den Namen einer Eigenschaft verwenden oder ein Objekt in ein anderes verschachteln. Das folgende Beispiel nutzt diese Optionen.

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

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

Eigenschaftsnamen von Objekten knnen beliebige Strings sein, einschlielich des leeren Strings. Wenn der Eigenschaftsname kein gltiger JavaScript-Identifikator oder keine Zahl ist, muss er in Anfhrungszeichen eingeschlossen werden.

Eigenschaftsnamen, die keine gltigen Identifikatoren sind, knnen nicht als Punkt (.)-Eigenschaften aufgerufen 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 ([]) aufgerufen werden.

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

Verbesserte Objektliterale

Objektliterale untersttzen eine Reihe von Kurznotierungen, die das Festlegen des Prototyps bei der Konstruktion, Kurzformen fr foo: foo-Zuweisungen, die Definition von Methoden, das Aufrufen von super-Methoden und die Berechnung von Eigenschaftsnamen mit Ausdrcken umfassen.

Diese bringen Objektliterale und Klassendeklarationen nher zusammen und ermglichen es objektbasierten Designs, von den gleichen 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 im Detail spter definiert wird) ist ein Muster zwischen Schrgstrichen eingeschlossen. Das folgende ist ein Beispiel fr ein Regex-Literal.

const re = /ab+c/;

Stringliterale

Ein Stringliteral ist null oder mehr Zeichen, die in doppelte (") oder einfache (') Anfhrungszeichen eingeschlossen sind. Ein String muss durch Anfhrungszeichen des gleichen Typs begrenzt werden (das heit, entweder beide einfache Anfhrungszeichen oder beide doppelte Anfhrungszeichen).

Die folgenden sind Beispiele fr Stringliterale:

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

Sie sollten Stringliterale verwenden, es sei denn, Sie mssen ausdrcklich ein String-Objekt verwenden. Siehe String fr Details zu String-Objekten.

Sie knnen alle Methoden des String-Objekts auf einen Stringliteral-Wert aufrufen. JavaScript wandelt den Stringliteral automatisch in ein temporres String-Objekt um, ruft die Methode auf und verwirft dann das temporre String-Objekt. Sie knnen 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-Literale sind ebenfalls verfgbar. Template-Literale werden durch das Back-Tick-Zeichen (`) (Gravis) anstelle von doppelten oder einfachen Anfhrungszeichen eingeschlossen.

Template-Literale bieten syntaktische Zucker fr die Konstruktion von Strings. (Dies hnelt den String-Interpolationsfunktionen 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 zum Parsen zu spezifizieren. Ein Tag-Template ist nur eine knappe und semantische Mglichkeit, eine Funktion aufzurufen, die einen String und eine Menge relevanter Werte verarbeitet. Der Name der Template-Tag-Funktion geht dem Template-Literal voraus wie im folgenden Beispiel, bei dem die Template-Tag-Funktion print heit. Die print-Funktion wird die Argumente interpolieren und Objekte oder Arrays, die auftreten knnen, serialisieren, wodurch das lstige [object Object] vermieden wird.

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

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

Dies kann an die console.log-Art der Interpolation erinnern:

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

Sie knnen sehen, wie das Tag-Template natrlicher gelesen wird als eine traditionelle "Formatter"-Funktion, bei der die Variablen und das Template selbst separat deklariert werden mssen.

Verwendung von Sonderzeichen in Strings

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

"one line \n another line";

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

Zeichen entkommen

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

Sie knnen ein Anfhrungszeichen innerhalb eines Strings einfgen, indem Sie es mit einem Backslash versehen. Dies wird als Escaping des Anfhrungszeichens bezeichnet. 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 literalen Rckwrtsschrgstrich innerhalb eines Strings einzuschlieen, mssen Sie das Rckwrtsschrgstrichzeichen escapen. Zum Beispiel, um den Dateipfad c:\temp einer Zeichenfolge zuzuweisen, verwenden Sie Folgendes:

const home = "c:\\temp";

Sie knnen auch Zeilenumbrche escapen, indem Sie ihnen einen Rckwrtsschrgstrich voranstellen. Der Rckwrtsschrgstrich und der Zeilenumbruch werden beide aus dem Wert der Zeichenfolge entfernt.

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

Weitere Informationen

Dieses Kapitel konzentriert sich auf die grundlegende Syntax fr 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 Iterationen
• Funktionen
• Ausdrcke und Operatoren Leitfaden

Im nchsten Kapitel werfen wir einen Blick auf Kontrollflusskonstrukte und Fehlerbehandlung.

• Zurck
• Weiter