Typzwang in JavaScript erklärt

In JavaScript erfordern Variablen keine spezifische Typdeklaration und können Werte jedes Datentyps enthalten. Als lose typisierte Sprache konvertiert JavaScript im Hintergrund automatisch Werte von einem Typ in einen anderen, um sicherzustellen, dass Ihr Code reibungslos läuft. Dieses Verhalten macht JavaScript zwar flexibler, kann aber auch zu unerwarteten Ergebnissen und schwer zu findenden Fehlern führen, wenn Sie mit der Funktionsweise nicht vertraut sind.

In diesem Beitrag erfahren Sie mehr über Typzwang in JavaScript und behandeln verschiedene Arten von Zwang, Beispiele und Best Practices, die Ihnen helfen, Ihren Code besser zu verstehen und zu steuern.

Lasst uns gleich loslegen!?

Was ist Typenzwang?

Typzwang bezieht sich auf die automatische oder manuelle Konvertierung eines Werts von einem Datentyp in einen anderen.

Zum Beispiel das Konvertieren einer Zeichenfolge wie „123“ in eine Zahl 123.

In JavaScript gibt es zwei Arten von Typzwang:

• Impliziter Zwang:Wenn JavaScript automatisch einen Wert konvertiert.
• Expliziter Zwang:Wenn Sie einen Wert absichtlich mithilfe integrierter Funktionen oder Operatoren konvertieren.

Bevor Sie sich mit den verschiedenen Arten von Zwang befassen, ist es wichtig, die wichtigsten Datentypen von JavaScript zu verstehen, da Zwang immer die Konvertierung zwischen ihnen beinhaltet.

Datentypen in JavaScript

1. Primitive Typen:
   • Zahl (z. B. 42, 3,14, NaN)
   • String (z. B. „hello“, „123“)
   • Boolescher Wert (z. B. wahr, falsch)
   • Undefiniert
   • Null
   • Symbol
   • BigInt (z. B. 123n)
2. Objekte:
   • Arrays, Funktionen, Objekte usw.

Erfahren Sie mehr über Datentypen.

Schauen wir uns nun die Arten von Typenzwang an.

Impliziter Typzwang

Implizite Typerzwingung tritt auf, wenn JavaScript den Typ eines Werts automatisch in einen anderen Typ konvertiert, um den Anforderungen einer Operation oder eines Ausdrucks zu entsprechen. Dieser Vorgang wird auch als Typkonvertierung bezeichnet.

Beispiele für impliziten Typzwang

Beispiel 1: String-Zwang mit Operator

Wenn Sie in JavaScript den Operator verwenden und einer der Werte eine Zeichenfolge ist, wandelt JavaScript den anderen Wert automatisch in eine Zeichenfolge um und kombiniert sie. Dieser Vorgang wird als String-Zwang bezeichnet.

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

Beispiel 2: Numerischer Zwang mit arithmetischen Operatoren

Wenn Sie arithmetische Operatoren wie -, *, / oder % verwenden, funktionieren sie mit Zahlen. Wenn Sie ihnen etwas anderes geben, das keine Zahl ist (z. B. eine Zeichenfolge), wandelt JavaScript es automatisch in eine Zahl um, bevor der Vorgang ausgeführt wird. Dies nennt man numerischen Zwang.

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

Beispiel 3: Zwang in Konditionalen

Wenn in JavaScript ein Wert in einer Bedingung verwendet wird (z. B. in einer if- oder while-Anweisung), wird er automatisch in einen booleschen Wert (wahr oder falsch) konvertiert.

• Wahrheitswerte: Alles, was nicht 0, NaN, null, undefiniert, falsch oder eine leere Zeichenfolge ("") ist, gilt als wahr.
• Falsche Werte: 0, NaN, null, undefiniert, falsch und eine leere Zeichenfolge ("") werden als falsch betrachtet.

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

Beispiel 4: Lockere Gleichheit (==) und Zwang

Der lose Gleichheitsoperator (==) vergleicht zwei Werte, indem er sie in denselben Typ umwandelt, wenn sie unterschiedlich sind. Mit anderen Worten: Es wird versucht, die Werte übereinstimmen zu lassen, indem einer oder beide Werte vor dem Vergleich geändert werden.

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

Expliziter Typzwang

Explizite Typerzwingung tritt auf, wenn Sie einen Wert absichtlich von einem Typ in einen anderen konvertieren, indem Sie integrierte Funktionen oder Operatoren verwenden.

Gängige Methoden für expliziten Zwang

In String konvertieren

• Verwenden von String():

if ("Hello") { 
  console.log("This is truthy!"); // This will run because "Hello" is truthy 
}

