• Zurück
• Weiter

Dieses Kapitel bespricht die grundlegende Grammatik, Variablendeklarationen, Datentypen und Literale von JavaScript.

Grundlagen

JavaScript übernimmt den Großteil seiner Syntax von Java, C und C++, wurde aber auch von Awk, Perl und Python beeinflusst.

JavaScript istcase-sensitive (Groß- und Kleinschreibung wird unterschieden) und verwendet dieUnicode-Zeichensatzkodierung. Zum Beispiel könnte das Wort "Früh" (was im Deutschen "früh" bedeutet) als Variablenname verwendet werden.

const Früh = "foobar";

Aber die Variablefrüh ist nicht gleichFrüh, da JavaScript zwischen Groß- und Kleinschreibung unterscheidet.

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

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

Es wird jedoch als bewährte Praxis angesehen, nach jeder Anweisung ein Semikolon zu schreiben, auch wenn es nicht strikt notwendig ist. Diese Praxis verringert die Wahrscheinlichkeit, dass sich Fehler in den Code einschleichen.

Der Quelltext eines JavaScript-Skripts wird von links nach rechts gescannt und in eine Folge von Eingabeelementen konvertiert, welcheTokens,Steuerzeichen,Zeilenabschlüsse,Kommentare oderLeerzeichen sind. (Leerzeichen, Tabulatoren und Zeilenumbrüche werden als Leerzeichen betrachtet.)

Kommentare

Die Syntax fürKommentare 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 häufig auf, wenn Sie versehentlich eine*/-Sequenz in Ihrem Kommentar einfügen, was den Kommentar beenden würde.

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

In diesem Fall müssen Sie das*/-Muster aufbrechen. Zum Beispiel, indem Sie einen Backslash einfügen:

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

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

Deklarationen

JavaScript hat drei Arten von Variablendeklarationen.

var

Deklariert eine Variable, die optional mit einem Wert initialisiert wird.

let

Deklariert eine lokal, blockbasierte Variable, die optional mit einem Wert initialisiert wird.

const

Deklariert eine blockbasierte, schreibgeschützte benannte Konstante.

Variablen

Sie verwenden Variablen als symbolische Namen für Werte in Ihrer Anwendung. Die Namen von Variablen, auchBezeichner genannt, folgen 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 case-sensitive ist, umfassen Buchstaben die ZeichenA bisZ (Großbuchstaben) sowiea bisz (Kleinbuchstaben).

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

Einige Beispiele für gültige Namen sindNumber_hits,temp99,$credit und_name.

Variablen deklarieren

Sie können eine Variable auf zwei Arten deklarieren:

• Mit dem Schlüsselwortvar. Zum Beispielvar x = 42. Diese Syntax kann verwendet werden, um sowohllokale als auchglobale Variablen zu deklarieren, abhängig vomAusführungskontext.
• Mit dem Schlüsselwortconst oderlet. Zum Beispiellet y = 13. Diese Syntax kann verwendet werden, um eine lokal blockierte Variable zu deklarieren. (SieheVariablenbereich unten.)

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

Variablen sollten immer deklariert werden, bevor sie verwendet werden. JavaScript erlaubte früher die Zuweisung zu nicht deklarierten Variablen, was einenicht deklarierte globale Variable erstellt. Dies ist ein Fehler imstrict mode und sollte insgesamt vermieden werden.

Deklaration und Initialisierung

In einer Anweisung wielet x = 42 wird der Teillet x alsDeklaration bezeichnet, und der Teil= 42 alsInitialisierer. Die Deklaration ermöglicht den späteren Zugriff auf die Variable im Code, ohne einenReferenceError auszulösen, während der Initialisierer der Variablen einen Wert zuweist. Invar- undlet-Deklarationen ist der Initialisierer optional. Wird eine Variable ohne Initialisierer deklariert, erhält sie den Wertundefined.

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

Im Wesentlichen istlet x = 42 gleichbedeutend mitlet x; x = 42.

const-Deklarationen benötigen immer einen Initialisierer, da sie jede Art von Zuweisung nach der Deklaration verbieten, und eine implizite Initialisierung mitundefined wahrscheinlich ein Programmierfehler ist.

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

