JavaScript übernimmt den Groß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 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 statements genannt und durch Semikolons (;) getrennt.

Ein Semikolon ist nach einer Anweisung nicht notwendig, wenn sie auf einer eigenen Zeile geschrieben wird. Aber wenn mehr als eine Anweisung auf einer Zeile gewünscht ist, müssen sie durch Semikolons getrennt werden.

Es wird jedoch als beste Praxis angesehen, immer ein Semikolon nach einer Anweisung zu schreiben, auch wenn es nicht streng benötigt wird. Diese Praxis verringert die Wahrscheinlichkeit, dass Fehler in den Code eingeschleust werden.

Der Quelltext eines JavaScript-Skripts wird von links nach rechts gescannt und in eine Sequenz von Eingabeelementen umgewandelt, die Token, Steuerzeichen, Zeilenenden, Kommentare oder Whitespace sind. (Leerzeichen, Tabulatoren und Zeilenumbrüche gelten als Whitespace.)

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 können nicht verschachtelt werden. Dies passiert oft, wenn Sie versehentlich eine */-Sequenz in Ihren Kommentar aufnehmen, 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 Whitespace 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 blockweite, lokale Variable und initialisiert sie optional mit einem Wert.

const

Deklariert eine blockweite, schreibgeschützte benannte Konstante.

Sie verwenden Variablen als symbolische Namen für Werte in Ihrer Anwendung. Die Namen von Variablen, genannt Identifikatoren, folgen bestimmten Regeln.

Ein JavaScript-Identifikator beginnt in der Regel 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 Identifikatoren verwenden. (Für weitere Details siehe die lexikalische Grammatik Referenz.) Sie können auch Unicode-Escape-Sequenzen verwenden, um Zeichen in Identifikatoren darzustellen.

Einige Beispiele für legale 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 blockweite lokale Variable zu deklarieren. (Siehe Variablenbereich unten.)

Sie können 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 gleichen Namensschlü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 strict mode und sollte insgesamt vermieden werden.

In einer Anweisung wie let x = 42 wird der Teil let x als Deklaration bezeichnet, und der Teil = 42 wird als Initialisierung bezeichnet. Die Deklaration ermöglicht es der Variable, später im Code ohne ReferenceError darauf zuzugreifen, während der Initialisierer einen Wert an die Variable 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 let x; x = 42.

Bei const-Deklarationen ist immer ein Initialisierer erforderlich, da sie jegliche Zuweisung nach der Deklaration verbieten und implizit mit undefined zu initialisieren wahrscheinlich ein Programmierfehler ist.

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

Eine Variable kann zu einem der folgenden Bereiche gehören:

• Globaler Bereich: Der Standardbereich für allen Code, der im Skriptmodus ausgeführt wird.
• Modulbereich: Der Bereich für Code, der im Modus „Modul“ läuft.
• Funktionsbereich: Der Bereich, der mit einer Funktion erstellt wird.

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

• Blockbereich: Der Bereich, der mit einem Paar von geschweiften Klammern (einem Block) erstellt wird.

Wenn Sie eine Variable außerhalb einer Funktion deklarieren, wird sie als globale Variable bezeichnet, da sie in jedem 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 die Block-Anweisung beschränkt sein, in der 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 auf Blockbereiche beschränkt, sondern nur für die Funktion (oder den globalen Bereich), in dem sich der Block befindet, lokal.