if (27) { 
  console.log("This is also truthy!"); // This will run because 27 is truthy 
}

if (0) { 
  console.log("This won't run"); // This will not run because 0 is falsy 
}

if (null) { 
  console.log("This won't run either"); // This will not run because null is falsy 
}

if (!0) { 
  console.log("This will run"); // This will run because !0 is true (0 coerced to false, then negated) 
}

• Verwenden von .toString():

console.log(5 == "5"); 
// Output: true (string "5" coerced to number 5)

console.log(null == undefined); 
// Output: true (both are considered "empty")

• Verkettung mit einer leeren Zeichenfolge:

  console.log(String(37)); 
  // Output: "37"

In Zahl umwandeln

• Number() verwenden:

  console.log((37).toString()); 
  // Output: "37"

• Unär verwenden: Dies wird verwendet, um einen Wert in eine Zahl umzuwandeln.

  console.log(37 + ""); 
  // Output: "37"

• Unär verwenden: Dies wird verwendet, um einen Wert in eine Zahl umzuwandeln und ihn zu negieren.

  console.log(Number("37")); 
  // Output: 37

• Verwendung von parseInt() oder parseFloat():

  // If the value is a string that can be converted to a number, it returns the number representation.
  console.log(+"37"); 
  // Output: 37

  // If the value is a boolean, true becomes 1 and false becomes 0.
  console.log(+true);   // Output: 1 (true becomes 1)
  console.log(+false);  // Output: 0 (false becomes 0)

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(+undefined);  // Output: NaN (undefined cannot be converted)
  console.log(+null);       // output: 0 (null is converted to 0)
  console.log(+{});         // Output: NaN (object cannot be converted)

Konvertierung in Boolesche Werte

• Boolean() verwenden:

  // If the value is a number, it simply negates the number.
  console.log(-3);  // Output: -3 (negates the number)

  // If the value is a string that can be converted to a number, it first converts it and then negates it.
  console.log(-"37"); // Output: -37 (string "37" is converted to number and negated)

  // If the value is a boolean, true becomes -1 and false becomes -0.
  console.log(-true);   // Output: -1
  console.log(-false);  // Output: -0 

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(-undefined);  // Output: NaN (undefined cannot be converted)
  console.log(-null);       // Output: -0 (null is converted to 0 and negated to -0)
  console.log(-{});         // Output: NaN (object cannot be converted)

• Verwenden der doppelten Negation (!!): Die doppelte Negation ist eine schnelle Möglichkeit, jeden Wert in einen booleschen Wert umzuwandeln. Es funktioniert, indem zunächst der Wert negiert wird (mit dem einzelnen !-Operator), der den Wert in einen booleschen Wert (wahr oder falsch) umwandelt, und ihn dann erneut negiert, um den ursprünglichen booleschen Wert zu erhalten.

  // parseInt(): Converts a string to an integer.
  console.log(parseInt("123.45")); 
  // Output: 123

  // parseFloat(): Converts a string to a floating-point number.
  console.log(parseFloat("123.45")); 
  // Output: 123.45

Warum kann impliziter Zwang Probleme verursachen?

Impliziter Typzwang kann den Code verwirrend machen, insbesondere für Anfänger oder beim Überprüfen von altem Code. Da Zwang automatisch geschieht, kann es schwierig sein, die ursprüngliche Absicht zu erkennen.

Lassen Sie uns dies anhand einiger Beispiele verstehen:

Unerwartete Ergebnisse:

Impliziter Zwang kann zu unerwarteten Ergebnissen führen, insbesondere wenn mit unterschiedlichen Datentypen gearbeitet wird. Dadurch ist es schwierig vorherzusagen, wie sich bestimmte Ausdrücke verhalten werden.

Zum Beispiel:

  console.log(Boolean(0)); 
  // Output: false

  console.log(Boolean(1)); 
  // Output: true

  console.log(Boolean(""));  
  // Output: false (empty string is falsy)

Im obigen Beispiel führt der erste Ausdruck aufgrund des Operators eine Zeichenfolgenverkettung durch, der zweite Ausdruck führt jedoch eine numerische Subtraktion durch, weil - eine Konvertierung zu einer Zahl auslöst.

Datentypen mischen:

Wenn Sie Datentypen in Vorgängen mischen, kann dies zu unerwarteten Ergebnissen oder Fehlern führen, insbesondere wenn Sie einen Typ erwarten, aber einen anderen erhalten.

Zum Beispiel:

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

Schwieriges Debuggen:

Es kann schwierig sein herauszufinden, wo die unerwartete Konvertierung stattfindet, was das Debuggen von Fehlern erschwert.