Variablenbereich

Eine Variable kann zu einem der folgendenBereiche gehören:

• Globaler Bereich: Der Standardbereich für alle Codeausführungen im Skriptmodus.
• Modulbereich: Der Bereich für Codeausführungen im Modus "Modul".
• Funktionsbereich: Der Bereich, der mit einerFunktion erstellt wird.

Zusätzlich können Variablen, die mitlet oderconst deklariert wurden, einem zusätzlichen Bereich angehören:

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

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

let- undconst-Deklarationen können auch auf denBlocksatz begrenzt sein, in dem sie deklariert werden.

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

Variablen, die mitvar erstellt werden, sind jedoch nicht auf den Block beschränkt, sondern nur lokal zumFunktions- (oder globalen Bereich), in dem sich der Block befindet.

Zum Beispiel wird der folgende Code5 protokollieren, da der Bereich vonx der globale Kontext (oder der Funktionskontext, wenn der Code Teil einer Funktion ist) ist. Der Bereich vonx ist nicht auf den unmittelbarenif-Block beschränkt.

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

Variablen Hoisting

var-deklarierte Variablen werdengehoistet, was bedeutet, dass Sie überall in ihrem Bereich auf die Variable verweisen können, selbst wenn ihre Deklaration noch nicht erreicht wurde. Sie können sichvar-Deklarationen als "an die Spitze ihres Funktions- oder globalen Bereichs gehoben" vorstellen. Wenn Sie jedoch auf eine Variable zugreifen, bevor sie deklariert ist, ist der Wert immerundefined, da nur ihreDeklaration undStandardinitialisierung (mitundefined) gehoistet wird, nicht jedoch ihreWertzuweisung.

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

Die obigen Beispiele werden genauso interpretiert wie:

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

Aufgrund des Hoistings sollten allevar-Anweisungen in einer Funktion so nahe wie möglich an der Spitze der Funktion platziert werden. Diese Best Practice erhöht die Klarheit des Codes.

Oblet undconst gehoistet werden, ist eine Definitionsdebatte. Das Referenzieren der Variable im Block vor der Variablendeklaration resultiert immer in einemReferenceError, da sich die Variable von Beginn des Blocks bis zur Verarbeitung der Deklaration in einer "temporalen Todeszone" befindet.

console.log(x); // ReferenceErrorconst x = 3;console.log(y); // ReferenceErrorlet y = 3;

Im Gegensatz zuvar-Deklarationen, die nur die Deklaration aber nicht ihren Wert hoisten, werdenFunktionsdeklarationen vollständig gehoistet — Sie können die Funktion sicher überall in ihrem Bereich aufrufen. Siehe denHopsten Glossareintrag für weitere Diskussionen.

Globale Variablen

Globale Variablen sind tatsächlich Eigenschaften desglobalen Objekts.

In Webseiten ist das globale Objektwindow, sodass Sie globale Variablen mit derwindow.variable-Syntax lesen und setzen können. In allen Umgebungen kann dieglobalThis-Variable (die selbst eine globale Variable ist) verwendet werden, um globale Variablen zu lesen und zu setzen. Dies dient dazu, eine konsistente Schnittstelle zwischen verschiedenen JavaScript-Laufzeiten bereitzustellen.

Folglich können Sie von einem Fenster oder Rahmen aus auf globale Variablen zugreifen, die in einem anderen Fenster oder Rahmen deklariert sind, indem Sie den Namen deswindow- oderframe-Fensters angeben. Wenn zum Beispiel eine Variable namensphoneNumber in einem Dokument deklariert ist, können Sie von einemiframe aus auf diese Variable alsparent.phoneNumber verweisen.

Konstanten

Sie können eine schreibgeschützte, benannte Konstante mit demconst-Schlüsselwort erstellen. Die Syntax eines Konstanten-Bezeichners ist die gleiche wie bei jedem Variablen-Bezeichner: Er muss mit einem Buchstaben, einem Unterstrich oder einem Dollarzeichen ($) beginnen, und kann alphabetische, numerische oder Unterstrich-Zeichen enthalten.

const PI = 3.14;

