Richtlinien zum Schreiben von JavaScript-Code-Beispielen

Dieser Abschnitt erklärt die allgemeinen Richtlinien, die beim Schreiben von JavaScript-Code-Beispielen zu beachten sind. In späteren Abschnitten werden spezifischere Details behandelt.

Meinungen zu korrekter Einrückung, Leerzeichen und Zeilenlängen waren schon immer kontrovers. Diskussionen zu diesen Themen lenken von der Erstellung und Pflege von Inhalten ab.

Auf MDN Web Docs verwenden wir Prettier als Code-Formatter, um den Code-Stil konsistent zu halten (und um Off-Topic-Diskussionen zu vermeiden). Sie können unsere Konfigurationsdatei einsehen, um mehr über die aktuellen Regeln zu erfahren, und die Prettier-Dokumentation lesen.

Prettier formatiert den gesamten Code und hält den Stil konsistent. Dennoch gibt es ein paar zusätzliche Regeln, die Sie befolgen müssen.

Sie können neue Funktionen verwenden, sobald jeder große Browser — Chrome, Edge, Firefox und Safari — diese unterstützt.

Verwenden Sie beim Erstellen von Arrays Literale und keine Konstruktoren.

Erstellen Sie Arrays so:

const visitedCities = [];

Tun Sie dies nicht beim Erstellen von Arrays:

const visitedCities = new Array(length);

Verwenden Sie beim Hinzufügen von Elementen zu einem Array push() und nicht direkte Zuordnung. Betrachten Sie das folgende Array:

const pets = [];

Fügen Sie dem Array Elemente so hinzu:

pets.push("cat");

Fügen Sie dem Array keine Elemente so hinzu:

pets[pets.length] = "cat";

Das Schreiben von asynchronem Code verbessert die Leistung und sollte, wenn möglich, verwendet werden. Insbesondere können Sie verwenden:

• Promises
• async/await

Wenn beide Techniken möglich sind, bevorzugen wir die Verwendung der einfacheren async/await-Syntax. Leider können Sie await nicht auf oberster Ebene verwenden, es sei denn, Sie befinden sich in einem ECMAScript-Modul. CommonJS-Module, die von Node.js verwendet werden, sind keine ES-Module. Wenn Ihr Beispiel überall verwendet werden soll, vermeiden Sie await auf oberster Ebene.

Kommentare sind entscheidend für das Schreiben guter Code-Beispiele. Sie klären die Absicht des Codes und helfen Entwicklern, ihn zu verstehen. Achten Sie besonders auf sie.

• Wenn der Zweck oder die Logik des Codes nicht offensichtlich ist, fügen Sie einen Kommentar mit Ihrer Absicht hinzu, wie unten gezeigt:

  jsCopy to Clipboard

  let total = 0;
  
  // Calculate the sum of the four first elements of arr
  for (let i = 0; i < 4; i++) {
    total += arr[i];
  }
  

  Andererseits ist es keine gute Nutzung der Kommentare, den Code in Prosa zu wiederholen:

  jsCopy to Clipboard

  let total = 0;
  
  // For loop from 1 to 4
  for (let i = 0; i < 4; i++) {
    // Add value to the total
    total += arr[i];
  }
  

• Kommentare sind auch nicht notwendig, wenn Funktionen klare Namen haben, die beschreiben, was sie tun. Schreiben Sie:

  jsCopy to Clipboard

  closeConnection();
  

  Schreiben Sie nicht:

  jsCopy to Clipboard

  closeConnection(); // Closing the connection
  

Einzeilige Kommentare werden mit // markiert, im Gegensatz zu Blockkommentaren, die zwischen /* … */ eingeschlossen sind.

Verwenden Sie im Allgemeinen einzeilige Kommentare, um den Code zu kommentieren. Autoren müssen jede Zeile des Kommentars mit // markieren, damit ausgeblendeter Code visuell leichter zu erkennen ist. Darüber hinaus ermöglicht diese Konvention, Codeabschnitte mit /* … */ beim Debuggen auskommentieren zu können.

• Lassen Sie ein Leerzeichen zwischen den Schrägstrichen und dem Kommentar. Beginnen Sie wie einen Satz mit einem Großbuchstaben, enden Sie jedoch nicht mit einem Punkt.

  jsCopy to Clipboard

  // This is a well-written single-line comment
  