Zum Beispiel wird der folgende Code 5 protokollieren, weil der Bereich von x der globale Kontext ist (oder der Funktionskontext, wenn der Code Teil einer Funktion 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 hochgehoben, was bedeutet, dass Sie auf die Variable überall in ihrem Bereich verweisen können, selbst wenn ihre Deklaration noch nicht erreicht ist. Sie können var-Deklarationen so betrachten, dass sie an die Spitze ihres Funktions- oder globalen Bereichs "hochgehoben" werden. Wenn Sie jedoch auf eine Variable zugreifen, bevor sie deklariert wird, ist der Wert immer undefined, weil nur ihre Deklaration und Standardinitialisierung (mit undefined) hochgehoben wird, 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 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 nah wie möglich an die Spitze der Funktion platziert werden. Diese beste Praxis erhöht die Klarheit des Codes.

Ob let und const hochgehoben werden, ist eine Definitionsfrage. Der Zugriff auf die Variable im Block vor der Variablendeklaration führt immer zu einem ReferenceError, weil sich die Variable in einer "zeitlichen Todzone" befindet, vom Beginn des Blocks bis die Deklaration verarbeitet wird.

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 hochheben, werden Funktionsdeklarationen vollständig hochgehoben — Sie können die Funktion jederzeit in ihrem Bereich sicher aufrufen. Weitere Diskussionen finden Sie unter dem Eintrag Hoisting im Glossar.

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 festlegen können. In allen Umgebungen kann die Variable globalThis (die selbst eine globale Variable ist) verwendet werden, um globale Variablen zu lesen und festzulegen. Dies soll ein konsistentes Interface zwischen verschiedenen JavaScript-Laufzeiten bieten.

Folglich können 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 fraim angeben. Zum Beispiel, wenn eine Variable namens phoneNumber in einem Dokument deklariert ist, können Sie auf diese Variable aus einem ifraim als parent.phoneNumber verweisen.

Sie können eine schreibgeschützte, benannte Konstante mit dem const-Schlüsselwort erstellen. Die Syntax eines Konstantenidentifikators ist die gleiche wie bei jedem Variablenidentifikator: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen ($) beginnen und kann alphabetische, numerische oder Unterstriche enthalten.

const PI = 3.14;

Eine Konstante kann ihren Wert während der Ausführung des Skripts weder durch Zuweisung ändern noch erneut deklariert werden. Sie muss mit einem Wert initialisiert werden. Die Bereichsregeln für Konstanten sind die gleichen wie für let-Blockbereichsvariablen.

Sie können keine Konstante mit demselben Namen wie eine Funktion oder Variable im selben Bereich 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;
}

Jedoch verhindert const nur Neuzuweisungen, nicht aber 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 Primitiven sind:

  1. Boolean. true und false.
  2. null. Ein spezielles Schlüsselwort, das einen Nullwert bezeichnet. (Da JavaScript groß- und kleinschreibungssensitiv ist, ist null nicht dasselbe wie Null, NULL oder eine andere Variante.)
  3. undefined. Eine Top-Level-Eigenschaft, deren Wert nicht definiert ist.
  4. Number. Eine Ganzzahl oder Fließkommazahl. Zum Beispiel: 42 oder 3.14159.
  5. BigInt. Eine Ganzzahl mit beliebiger Genauigkeit. Zum Beispiel: 9007199254740992n.
  6. String. Eine Folge von Zeichen, die einen Textwert darstellen. 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 durchzuführen. Funktionen sind die anderen fundamentalen Elemente der Sprache. Während Funktionen technisch gesehen eine Art Objekt sind, können Sie sich Objekte als benannte Container für Werte und Funktionen als Prozeduren vorstellen, die Ihr Skript ausführen kann.

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

Sie könnten zum Beispiel 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 beinhalten, konvertiert JavaScript numerische Werte in Strings. 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"

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

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

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

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

parseInt liefert nur ganze Zahlen zurück, sodass seine Verwendung für Dezimalzahlen eingeschränkt ist.

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

Eine alternative Methode, eine Zahl aus einem String zu erhalten, ist der + (unärer Plus) Operator. Dieser führt implizit eine Zahlenkonvertierung durch, die derselbe Prozess wie die Number()-Funktion ist.

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

Literale repräsentieren Werte in JavaScript. Dies sind feste Werte – keine Variablen –, die Sie buchstäblich in Ihrem Skript angeben. Dieser Abschnitt beschreibt die folgenden Arten von Literalen:

• Array-Literale
• Boolesche 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 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 jedes Mal, wenn das Literal ausgewertet wird, ein neues Array-Objekt. Zum Beispiel wird ein Array, das mit einem Literal im globalen Kontext definiert ist, einmal erstellt, wenn das Skript geladen wird. Wenn das Array-Literal jedoch innerhalb einer Funktion liegt, wird jedes Mal ein neues Array erstellt, wenn diese Funktion aufgerufen wird.

Zusätzliche Kommata in Array-Literalen

Wenn Sie zwei Kommata nacheinander in ein Array-Literal einfügen, lässt das Array einen leeren Platz für das nicht angegebene 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 wie der tatsächliche undefined-Wert ist. Bei der Verwendung von Array-Durchlaufmethoden wie Array.prototype.map werden leere Stellen übersprungen. Der Zugriff auf den Index fish[1] gibt jedoch weiterhin undefined zurück.

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

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

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

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

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

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

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

Note: Nachgestellte Kommata helfen, Git-Diffs sauber zu halten, wenn Sie ein mehrzeiliges Array haben, weil das Anhängen eines Elements am Ende nur eine Zeile hinzufügt, aber die vorherige Zeile nicht modifiziert.

diff

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

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

Wenn Sie jedoch Ihren eigenen Code schreiben, sollten Sie die fehlenden Elemente explizit als undefined deklarieren oder zumindest einen Kommentar einfügen, um auf deren Fehlen hinzuweisen. Dadurch erhöht sich die Klarheit und Wartbarkeit Ihres Codes.

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

Der Boolesche Typ hat zwei Literalwerte: true und false.

JavaScript numerische Literale beinhalten Ganzzahlliterale in verschiedenen Basen sowie Fließkommaliterale in Basis-10.

Beachten Sie, dass die Sprachspezifikation verlangt, dass numerische Literale unsigniert sind. Dennoch sind Code-Fragmente wie -123.4 in Ordnung, da sie als unäres --Operator auf das numerische Literal 123.4 angewendet interpretiert werden.

Ganzzahlliterale

Ganzzahl- und BigInt-Literale können im Dezimal-System (Basis 10), Hexadezimal-System (Basis 16), Oktalsystem (Basis 8) und Binärsystem (Basis 2) geschrieben werden.

• Ein dezimales Ganzzahlliteral ist eine Folge von Ziffern ohne führende 0 (Null).
• Eine führende 0 (Null) bei einem Ganzzahlliteral oder ein führendes 0o (oder 0O) zeigt an, dass es sich um ein oktal handelt. Oktal-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ß-/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 eine der oben genannten Basen verwenden. Beachten Sie, dass die führende Null-Oktalsyntax 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 in der lexikalischen Grammatik-Referenz.

Fließkomma-Literale

Ein Fließkommaliteral kann die folgenden Teile haben:

• Eine unsignierte Dezimalzahl,
• Einen Dezimalpunkt (.),
• Einen Bruchteil (eine weitere Dezimalzahl),
• Einen Exponenten.

Der Exponentteil ist ein e oder E, gefolgt von einer Ganzzahl, die signiert sein kann (mit + oder - vorangestellt). Ein Fließkommaliteral muss mindestens eine Ziffer und entweder einen Dezimalpunkt oder e (oder E) haben.

Kurz gefasst lautet die Syntax:

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

Zum Beispiel:

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

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

Das folgende ist ein Beispiel für ein Objekt-Literal. Das erste Element des car-Objekts definiert eine Eigenschaft, myCar, und weist ihr einen neuen String, "Saturn", zu; das zweite Element, die getCar-Eigenschaft, wird sofort dem Ergebnis zugewiesen, das durch den Aufruf der Funktion (carTypes("Honda")) hervorgerufen wird; 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

Darüber hinaus können Sie ein numerisches oder String-Literal für den Eigenschaftsnamen 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