Eine Konstante kann während der Skriptausführung weder durch Zuweisung geändert noch neu deklariert werden. Sie muss mit einem Wert initialisiert werden. Die Bereichsregeln für Konstanten sind die gleichen wie fürlet-blockbasierte Variablen.

Sie können keine Konstante mit dem gleichen Namen wie eine Funktion oder Variable im gleichen Bereich deklarieren. Zum Beispiel:

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

const verhindert jedoch nurZuweisungen, aber nichtMutationen. Die Eigenschaften von Objekten, die Konstanten zugewiesen werden, 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 wird 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'];

Datenstrukturen und Typen

Datentypen

Der neueste ECMAScript-Standard definiert acht Datentypen:

• Sieben Datentypen, diePrimitives sind:

  1. Boolean.true undfalse.
  2. null. Ein spezielles Schlüsselwort, das einen null-Wert bezeichnet. (Da JavaScript case-sensitive ist, istnull nicht das gleiche wieNull,NULL oder irgendeine andere Variante.)
  3. undefined. Eine Top-Level-Eigenschaft, deren Wert nicht definiert ist.
  4. Number. Eine ganze Zahl oder Fließkommazahl. Zum Beispiel:42 oder3.14159.
  5. BigInt. Eine Ganzzahl mit beliebiger Präzision. 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.

• undObject

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 gesehen eine Art von Objekt sind, können Sie Objekte als benannte Container für Werte betrachten und Funktionen als Prozeduren, die Ihr Skript ausführen kann.

Datentypumwandlung

JavaScript ist einedynamisch typisierte Sprache. Das bedeutet, dass Sie beim Deklarieren einer Variable den Datentyp nicht angeben müssen. Es bedeutet auch, dass Datentypen nach Bedarf während der Skriptausführung automatisch umgewandelt werden.

Sie könnten beispielsweise eine Variable wie folgt definieren:

let answer = 42;

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

answer = "Thanks for all the fish!";

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

Zahlen und der '+' Operator

In Ausdrücken mit numerischen und String-Werten mit dem+-Operator wandelt JavaScript numerische Werte in Strings um. 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 wandelt JavaScript numerische Wertenicht in Strings um. Zum Beispiel:

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

Strings in Zahlen umwandeln

Falls ein Wert, der eine Zahl darstellt, als String gespeichert ist, gibt es Methoden zur Umwandlung.

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

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

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

Eine alternative Methode, um eine Zahl aus einem String zu erhalten, ist der+ (unäres Plus)-Operator. Dieser führt implizit eineNummernumwandlung durch, was derselbe Prozess ist wie dieNumber()-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 repräsentieren Werte in JavaScript. Dies sind feste Werte — keine Variablen —, die Sie buchstäblich in Ihr Skript einfügen. Dieser Abschnitt beschreibt die folgenden Arten von Literalen:

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

Array-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 seinelength wird auf die Anzahl der angegebenen Argumente gesetzt.

Das folgende Beispiel erstellt dascoffees-Array mit drei Elementen und einerlength von drei:

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

Ein Array-Literal erstellt jedes Mal ein neues Array-Objekt, wenn das Literal ausgewertet wird. Beispielsweise wird ein Array, das mit einem Literal im globalen Bereich definiert ist, einmal erstellt, wenn das Skript geladen wird. Befindet sich das Array-Literal jedoch innerhalb einer Funktion, wird jedes Mal ein neues Array instanziiert, wenn diese Funktion aufgerufen wird.

Zusätzliche Kommata in Array-Literalen

Wenn Sie zwei Kommata direkt hintereinander in einem Array-Literal verwenden, lässt das Array einen leeren Slot für das nicht spezifizierte Element. Das folgende Beispiel erstellt dasfish-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 tatsächlicheundefined-Wert. Bei der Verwendung von Array-Durchlaufmethoden wieArray.prototype.map werden leere Slots übersprungen. Der Zugriff mit Indexfish[1] liefert jedoch weiterhinundefined.

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

Im folgenden Beispiel hat das ArraymyList einelength von drei. Es gibt keinmyList[3] undmyList[1] ist leer. Alle anderen Kommata in der Liste kennzeichnen ein neues Element.

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

