Richtlinien für das Schreiben von JavaScript-Codebeispielen

Dieser Abschnitt erklärt die allgemeinen Richtlinien, die beim Schreiben von JavaScript-Codebeispielen zu beachten sind. Die späteren Abschnitte werden spezifischere Details behandeln.

Meinungen über korrekte Einrückungen, Leerzeichen und Zeilenlängen waren schon immer umstritten. Diskussionen zu diesen Themen lenken von der Erstellung und Pflege von Inhalten ab.

Bei MDN Web Docs verwenden wir Prettier als Code-Formatter, um den Code-Stil konsistent zu halten (und um themenfremde Diskussionen zu vermeiden). Sie können unsere Konfigurationsdatei einsehen, um die aktuellen Regeln kennenzulernen, und die Prettier-Dokumentation lesen.

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

Sie können neue Funktionen verwenden, sobald alle großen Browser – Chrome, Edge, Firefox und Safari – sie unterstützen (auch bekannt als Baseline).

Diese Regel gilt nicht für die JavaScript-Funktion, die auf der Seite dokumentiert wird (die stattdessen von den Aufnahmekriterien bestimmt wird). Zum Beispiel können Sie nicht standardmäßige oder experimentelle Funktionen dokumentieren und vollständige Beispiele schreiben, die ihr Verhalten demonstrieren, aber Sie sollten davon absehen, diese Funktionen in Demos für andere nicht verwandte Funktionen, wie eine Web-API, zu verwenden.

Verwenden Sie bei der Erstellung von Arrays Literale und keine Konstruktoren.

Erstellen Sie Arrays so:

const visitedCities = [];

Tun Sie dies nicht bei der Erstellung von Arrays:

const visitedCities = new Array(length);

Wenn Sie Elemente zu einem Array hinzufügen, verwenden Sie push() und nicht die direkte Zuweisung. Betrachten Sie das folgende Array:

const pets = [];

Fügen Sie Elemente so hinzu:

pets.push("cat");

Fügen Sie 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 einfachere async/await Syntax. Leider können Sie await nicht auf der obersten Ebene verwenden, es sei denn, Sie sind 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 Top-Level.

Kommentare sind entscheidend für das Schreiben guter Codebeispiele. Sie verdeutlichen 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:

  js

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

  Andernfalls ist das Wiedergeben des Codes in Prosa keine gute Nutzung von Kommentaren:

  js

  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 explizite Namen haben, die beschreiben, was sie tun. Schreiben Sie:

  js

  closeConnection();
  

  Schreiben Sie nicht:

  js

  closeConnection(); // Closing the connection
  

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

Im Allgemeinen verwenden Sie einzeilige Kommentare, um Code zu kommentieren. Autoren müssen jede Zeile des Kommentars mit // markieren, damit es einfacher ist, auskommentierten Code visuell zu erkennen. Zusätzlich ermöglicht diese Konvention, Abschnitte des Codes mit /* … */ während des Debuggens auszukommentieren.

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

  js

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

• Falls ein Kommentar nicht unmittelbar nach einer neuen Einrückungsebene beginnt, fügen Sie eine Leerzeile hinzu und dann den Kommentar. Dadurch wird ein Codeblock erzeugt, der deutlich macht, worauf sich der Kommentar bezieht. Außerdem sollten Sie Ihre Kommentare auf separaten Zeilen vor dem Code, auf den sie sich beziehen, platzieren. Dies wird im folgenden Beispiel gezeigt:

  js

  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);
  }
  

• In Code, der in einer Produktionsumgebung ausgeführt werden soll, müssen Sie selten kommentieren, wenn Sie einige Daten protokollieren. In Codebeispielen verwenden wir oft console.log(), console.error() oder ähnliche Funktionen, um wichtige Werte auszugeben. Um dem Leser zu helfen, zu verstehen, was geschehen wird, ohne den Code auszuführen, können Sie einen Kommentar nach der Funktion mit dem erzeugten Log setzen. Schreiben Sie:

  js

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

  Schreiben Sie nicht:

  js

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

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

  js

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

Kurze Kommentare sind normalerweise besser, daher versuchen Sie, sie in einer Zeile von 60–80 Zeichen zu halten. Falls 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 von redundantem Code mit Ellipsen (…) ist notwendig, um Beispiele kurz zu halten. Dennoch sollten Autoren dies bedacht tun, da Entwickler häufig Beispiele kopieren und in ihren Code einfügen, und alle unsere Codebeispiele sollten gültiges JavaScript sein.

In JavaScript sollten Sie die Ellipsen (…) in einen Kommentar setzen. Wo möglich, geben Sie an, welche Aktion jemand, der diesen Schnipsel wiederverwendet, hinzufügen soll.

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 Ellipsen (…) nicht wie folgt:

function exampleFunc() {
  …
}

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

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

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

Verwenden Sie für Funktionsnamen camel case und beginnen Sie mit einem Kleinbuchstaben. Verwenden Sie prägnante, menschenlesbare und semantische Namen, wo es angemessen ist.