• Wenn ein Kommentar nicht unmittelbar nach einem neuen Einrückungslevel beginnt, fügen Sie eine Leerzeile ein und dann den Kommentar hinzu. Dadurch wird ein Codeblock erstellt, der offensichtlich macht, worauf sich der Kommentar bezieht. Platzieren Sie Ihre Kommentare auf separaten Zeilen vor dem Code, auf den sie sich beziehen. Dies wird im folgenden Beispiel gezeigt:

  jsCopy to Clipboard

  function checkout(goodsPrice, shipmentPrice, taxes) {
    // Calculate the total price
    const total = goodsPrice + shipmentPrice + taxes;
  
    // Create and append a new paragraph to the document
    const para = document.createElement("p");
    para.textContent = `Total price is ${total}`;
    document.body.appendChild(para);
  }
  

• Bei Code, der in einer Produktionsumgebung laufen soll, müssen Sie selten Kommentare hinzufügen, wenn Sie einige Daten loggen. In Code-Beispielen verwenden wir oft console.log(), console.error() oder ähnliche Funktionen, um wichtige Werte auszugeben. Um dem Leser zu helfen, zu verstehen, was ohne den Code auszuführen passieren wird, können Sie einen Kommentar nach der Funktion hinzufügen mit dem Log, das erzeugt wird. Schreiben Sie:

  jsCopy to Clipboard

  function exampleFunc(fruitBasket) {
    console.log(fruitBasket); // ['banana', 'mango', 'orange']
  }
  

  Schreiben Sie nicht:

  jsCopy to Clipboard

  function exampleFunc(fruitBasket) {
    // Logs: ['banana', 'mango', 'orange']
    console.log(fruitBasket);
  }
  

• Falls die Zeile zu lang wird, platzieren Sie den Kommentar nach der Funktion, wie folgt:

  jsCopy to Clipboard

  function exampleFunc(fruitBasket) {
    console.log(fruitBasket);
    // ['banana', 'mango', 'orange', 'apple', 'pear', 'durian', 'lemon']
  }
  

Kurze Kommentare sind in der Regel besser, daher versuchen Sie, sie in einer Zeile von 60–80 Zeichen zu halten. Wenn dies nicht möglich ist, verwenden Sie // am Anfang jeder Zeile:

// This is an example of a multi-line comment.
// The imaginary function that follows has some unusual
// limitations that I want to call out.
// Limitation 1
// Limitation 2

Verwenden Sie nicht /* … */:

/* This is an example of a multi-line comment.
  The imaginary function that follows has some unusual
  limitations that I want to call out.
  Limitation 1
  Limitation 2 */

Das Überspringen redundanten Codes mit Ellipsen („…“) ist notwendig, um Beispiele kurz zu halten. Dennoch sollten Autoren es durchdacht tun, da Entwickler häufig Beispiele kopieren und einfügen, und alle unsere Codebeispiele sollten gültiges JavaScript sein.

In JavaScript sollten Sie die Ellipsen („…“) in einen Kommentar setzen. Wenn möglich, geben Sie an, welche Aktion jemand, der dieses Snippet erneut verwendet, hinzufügen muss.

Die Verwendung eines Kommentars für die Ellipsen („…“) ist expliziter und verhindert Fehler, wenn ein Entwickler einen Beispielcode kopiert und einfügt. Schreiben Sie:

function exampleFunc() {
  // Add your code here
  // …
}

Verwenden Sie die Ellipsen („…“) nicht so:

function exampleFunc() {
  …
}

Beim Schreiben von Code lassen Sie normalerweise Parameter weg, die Sie nicht benötigen. Aber in einigen Code-Beispielen möchten Sie zeigen, dass Sie einige mögliche Parameter nicht verwendet haben.