Im folgenden Beispiel hat das ArraymyList einelength von vier, undmyList[0] undmyList[2] fehlen.

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

Im folgenden Beispiel hat das ArraymyList einelength von vier, undmyList[1] undmyList[3] fehlen.Nur das letzte Komma wird ignoriert.

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

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 ausdrücklich alsundefined deklarieren oder zumindest einen Kommentar einfügen, um auf ihr Fehlen hinzuweisen. Dies erhöht die Klarheit und Wartbarkeit Ihres Codes.

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

Boolean-Literale

Der Boolean-Typ hat zwei Literale:true undfalse.

Numerische Literale

JavaScript numerische Literale umfassen Ganzzahlen in verschiedenen Basen sowie Fließkommaliterale in Basis-10.

Beachten Sie, dass die Sprachspezifikation verlangt, dass numerische Literale unsigniert sind. Dennoch sind Codefragmente wie-123.4 in Ordnung, da sie als unärer--Operator angewendet auf das numerische Literal123.4 interpretiert werden.

Ganzzahlenliterale

Ganzzahlen- undBigInt-Literale können in dezimalem (Basis 10), hexadezimalem (Basis 16), oktalem (Basis 8) und binärem (Basis 2) Format geschrieben werden.

• Eindezimal Ganzzahlenliteral ist eine Folge von Ziffern ohne führende0 (Null).
• Eine führende0 (Null) bei einem Ganzzahlenliteral oder ein führendes0o (oder0O) gibt an, dass es sich um einoktayl handelt. Oktale Ganzzahlenliterale können nur die Ziffern0 –7 enthalten.
• Ein führendes0x (oder0X) gibt einhexadezimales Ganzzahlenliteral an. Hexadezimale Ganzzahlen können Ziffern (0 –9) und die Buchstabena –f undA –F enthalten. (Die Groß- und Kleinschreibung eines Zeichens ändert seinen Wert nicht. Daher:0xa =0xA =10 und0xf =0xF =15.)
• Ein führendes0b (oder0B) gibt einbinäres Ganzzahlenliteral an. Binäre Ganzzahlenliterale können nur die Ziffern0 und1 enthalten.
• Ein nachgestelltesn-Suffix bei einem Ganzzahlenliteral gibt einBigInt-Literal an. DasBigInt-Literal kann jede der oben genannten Basen verwenden. Beachten Sie, dass die führende Null-Oktal-Syntax wie0123n nicht erlaubt ist, aber0o123n ist in Ordnung.

Einige Beispiele für 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)

Weitere Informationen finden Sie unterNumerische Literale in der Referenz zur lexikalischen Grammatik.

Fließkommaliterale

Ein Fließkommaliteral kann die folgenden Teile haben:

• Eine unsignierte Dezimalzahl,
• Ein Dezimalpunkt (.),
• Ein Bruchteil (eine andere Dezimalzahl),
• Ein Exponent.

Der Exponententeil ist eine oderE, gefolgt von einer ganzen Zahl, die mit Vorzeichen versehen sein kann (vorangestellt von+ oder-). Ein Fließkommaliteral muss mindestens eine Ziffer haben und entweder einen Dezimalpunkt oder eine (oderE).

Kurz gesagt, die Syntax ist:

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

Zum Beispiel:

3.1415926.1234567893.1E+12.1e-23

Objekt-Literale

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

Das folgende ist ein Beispiel für ein Objekt-Literal. Das erste Element descar-Objekts definiert eine Eigenschaft,myCar, und weist ihr eine neue Zeichenfolge"Saturn" zu; das zweite Element, diegetCar-Eigenschaft, wird sofort zugewiesen, das Ergebnis der Ausführung der Funktion(carTypes("Honda")); das dritte Element, diespecial-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); // Saturnconsole.log(car.getCar); // Hondaconsole.log(car.special); // Toyota

Zusätzlich können Sie für den Namen einer Eigenschaft ein numerisches oder String-Literal 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); // Jeepconsole.log(car[7]); // Mazda

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

Eigenschaftsnamen, die keine gültigen Bezeichner sind, können nicht als Dot (.) Eigenschaft benutzt werden.

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