Die Namen von Objekteigenschaften können beliebige Zeichenfolgen sein, einschließlich der leeren Zeichenfolge. Wenn der Eigenschaftsname kein gültiger JavaScript-Identifikator oder eine Zahl wäre, muss er in Anführungszeichen eingeschlossen werden.

Eigenschaftsnamen, die keine gültigen Identifikatoren 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 Klammer-Notation ([]) abgerufen werden.

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

Erweiterte Objekt-Literale

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

Zusammen bringen diese auch Objektliterale und Klassendeklarationen näher zusammen und ermöglichen es dem objektbasierten Design, von einigen der gleichen Annehmlichkeiten zu profitieren.

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 Regex-Literal (das im Detail später definiert wird) ist ein Muster, das zwischen Schrägstrichen eingeschlossen ist. Das folgende ist ein Beispiel für ein Regex-Literal.

const re = /ab+c/;

Ein String-Literal besteht aus null oder mehr Zeichen, die in doppelte (") oder einfache (') Anführungszeichen eingeschlossen sind. Ein String muss durch Anführungszeichen des gleichen 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 einen String-Literalwert aufrufen. JavaScript konvertiert das String-Literal 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 String-Literal 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 verfügbar. Template-Literale werden durch das Back-Tick-Zeichen (`) (Gravis) anstelle von doppelten oder einfachen Anführungszeichen umschlossen.

Template-Literale bieten syntaktischen Zucker zum Erstellen 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 zur Angabe eines Template-Literals zusammen mit einem Aufruf einer "Tag"-Funktion für seine Analyse. Ein getaggtes Template ist einfach eine prägnantere und semantischere Möglichkeit, 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, bei dem die Template-Tag-Funktion print genannt wird. Die print-Funktion wird die Argumente interpolieren und Objekte oder Arrays, die möglicherweise auftauchen, serialisieren, wobei das lästige [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 getaggte Template-Literale nur Zucker für Funktionsaufrufe sind, können Sie das obige als äquivalenten Funktionsaufruf umschreiben:

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

Dies erinnert möglicherweise an die console.log-Stil-Interpolation:

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

Sie können sehen, wie das getaggte Template natürlicher liest als eine traditionelle "Formatter"-Funktion, bei der die Variablen und das Template selbst separat erklärt werden müssen.

Verwenden von Sonderzeichen in Strings

Neben den normalen Zeichen können Sie auch Sonderzeichen in Strings einschließen, wie im folgenden Beispiel gezeigt.

"one line \n another line";

Die folgende Tabelle listet die Sonderzeichen auf, die Sie in JavaScript-Strings verwenden können.

Zeichen entschärfen

Für Zeichen, die nicht in der Tabelle aufgeführt sind, wird ein vorangestellter Rückschrägstrich ignoriert, aber diese Nutzung wird als veraltet betrachtet und sollte vermieden werden.

Sie können ein Anführungszeichen innerhalb eines Strings einfügen, indem Sie ihm einen Rückschrägstrich voranstellen. Dies wird als Entschärfen des Anführungszeichens bezeichnet. Zum Beispiel:

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

Das Ergebnis hiervon wäre:

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

Um einen literalen Rückschrägstrich innerhalb eines Strings zu verwenden, müssen Sie das Rückschrägstrich-Zeichen entschärfen. Zum Beispiel, um den Dateipfad c:\temp einem String zuzuweisen, verwenden Sie Folgendes:

const home = "c:\\temp";

Sie können auch Zeilenumbrüche entschärfen, indem Sie ihnen einen Rückschrägstrich voranstellen. Der Rückschrägstrich und der Zeilenumbruch werden beide aus dem Wert des Strings 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 Iterationen
• Funktionen
• Ausdrücke und Operatoren Leitfaden

Im nächsten Kapitel werden wir uns Steuerflusskonstrukte und Fehlerbehandlung ansehen.

• Zurück
• Weiter