Das folgende Beispiel zeigt einen korrekten Funktionsnamen:

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

Verwenden Sie keine Funktionsnamen wie diese:

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

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

• Verwenden Sie nach Möglichkeit die Funktionsdeklaration gegenüber Funktionsausdrücken, um Funktionen zu definieren.

  Hier ist die empfohlene Art, eine Funktion zu deklarieren:

  js

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

  Dies ist keine gute Möglichkeit, eine Funktion zu definieren:

  js

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

• Bei der Verwendung anonymer Funktionen als Callback (eine Funktion, die einer anderen Methode übergeben wird), verwenden Sie eine Pfeilfunktion, wenn Sie this nicht benötigen, um den Code kürzer und sauberer zu gestalten.

  Hier ist die empfohlene Weise:

  js

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

  Anstatt dies:

  js

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

• Vermeiden Sie es, eine Pfeilfunktion zu verwenden, um eine Funktion einem Identifikator zuzuweisen. Verwenden Sie insbesondere keine Pfeilfunktionen für Methoden. Verwenden Sie Funktionsdeklarationen mit dem Schlüsselwort function:

  js

  function x() {
    // …
  }
  

  Tun Sie nicht:

  js

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

• Bei der Verwendung von Pfeilfunktionen verwenden Sie den impliziten Rückgabewert (auch bekannt als Expression-Body), wann immer möglich:

  js

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

  Und nicht:

  js

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

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

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

  Verwenden Sie for...of:

  js

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

  Oder forEach():

  js

  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 verfolgen. Dies kann für Anfänger fehleranfällig sein.

  js

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

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

  js

  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 entspricht nicht den empfohlenen Richtlinien für die Initialisierung (es erstellt implizit eine globale Variable und wird im strict mode fehlschlagen):

  js

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

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

  js

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

  Schreiben Sie nicht:

  js

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

Es gibt einen bemerkenswerten Fall, den Sie bei den Kontrollstrukturen if...else beachten sollten. 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 keine Klammern erfordern, wenn der Inhalt aus einer einzelnen Anweisung besteht, sollten Sie immer 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 Klammern vergessen werden, wenn weitere Anweisungen hinzugefügt werden.

Switch-Anweisungen können ein wenig knifflig sein.

• Fügen Sie keinen break-Befehl nach einer return-Anweisung in einem spezifischen Fall hinzu. Schreiben Sie stattdessen return-Anweisungen so:

  js

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

  Wenn Sie einen break-Befehl hinzufügen, wird dieser nicht erreichbar sein. Schreiben Sie nicht:

  js

  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 Sie, wenn Sie eine lokale Variable für einen Fall deklarieren, Klammern verwenden müssen, um einen Gültigkeitsbereich zu definieren:

  js

  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 nicht abgefangene Fehler werfen, unterbrechen sie die Ausführung und verringern potenziell den Nutzen des Beispiels. Sie sollten daher Fehler mit einem try...catch Block abfangen, wie unten gezeigt:

  js

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

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

  js

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

• Verwenden Sie bei der Definition einer Klasse PascalCase (beginnend mit einem Großbuchstaben) für den Klassennamen und camelCase (beginnend mit einem Kleinbuchstaben) für die Objekteigenschafts- und Methodennamen.

• Verwenden Sie bei der Definition einer Objektinstanz, sei es als Literal oder über einen Konstruktor, camelCase, beginnend mit einem Kleinbuchstaben, für den Instanznamen. Zum Beispiel:

  js

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

Verwenden Sie bei der Erstellung allgemeiner Objekte (d.h. wenn keine Klassen beteiligt sind) Literale und keine Konstruktoren.

Zum Beispiel so:

const object = {};

Erstellen Sie kein allgemeines Objekt wie folgt:

const object = new Object();

• Verwenden Sie die ES-Klassensyntax für Objekte, keine alten Konstruktoren.

  Zum Beispiel, hier ist der empfohlene Weg:

  js

  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 die Vererbung:

  js

  class Teacher extends Person {
    // …
  }
  

Verwenden Sie zur Definition von Methoden die Methodendefinitionssyntax:

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

Anstatt:

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

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

• Wann immer möglich, verwenden Sie die Kurzform, um die Duplizierung des Eigenschaftsidentifikators zu vermeiden. Schreiben Sie:

  js

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

  Schreiben Sie nicht:

  js

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

Dieser Abschnitt listet unsere Empfehlungen zu welchen Operatoren und wann diese zu verwenden sind.

Wenn Sie einem Variablenliteral abhängig von einer Bedingung einen Wert zuweisen möchten, verwenden Sie einen Bedingungsoperator (ternärer Operator) anstelle einer if...else-Anweisung. Diese Regel gilt auch, wenn ein Wert zurückgegeben wird. Schreiben Sie:

const x = condition ? 1 : 2;

Schreiben Sie nicht:

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

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