Verwenden Sie dazu /* … */ in der Parameterliste. Dies ist eine Ausnahme von der Regel, nur einzeilige Kommentare (//) zu verwenden.

array.forEach((value /* , index, array */) => {
  // …
});

Für Funktionsnamen verwenden Sie camel case, beginnend mit einem Kleinbuchstaben. Verwenden Sie prägnante, verständliche und semantische Namen, wo es angebracht ist.

Das folgende ist ein korrektes Beispiel für einen Funktionsnamen:

function sayHello() {
  console.log("Hello!");
}

Verwenden Sie keine Funktionsnamen wie diese:

function SayHello() {
  console.log("Hello!");
}

function doIt() {
  console.log("Hello!");
}

• Verwenden Sie, wo möglich, die Funktionsdeklaration gegenüber Funktionsausdrücken, um Funktionen zu definieren.

  Hier ist der empfohlene Weg, eine Funktion zu deklarieren:

  jsCopy to Clipboard

  function sum(a, b) {
    return a + b;
  }
  

  Dies ist kein guter Weg, eine Funktion zu definieren:

  jsCopy to Clipboard

  let sum = function (a, b) {
    return a + b;
  };
  

• Wenn Sie anonyme Funktionen als Rückruf (eine Funktion, die an einen anderen Methodenaufruf übergeben wird) verwenden und Sie nicht auf this zugreifen müssen, verwenden Sie eine Pfeilfunktion, um den Code kürzer und sauberer zu machen.

  Hier ist der empfohlene Weg:

  jsCopy to Clipboard

  const array1 = [1, 2, 3, 4];
  const sum = array1.reduce((a, b) => a + b);
  

  Stattdessen tun Sie dies:

  jsCopy to Clipboard

  const array1 = [1, 2, 3, 4];
  const sum = array1.reduce(function (a, b) {
    return a + b;
  });
  

• Verzichten Sie darauf, eine Pfeilfunktion einer Kennung zuzuweisen. Besonders verwenden Sie keine Pfeilfunktionen für Methoden. Verwenden Sie Funktionsdeklarationen mit dem Schlüsselwort function:

  jsCopy to Clipboard

  function x() {
    // …
  }
  

  Tun Sie nicht:

  jsCopy to Clipboard

  const x = () => {
    // …
  };
  

• Wenn Sie Pfeilfunktionen verwenden, nutzen Sie implizite Rückgaben (auch bekannt als expression body), wo möglich:

  jsCopy to Clipboard

  arr.map((e) => e.id);
  

  Und nicht:

  jsCopy to Clipboard

  arr.map((e) => {
    return e.id;
  });
  

Wenn Schleifen erforderlich sind, wählen Sie die entsprechende aus for(;;), for...of, while, etc.

• Vermeiden Sie bei der Iteration durch alle Sammlungsobjekte die klassische for (;;)-Schleife; bevorzugen Sie for...of oder forEach(). Beachten Sie, dass wenn Sie eine Sammlung verwenden, die kein Array ist, Sie überprüfen müssen, dass for...of tatsächlich unterstützt wird (es erfordert, dass die Variable iterierbar ist) oder dass die Methode forEach() tatsächlich vorhanden ist.

  Verwenden Sie for...of:

  jsCopy to Clipboard

  const dogs = ["Rex", "Lassie"];
  for (const dog of dogs) {
    console.log(dog);
  }
  

  Oder forEach():

  jsCopy to Clipboard

  const dogs = ["Rex", "Lassie"];
  dogs.forEach((dog) => {
    console.log(dog);
  });
  

  Verwenden Sie nicht for (;;) — nicht nur müssen Sie einen zusätzlichen Index, i, hinzufügen, sondern auch die Länge des Arrays im Auge behalten. Dies kann für Anfänger fehleranfällig sein.

  jsCopy to Clipboard

  const dogs = ["Rex", "Lassie"];
  for (let i = 0; i < dogs.length; i++) {
    console.log(dogs[i]);
  }
  

• Stellen Sie sicher, dass Sie den Initialisierer korrekt definieren, indem Sie das Schlüsselwort const für for...of oder let für die anderen Schleifen verwenden. Lassen Sie es nicht weg. Dies sind korrekte Beispiele:

  jsCopy to Clipboard

  const cats = ["Athena", "Luna"];
  for (const cat of cats) {
    console.log(cat);
  }
  
  for (let i = 0; i < 4; i++) {
    result += arr[i];
  }
  

  Das folgende Beispiel folgt nicht den empfohlenen Richtlinien für die Initialisierung (es erstellt implizit eine globale Variable und schlägt im strengen Modus fehl):

  jsCopy to Clipboard

  const cats = ["Athena", "Luna"];
  for (i of cats) {
    console.log(i);
  }
  

• Wenn Sie sowohl auf den Wert als auch den Index zugreifen müssen, können Sie .forEach() statt for (;;). Schreiben Sie:

  jsCopy to Clipboard

  const gerbils = ["Zoé", "Chloé"];
  gerbils.forEach((gerbil, i) => {
    console.log(`Gerbil #${i}: ${gerbil}`);
  });
  

  Schreiben Sie nicht:

  jsCopy to Clipboard

  const gerbils = ["Zoé", "Chloé"];
  for (let i = 0; i < gerbils.length; i++) {
    console.log(`Gerbil #${i}: ${gerbils[i]}`);
  }
  

Es gibt einen besonders zu beachtenden Fall bei der if...else-Kontrollanweisung. Wenn die if-Anweisung mit einem return endet, fügen Sie keine else-Anweisung hinzu.

Fahren Sie direkt nach der if-Anweisung fort. Schreiben Sie:

if (test) {
  // Perform something if test is true
  // …
  return;
}

// Perform something if test is false
// …

Schreiben Sie nicht:

if (test) {
  // Perform something if test is true
  // …
  return;
} else {
  // Perform something if test is false
  // …
}

Obwohl Kontrollflussanweisungen wie if, for und while die Verwendung von geschweiften Klammern nicht erfordern, wenn der Inhalt aus einer einzigen Anweisung besteht, sollten Sie immer geschweifte Klammern verwenden. Schreiben Sie:

for (const car of storedCars) {
  car.paint("red");
}

Schreiben Sie nicht:

for (const car of storedCars) car.paint("red");

Dies verhindert, dass beim Hinzufügen weiterer Anweisungen die Klammern vergessen werden.

Switch-Anweisungen können etwas knifflig sein.

• Fügen Sie keine break-Anweisung nach einer return-Anweisung in einem bestimmten Fall hinzu. Stattdessen schreiben Sie return-Anweisungen wie folgt:

  jsCopy to Clipboard

  switch (species) {
    case "chicken":
      return farm.shed;
    case "horse":
      return corral.entry;
    default:
      return "";
  }
  

  Wenn Sie eine break-Anweisung hinzufügen, wird sie unerreichbar sein. Schreiben Sie nicht:

  jsCopy to Clipboard

  switch (species) {
    case "chicken":
      return farm.shed;
      break;
    case "horse":
      return corral.entry;
      break;
    default:
      return "";
  }
  

• Verwenden Sie default als letzten Fall und beenden Sie ihn nicht mit einer break-Anweisung. Wenn Sie es anders machen müssen, fügen Sie einen Kommentar hinzu, der erklärt, warum.

• Denken Sie daran, dass wenn Sie eine lokale Variable für einen Fall deklarieren, Sie geschweifte Klammern nutzen müssen, um einen Geltungsbereich zu definieren:

  jsCopy to Clipboard

  switch (fruits) {
    case "Orange": {
      const slice = fruit.slice();
      eat(slice);
      break;
    }
    case "Apple": {
      const core = fruit.extractCore();
      recycle(core);
      break;
    }
  }
  

• Wenn bestimmte Zustände Ihres Programms unbehandelte Fehler auslösen, werden diese die Ausführung stoppen und die Nützlichkeit des Beispiels potenziell verringern. Daher sollten Sie Fehler mit einem try...catch-Block abfangen, wie unten gezeigt:

  jsCopy to Clipboard

  try {
    console.log(getResult());
  } catch (e) {
    console.error(e);
  }
  

• Wenn Sie den Parameter der catch-Anweisung nicht benötigen, lassen Sie ihn weg:

  jsCopy to Clipboard

  try {
    console.log(getResult());
  } catch {
    console.error("An error happened!");
  }
  

• Beim Definieren einer Klasse verwenden Sie PascalCase (beginnend mit einem Großbuchstaben) für den Klassennamen und camelCase (beginnend mit einem Kleinbuchstaben) für Objekt-Eigenschaften und Methodennamen.

• Bei der Definition einer Objektinstanz, entweder ein Literal oder über einen Konstruktor, verwenden Sie camelCase, beginnend mit einem Kleinbuchstaben, für den Instanznamen. Zum Beispiel:

  jsCopy to Clipboard

  const hanSolo = new Person("Han Solo", 25, "he/him");
  
  const luke = {
    name: "Luke Skywalker",
    age: 25,
    pronouns: "he/him",
  };
  

Für die Erstellung allgemeiner Objekte (d.h. wenn keine Klassen beteiligt sind) verwenden Sie Literale und keine Konstruktoren.

Zum Beispiel, tun Sie dies:

const object = {};

Erstellen Sie kein allgemeines Objekt so:

const object = new Object();

• Verwenden Sie die ES-Klassensyntax für Objekte, nicht alte Konstruktoren.

  Zum Beispiel ist dies der empfohlene Weg:

  jsCopy to Clipboard

  class Person {
    constructor(name, age, pronouns) {
      this.name = name;
      this.age = age;
      this.pronouns = pronouns;
    }
  
    greeting() {
      console.log(`Hi! I'm ${this.name}`);
    }
  }
  

• Verwenden Sie extends für Vererbung:

  jsCopy to Clipboard

  class Teacher extends Person {
    // …
  }
  

Zum Definieren von Methoden verwenden Sie die Methodendefinitionssyntax:

const obj = {
  foo() {
    // …
  },
  bar() {
    // …
  },
};

Stattdessen tun Sie dies:

const obj = {
  foo: function () {
    // …
  },
  bar: function () {
    // …
  },
};

• Die Methode Object.prototype.hasOwnProperty() wurde zugunsten von Object.hasOwn() veraltet.

• Wenn möglich, verwenden Sie die Verkürzung, um die Duplizierung der Eigenschaftenkennung zu vermeiden. Schreiben Sie:

  jsCopy to Clipboard

  function createObject(name, age) {
    return { name, age };
  }
  

  Schreiben Sie nicht:

  jsCopy to Clipboard

  function createObject(name, age) {
    return { name: name, age: age };
  }
  

Dieser Abschnitt listet unsere Empfehlungen auf, welche Operatoren verwendet werden sollen und wann.

Wenn Sie einem Literalwert basierend auf einer Bedingung einer Variablen zuweisen möchten, verwenden Sie einen Bedingungsoperator (ternär) anstelle einer if...else-Anweisung. Diese Regel gilt auch, wenn Sie einen Wert zurückgeben. Schreiben Sie:

const x = condition ? 1 : 2;

Schreiben Sie nicht:

let x;
if (condition) {
  x = 1;
} else {
  x = 2;
}

Der Bedingungsoperator ist hilfreich beim Erstellen von Zeichenfolgen zum Protokollieren von Informationen. In solchen Fällen führt die Verwendung einer regulären if...else-Anweisung zu langen Code-Blöcken für eine Nebenoperation wie das Protokollieren und verschleiert den zentralen Punkt des Beispiels.

Bevorzugen Sie den strikten Gleichheits- (dreifaches Gleichheitszeichen) und Ungleichheitsoperator gegenüber dem losen Gleichheits-(doppeltes Gleichheitszeichen) und Ungleichheitsoperator.

Verwenden Sie die strikten Gleichheits- und Ungleichheitsoperatoren so:

name === "Shilpa";
age !== 25;

Verwenden Sie nicht die losen Gleichheits- und Ungleichheitsoperatoren, wie unten gezeigt:

name == "Shilpa";
age != 25;

Wenn Sie == oder != verwenden müssen, denken Sie daran, dass == null der einzige akzeptable Fall ist. Da TypeScript bei allen anderen Fällen fehlschlägt, möchten wir sie nicht in unserem Beispielcode haben. Erwägen Sie, einen Kommentar hinzuzufügen, um zu erklären, warum Sie es benötigen.

Bevorzugen Sie Abkürzungen für boolesche Tests. Beispielsweise verwenden Sie if (x) und if (!x), nicht if (x === true) und if (x === false), es sei denn, verschiedenen Arten von truthy oder falsy Werten werden unterschiedlich behandelt.

Zeichenfolgenliterale können in einfache Anführungszeichen, wie in 'A string', oder in doppelte Anführungszeichen, wie in "A string", eingeschlossen werden. Machen Sie sich keine Sorgen darüber, welche Sie verwenden sollen; Prettier hält es konsistent.

Zum Einfügen von Werten in Zeichenfolgen verwenden Sie Vorlagenliterale.

• Hier ist ein Beispiel für die empfohlene Verwendung von Vorlagenliteralen. Ihre Verwendung verhindert viele Leerzeichenfehler.

  jsCopy to Clipboard

  const name = "Shilpa";
  console.log(`Hi! I'm ${name}!`);
  

  Verkettungszeichenfolgen nicht so wie folgt:

  jsCopy to Clipboard

  const name = "Shilpa";
  console.log("Hi! I'm" + name + "!"); // Hi! I'mShilpa!
  

• Verwenden Sie keine Vorlagenliterale übermäßig. Wenn keine Ersetzungen erforderlich sind, verwenden Sie stattdessen ein normales Zeichenfolgenliteral.

Gute Variablennamen sind entscheidend für das Verständnis von Code.

• Verwenden Sie kurze Kennungen und vermeiden Sie nicht-übliche Abkürzungen. Gute Variablennamen sind in der Regel 3 bis 10 Zeichen lang, aber nur als Hinweis. Zum Beispiel ist accelerometer beschreibender als die Abkürzung acclmtr um der Länge willen.

• Versuchen Sie, Beispiele aus der realen Welt zu verwenden, bei denen jede Variable eine klare Semantik hat. Greifen Sie nur auf Platzhalternamen wie foo und bar zurück, wenn das Beispiel einfach und konstruiert ist.

• Verwenden Sie nicht die ungarische Notation Namenskonvention. Präfixen Sie den Variablennamen nicht mit seinem Typ. Schreiben Sie zum Beispiel bought = car.buyer !== null anstelle von bBought = oCar.sBuyer != null oder name = "John Doe" anstelle von sName = "John Doe".

• Vermeiden Sie bei Sammlungen, den Typ wie Liste, Array, Warteschlange im Namen hinzuzufügen. Verwenden Sie den Inhaltsnamen in der Pluralform. Verwenden Sie zum Beispiel für ein Array von Autos cars und nicht carArray oder carList. Es kann Ausnahmen geben, wie zum Beispiel, wenn Sie die abstrakte Form einer Funktion ohne den Kontext einer konkreten Anwendung darstellen möchten.

• Verwenden Sie für primitive Werte camelCase, beginnend mit einem Kleinbuchstaben. Verwenden Sie nicht _. Verwenden Sie prägnante, verständliche und semantische Namen, wo es angebracht ist. Beispielsweise verwenden Sie currencyName anstelle von currency_name.

• Vermeiden Sie die Verwendung von Artikeln und Possessiven. Verwenden Sie zum Beispiel car anstelle von myCar oder aCar. Es kann Ausnahmen geben, wie zum Beispiel, wenn Sie eine Funktion im Allgemeinen ohne praktischen Kontext beschreiben.

• Verwenden Sie Variablennamen wie hier gezeigt:

  jsCopy to Clipboard

  const playerScore = 0;
  const speed = distance / time;
  

  Nennen Sie Variablen nicht so:

  jsCopy to Clipboard

  const thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0;
  const s = d / t;
  

Wenn Sie Variablen und Konstanten deklarieren, verwenden Sie die Schlüsselwörter let und const, nicht var. Die folgenden Beispiele zeigen, was auf MDN Web Docs empfohlen wird und was nicht:

• Wenn eine Variable nicht neu zugewiesen wird, bevorzugen Sie const, wie folgt:

  jsCopy to Clipboard

  const name = "Shilpa";
  console.log(name);
  

• Wenn Sie den Wert einer Variable ändern, verwenden Sie let wie unten gezeigt:

  jsCopy to Clipboard

  let age = 40;
  age++;
  console.log("Happy birthday!");
  

• Das folgende Beispiel verwendet let, wo es const sein sollte. Der Code wird funktionieren, aber wir möchten diese Nutzung in den Codebeispielen der MDN Web Docs vermeiden.

  jsCopy to Clipboard

  let name = "Shilpa";
  console.log(name);
  

• Das folgende Beispiel verwendet const für eine Variable, die neu zugewiesen wird. Die Neuzuweisung wird einen Fehler auslösen.

  jsCopy to Clipboard

  const age = 40;
  age++;
  console.log("Happy birthday!");
  

• Das folgende Beispiel verwendet var, was den globalen Bereich verschmutzt:

  jsCopy to Clipboard

  var age = 40;
  var name = "Shilpa";
  

• Deklarieren Sie eine Variable pro Zeile, wie folgt:

  jsCopy to Clipboard

  let var1;
  let var2;
  let var3 = "Apapou";
  let var4 = var3;
  

  Deklarieren Sie keine mehreren Variablen in einer Zeile, indem Sie sie mit Kommas trennen oder die Verkettung verwenden. Vermeiden Sie das Deklarieren von Variablen wie folgt:

  jsCopy to Clipboard

  let var1, var2;
  let var3 = var4 = "Apapou"; // var4 is implicitly created as a global variable; fails in strict mode
  

Vermeiden Sie implizite Typumwandlungen. Insbesondere vermeiden Sie +val, um einen Wert in eine Zahl zu zwingen, und "" + val, um ihn in eine Zeichenfolge zu zwingen. Verwenden Sie stattdessen Number() und String(), ohne new. Schreiben Sie:

class Person {
  #name;
  #birthYear;

  constructor(name, year) {
    this.#name = String(name);
    this.#birthYear = Number(year);
  }
}

Schreiben Sie nicht:

class Person {
  #name;
  #birthYear;

  constructor(name, year) {
    this.#name = "" + name;
    this.#birthYear = +year;
  }
}

Neben diesen JavaScript-Spracheigenschaften empfehlen wir einige Richtlinien im Zusammenhang mit Web-APIs, die zu beachten sind.

Wenn alle großen Browser (Chrome, Edge, Firefox und Safari) eine Funktion unterstützen, präfixen Sie die Funktion nicht. Schreiben Sie:

const context = new AudioContext();

Vermeiden Sie die zusätzliche Komplexität von Präfixen. Schreiben Sie nicht:

const AudioContext = window.AudioContext || window.webkitAudioContext;
const context = new AudioContext();

Die gleiche Regel gilt für CSS-Präfixe.

Wenn eine Methode, eine Eigenschaft oder eine ganze Schnittstelle veraltet ist, verwenden Sie sie nicht (außerhalb ihrer Dokumentation). Verwenden Sie stattdessen die moderne API.

Hier ist eine nicht erschöpfende Liste von Web-APIs, die zu vermeiden sind und womit sie ersetzt werden können:

• Verwenden Sie fetch() statt XHR (XMLHttpRequest).
• Verwenden Sie AudioWorklet statt ScriptProcessorNode, in der Web Audio API.

• Verwenden Sie Element.innerHTML nicht, um rein textuellen Inhalt in ein Element einzufügen; verwenden Sie stattdessen Node.textContent. Die Eigenschaft innerHTML führt zu Sicherheitsproblemen, wenn ein Entwickler den Parameter nicht kontrolliert. Je weniger wir als Autoren sie verwenden, desto weniger Sicherheitslücken entstehen, wenn ein Entwickler unseren Code kopiert und einfügt.

  Das folgende Beispiel zeigt die Verwendung von textContent.

  jsCopy to Clipboard

  const text = "Hello to all you good people";
  const para = document.createElement("p");
  para.textContent = text;
  

  Verwenden Sie innerHTML nicht, um reinen Text in DOM-Knoten einzufügen.

  jsCopy to Clipboard

  const text = "Hello to all you good people";
  const para = document.createElement("p");
  para.innerHTML = text;
  

• Die Funktion alert() ist unzuverlässig. Sie funktioniert nicht in Live-Beispielen auf MDN Web Docs, die sich innerhalb eines <iframe> befinden. Außerdem ist sie modal für das gesamte Fenster, was ärgerlich ist. In statischen Codebeispielen verwenden Sie console.log() oder console.error(). In Live-Beispielen vermeiden Sie console.log() und console.error(), da sie nicht angezeigt werden. Verwenden Sie ein dediziertes UI-Element.

• Wenn Sie eine Nachricht protokollieren, verwenden Sie console.log().
• Wenn Sie einen Fehler protokollieren, verwenden Sie console.error().

JavaScript-Sprachreferenz - Durchsuchen Sie unsere JavaScript-Referenzseiten, um einige gute, prägnante und bedeutungsvolle JavaScript-Snippets zu überprüfen.