Stattdessen müssen sie mit der Klammernnotation ([]) aufgerufen werden.

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

Erweiterte Objekt-Literale

Objekt-Literale unterstützen eine Reihe von vereinfachten Syntaxen, die das Setzen des Prototyps bei der Konstruktion, die Kurzform fürfoo: foo Zuweisungen, das Definitionen von Methoden, das Durchführen vonsuper-Aufrufen und das Berechnen von Eigenschaftsnamen mit Ausdrücken umfassen.

Insgesamt bringen diese Vereinfachungen Objekt-Literale und Klassendeklarationen näher zusammen und ermöglichen es, dass objektbasierte Designs von denselben Annehmlichkeiten profitieren können.

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

const re = /ab+c/;

String-Literale

Ein String-Literal ist null oder mehr Zeichen, eingeschlossen in doppelte (") oder einfache (') Anführungszeichen. Ein String muss von Anführungszeichen desselben Typs begrenzt werden (d.h. 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 spezifisch einString-Objekt verwenden. SieheString für Details zuString-Objekten.

Sie können jede Methode desString-Objekts auf einem String-Literal verwenden. JavaScript wandelt das String-Literal automatisch in ein temporäres String-Objekt um, ruft die Methode auf und verwirft dann das temporäre String-Objekt. Sie können auch dielength-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 mit dem Rückwärtigen Akzent (`) (Gravis)-Zeichen anstelle von doppelten oder einfachen Anführungszeichen eingeklammert.

Template-Literale bieten syntaktischen Zucker zum Erstellen von Zeichenketten. (Dies ist vergleichbar mit String-Interpolation-Features 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 interpolationconst name = "Lev",  time = "today";`Hello ${name}, how are you ${time}?`;

Tagged Templates sind eine kompakte Syntax zum Spezifizieren eines Template-Literales zusammen mit einem Aufruf an eine "Tag"-Funktion zu dessen Parsen. Ein getagtes Template ist nur eine präzisere und semantische Methode, um eine Funktion zu nennen, die eine Zeichenkette und eine Menge relevanter Werte verarbeitet. Der Name der Template-Tag-Funktion geht dem Template-Literal voran — wie im folgenden Beispiel, in dem die Template-Tag-Funktionprint heißt. Dieprint-Funktion interpoliert die Argumente und serialisiert alle Objekte oder Arrays, die auftreten könnten, und vermeidet 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}

Da getaggte Template-Literale nur syntaktisches Zucker für Funktionsaufrufe sind, können Sie das obige als einen äquivalenten Funktionsaufruf umschreiben:

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

Dies könnte an dieconsole.log-Art der Interpolation erinnern:

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 deklariert werden müssen.

Spezielle Zeichen in Strings verwenden

Neben normalen Zeichen können Sie auch spezielle Zeichen in Strings einbinden, wie im folgenden Beispiel gezeigt.

"one line \n another line";

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

Zeichen maskieren

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

Sie können ein Anführungszeichen innerhalb einer Zeichenfolge einfügen, indem Sie ihm einen Backslash voranstellen. Dies wird alsMaskierung des Anführungszeichens bezeichnet. Zum Beispiel:

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

Das Ergebnis davon wäre:

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

Um einen doppelten Backslash innerhalb einer Zeichenfolge zu enthalten, müssen Sie das Backslash-Zeichen maskieren. Zum Beispiel, um den Dateipfadc:\temp einer Zeichenfolge zuzuweisen, verwenden Sie Folgendes:

const home = "c:\\temp";

Sie können auch Zeilenumbrüche maskieren, indem Sie ihnen einen Backslash voranstellen. Der Backslash 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 für Deklarationen und Typen. Um mehr über die Sprachkonstrukte von JavaScript zu erfahren, lesen Sie auch die folgenden Kapitel in diesem Leitfaden:

• Leitfaden für Steuerfluss und Fehlerbehandlung
• Schleifen und Iterationen
• Funktionen
• Ausdrücke und Operatoren

Im nächsten Kapitel werden wir uns die Konstruktionen zum Steuerfluss und zur Fehlerbehandlung ansehen.

• Zurück
• Weiter