Bevorzugen Sie die strikte Gleichheit (dreifach gleich) und Ungleichheitsoperatoren gegenüber den losen Gleichheits- (doppelt gleich) und Ungleichheitsoperatoren.

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 in allen anderen Fällen fehlschlägt, möchten wir sie nicht in unseren Beispielcode aufnehmen. Fügen Sie in Erwägung, einen Kommentar hinzuzufügen, um zu erklären, warum Sie es brauchen.

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

Stringliterale können innerhalb von einfachen Anführungszeichen, wie in 'A string', oder innerhalb von doppelten Anführungszeichen, wie in "A string", eingeschlossen werden. Machen Sie sich keine Sorgen darüber, welches verwendet wird; Prettier hält es konsistent.

Zum Einfügen von Werten in Strings verwenden Sie Template-Literale.

• Hier ist ein Beispiel für die empfohlene Verwendung von Template-Literalen. Ihre Verwendung verhindert viele Abstandsfehler.

  js

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

  Verbinden Sie keine Strings so:

  js

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

• Überbeanspruchen Sie keine Template-Literale. Wenn es keine Substitutionen gibt, verwenden Sie stattdessen ein normales Stringliteral.

Gute Variablennamen sind entscheidend, um Code verständlich zu machen.

• Verwenden Sie kurze Bezeichner und vermeiden Sie nicht gebräuchliche Abkürzungen. Gute Variablennamen sind normalerweise zwischen 3 bis 10 Zeichen lang, aber nur als Hinweis. Zum Beispiel ist accelerometer beschreibender als die Abkürzung acclmtr der Zeichenlänge wegen.

• Versuchen Sie, realitätsbezogene Beispiele zu verwenden, in denen jede Variable klare Semantik hat. Verwenden Sie nur Platzhalternamen wie foo und bar, wenn das Beispiel einfach und banal ist.

• Verwenden Sie nicht die Ungarische Notation Namenskonvention. Präfixieren Sie den Variablennamen nicht mit seinem Typ. Zum Beispiel schreiben Sie bought = car.buyer !== null statt bBought = oCar.sBuyer != null oder name = "Maria Sanchez" statt sName = "Maria Sanchez".

• Für Sammlungen vermeiden Sie es, den Typ wie Liste, Array, Queue im Namen hinzuzufügen. Verwenden Sie den Inhaltsnamen in Pluralform. Zum Beispiel für ein Array von Autos verwenden Sie cars statt carArray oder carList. Es kann Ausnahmen geben, wie wenn Sie die abstrakte Form einer Funktion ohne den Kontext einer bestimmten Anwendung zeigen möchten.

• Für primitive Werte verwenden Sie camelCase, beginnend mit einem Kleinbuchstaben. Verwenden Sie nicht _. Verwenden Sie prägnante, menschenlesbare und semantische Namen, wo es angemessen ist. Zum Beispiel verwenden Sie currencyName anstelle von currency_name.

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

• Verwenden Sie Variablennamen wie hier gezeigt:

  js

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

  Benennen Sie Variablen nicht so:

  js

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

Verwenden Sie beim Deklarieren von Variablen und Konstanten die Schlüsselwörter let und const, nicht var. Die folgenden Beispiele zeigen, was auf den MDN Web Docs empfohlen wird und was nicht:

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

  js

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

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

  js

  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 Verwendung in MDN Web Docs-Codebeispielen vermeiden.

  js

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

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

  js

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

• Das folgende Beispiel verwendet var, wodurch der globale Bereich verunreinigt wird:

  js

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

• Deklarieren Sie eine Variable pro Zeile, wie folgt:

  js

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

  Deklarieren Sie keine mehreren Variablen in einer Zeile, getrennt durch Kommata oder Kettendeklaration. Vermeiden Sie es, Variablen so zu deklarieren:

  js

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

Vermeiden Sie implizite Typkonvertierungen. Insbesondere vermeiden Sie +val, um einen Wert in eine Zahl zu zwingen und "" + val, um ihn in eine Zeichenfolge zu zwingen. Verwenden Sie Number() und String(), ohne new, stattdessen. 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;
  }
}

Zusätzlich zu diesen JavaScript-Sprachfunktionen empfehlen wir einige Richtlinien in Bezug auf Web-APIs, die Sie beachten sollten.

Wenn alle großen Browser (Chrome, Edge, Firefox und Safari) eine Funktion unterstützen, präfixieren 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 abschließende Liste von Web-APIs, die Sie meiden sollten, und was Sie stattdessen verwenden können:

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

• Verwenden Sie nicht Element.innerHTML, um ausschließlich 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 mehr wir als Autoren es vermeiden, es zu verwenden, desto weniger Sicherheitslücken entstehen, wenn ein Entwickler unseren Code kopiert und einfügt.

  Das Beispiel unten zeigt die Verwendung von textContent.

  js

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

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

  js

  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. Darüber hinaus ist es modal zum gesamten Fenster, was störend sein kann. 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, bedeutungsvolle JavaScript-Snippets anzusehen.