Zum Beispiel:

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

Falsche Werte und Typvergleiche:

JavaScript hat mehrere falsche Werte wie 0, „“, null, undefiniert, NaN, false. Wenn diese Werte in Vergleichen oder logischen Operationen verwendet werden, kann die implizite Typkonvertierung zu Verwirrung führen. Wenn Sie nicht verstehen, wie JavaScript diese Werte interpretiert, kann es zu unerwarteten Fehlern kommen.

Zum Beispiel:

if ("Hello") { 
  console.log("This is truthy!"); // This will run because "Hello" is truthy 
}

if (27) { 
  console.log("This is also truthy!"); // This will run because 27 is truthy 
}

if (0) { 
  console.log("This won't run"); // This will not run because 0 is falsy 
}

if (null) { 
  console.log("This won't run either"); // This will not run because null is falsy 
}

if (!0) { 
  console.log("This will run"); // This will run because !0 is true (0 coerced to false, then negated) 
}

Wie vermeidet man Typ-Zwangs-Probleme?

Hier sind einige Best Practices, die Ihnen helfen, die durch impliziten Typzwang verursachten Probleme zu vermeiden:

Verwenden Sie strikte Gleichheit (===):

Bevorzugen Sie === gegenüber ==, um unerwarteten Typzwang bei Vergleichen zu vermeiden.

console.log(5 == "5"); 
// Output: true (string "5" coerced to number 5)

console.log(null == undefined); 
// Output: true (both are considered "empty")

Seien Sie beim Konvertieren von Typen explizit:

Verwenden Sie explizite Typkonvertierungsmethoden, um die gewünschte Typänderung klar anzugeben.

  console.log(String(37)); 
  // Output: "37"

Vermeiden Sie das Mischen von Typen im Betrieb:

Schreiben Sie Code, der nicht auf implizitem Zwang beruht, indem Sie sicherstellen, dass Operanden vom gleichen Typ sind.

  console.log((37).toString()); 
  // Output: "37"

Eingaben validieren:

Wenn Sie Benutzereingaben oder Daten von einer API erhalten, stellen Sie sicher, dass Sie diese überprüfen und in den richtigen Typ konvertieren, z. B. Zahlen oder Zeichenfolgen.

  console.log(37 + ""); 
  // Output: "37"

Kennen Sie das Verhalten von Arrays und Objekten:

Arrays und Objekte verhalten sich unterschiedlich, wenn sie in Strings umgewandelt werden.

• Arrays: Wenn JavaScript in einen String umgewandelt wird, wandelt es ein Array in einen String um, dessen Elemente durch Kommas verbunden sind. Zum Beispiel:

  console.log(Number("37")); 
  // Output: 37

• Objekte: Wenn ein Objekt in einen String umgewandelt wird, gibt es standardmäßig „[object Object]“ zurück, es sei denn, das Objekt verfügt über eine benutzerdefinierte toString()-Methode. Zum Beispiel:

  // If the value is a string that can be converted to a number, it returns the number representation.
  console.log(+"37"); 
  // Output: 37

  // If the value is a boolean, true becomes 1 and false becomes 0.
  console.log(+true);   // Output: 1 (true becomes 1)
  console.log(+false);  // Output: 0 (false becomes 0)

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(+undefined);  // Output: NaN (undefined cannot be converted)
  console.log(+null);       // output: 0 (null is converted to 0)
  console.log(+{});         // Output: NaN (object cannot be converted)

Abschluss

Impliziter Zwang in JavaScript kann hilfreich sein, aber auch zu unerwartetem Verhalten führen, Fehler verursachen und die Wartung des Codes erschweren. Um diese Probleme zu vermeiden, verwenden Sie strikte Gleichheit, konvertieren Sie explizit Typen und validieren Sie Eingaben. Auf diese Weise können Sie saubereren, zuverlässigeren und einfacher zu wartenden JavaScript-Code schreiben.

Das ist alles für heute.

Ich hoffe, es war hilfreich.

Danke fürs Lesen.

Für weitere Inhalte wie diesen klicken Sie hier.

Folgen Sie mir auf X (Twitter), um tägliche Tipps zur Webentwicklung zu erhalten.

Schauen Sie sich toast.log an, eine Browsererweiterung, mit der Sie Fehler, Warnungen und Protokolle sehen können, sobald sie auf Ihrer Website auftreten – ohne die Konsole des Browsers öffnen zu müssen. Klicken Sie hier, um 25 % Rabatt auf toast.log zu erhalten.

Codieren Sie weiter!!

Das obige ist der detaillierte Inhalt vonTypzwang in JavaScript erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!