Wie man Zeichenketten in Zahlen in JavaScript umwandelt: Number(), parseInt(), parseFloat() und bewährte Methoden

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

JavaScript ist eine der am weitesten verbreiteten Programmiersprachen in der Webentwicklung. Unter seinen vielen Funktionen ist das Umwandeln von Zeichenketten in Zahlen eine grundlegende Operation, die in realen Anwendungen häufig benötigt wird.

Beispielsweise werden Werte, die Benutzer in Formularen eingeben, oder Daten, die von APIs abgerufen werden, oft als Zeichenketten behandelt. Diese Werte können nicht direkt für Berechnungen oder Vergleiche verwendet werden, solange sie nicht in numerische Typen konvertiert wurden.

In diesem Artikel erklären wir konkrete Methoden zum Konvertieren von Zeichenketten in Zahlen in JavaScript. Wir behandeln, wie jede Funktion und Technik funktioniert, ihre Unterschiede und wichtige Punkte, die zu beachten sind. Nutzen Sie diesen Leitfaden als praktische Referenz.

2. Überblick über Datentypen in JavaScript

JavaScript ist als dynamisch typisierte Sprache bekannt, das heißt, der Typ einer Variablen wird automatisch während der Programmausführung bestimmt. Während dies Flexibilität bietet, kann es auch zu Fehlern oder unerwartetem Verhalten führen, wenn Typumwandlungen nicht sorgfältig gehandhabt werden.

Hauptdatentypen

JavaScript‑Datentypen lassen sich grob in die folgenden beiden Kategorien einteilen.

1. Primitive Typen

• Number: Repräsentiert Ganzzahlen und Fließkommazahlen.
• String: Repräsentiert Textdaten.
• Boolean: Hat nur den Wert true oder false.
• Undefined: Zeigt an, dass noch kein Wert zugewiesen wurde.
• Null: Stellt explizit das Fehlen eines Wertes dar.
• Symbol: Wird als eindeutiger Bezeichner verwendet.

1. Objekttypen

• Umfasst Arrays (Array), Funktionen (Function), Datumsobjekte (Date) und mehr.

Dynamische Typisierung und Fallstricke bei Typumwandlungen

In JavaScript können Variablentypen implizit oder explizit konvertiert werden. Besonders bei Zeichenketten und Zahlen ist besondere Vorsicht geboten.

Beispiel:

console.log("10" + 5); // Output: "105" (string concatenation)
console.log("10" - 5); // Output: 5 (numeric calculation)

Wie oben gezeigt, kann derselbe Operator je nach Kontext unterschiedlich reagieren. Explizite Typumwandlung ist entscheidend, um unbeabsichtigte Ergebnisse zu vermeiden.

3. Methoden zum Konvertieren von Zeichenketten in Zahlen

JavaScript bietet mehrere Möglichkeiten, Zeichenketten in Zahlen zu konvertieren. Dieser Abschnitt erklärt vier häufig genutzte Methoden im Detail.

Die Number()-Funktion

Die Number()‑Funktion ist die grundlegendste Methode, um eine Zeichenkette in eine Zahl zu konvertieren.

Beispiele:

console.log(Number("42"));    // Output: 42
console.log(Number("3.14"));  // Output: 3.14
console.log(Number(""));      // Output: 0 (empty string becomes 0)
console.log(Number("abc"));   // Output: NaN (returns NaN if conversion fails)

Eigenschaften:

• Konvertiert sowohl Ganzzahlen als auch Fließkommazahlen.
• Eine leere Zeichenkette wird zu 0 konvertiert.
• Gibt NaN (Not-a-Number) zurück, wenn die Konvertierung fehlschlägt.

Wichtiger Hinweis:
NaN ist ein spezieller numerischer Wert, der nicht in Berechnungen verwendet werden kann. Eine unbeabsichtigte Verwendung kann zu unerwartetem Verhalten führen.

Die parseInt()-Funktion

Die parseInt()‑Funktion konvertiert eine Zeichenkette in eine Ganzzahl. Sie liest die Zeichenkette von Anfang an und stoppt beim ersten nicht‑numerischen Zeichen.

Beispiele:

console.log(parseInt("42"));         // Output: 42
console.log(parseInt("42.99"));      // Output: 42 (decimal part is ignored)
console.log(parseInt("10abc"));      // Output: 10
console.log(parseInt("abc10"));      // Output: NaN

Angabe der Basis (Radix):

console.log(parseInt("10", 2)); // Output: 2 (binary)
console.log(parseInt("A", 16)); // Output: 10 (hexadecimal)

Eigenschaften:

• Nützlich, wenn nur der ganzzahlige Teil benötigt wird.
• Unterstützt die Konvertierung aus verschiedenen Zahlensystemen.

Vorsicht:
Wird die Basis weggelassen, kann das Ergebnis vom Format der Zeichenkette abhängen und zu unerwarteten Resultaten führen.

Die parseFloat()-Funktion

Die parseFloat()‑Funktion konvertiert eine Zeichenkette in eine Fließkommazahl.

Beispiele:

console.log(parseFloat("3.14"));     // Output: 3.14
console.log(parseFloat("3.14abc"));  // Output: 3.14
console.log(parseFloat("abc3.14"));  // Output: NaN

Merkmale:

• Ideal für die Handhabung von Dezimalwerten.
• Funktioniert auch korrekt für Ganzzahlen.

Vorsicht:

• Wie parseInt() ignoriert es Zeichen nach dem numerischen Teil.

Der Unäre Plus-Operator (+)

Der unäre Plus-Operator (+) bietet eine kurze und einfache Möglichkeit, Typkonvertierung durchzuführen.

Beispiele:

console.log(+"42");      // Output: 42
console.log(+"3.14");    // Output: 3.14
console.log(+"abc");     // Output: NaN

Merkmale:

• Erzeugt knappen Code.
• Verhält sich wie Number() .

Vorsicht:
Während es knapp ist, kann dieser Ansatz die Lesbarkeit verringern. Für anfängerfreundliche oder Team‑Codebasen ist Number() oft klarer.

Zusammenfassung

Der nächste Abschnitt erklärt die Unterschiede zwischen diesen Methoden und wie man die richtige auswählt.

4. Unterschiede zwischen Konvertierungsmethoden und wie man sie auswählt

JavaScript bietet mehrere Möglichkeiten, Zeichenketten in Zahlen zu konvertieren, jede mit unterschiedlichem Verhalten. Das Verständnis dieser Unterschiede ist entscheidend, um die richtige Methode auszuwählen.

Number() vs parseInt()

Number() bewertet die gesamte Zeichenkette als numerischen Wert, während parseInt() nur den ganzzahligen Teil extrahiert.

Beispiel:

console.log(Number("42.5"));     // Output: 42.5
console.log(parseInt("42.5"));  // Output: 42

Verwendungsrichtlinien:

• Verwende Number(), wenn präzise numerische Werte erforderlich sind.
• Verwende parseInt(), wenn Dezimalstellen ignoriert werden sollen.

parseInt() vs parseFloat()

parseInt() ist auf Ganzzahlen beschränkt, während parseFloat() Dezimalwerte verarbeitet.

Beispiel:

console.log(parseInt("42.75"));     // Output: 42
console.log(parseFloat("42.75"));  // Output: 42.75

Verwendungsrichtlinien:

• Verwende parseInt() für ganze Zahlen wie Alter oder IDs.
• Verwende parseFloat() für Preise oder Messwerte.

Number() vs Unärer Plus (+)

Sowohl Number() als auch der unäre Plus-Operator verhalten sich ähnlich, aber die Lesbarkeit unterscheidet sich.

Beispiel:

console.log(Number("42"));  // Output: 42
console.log(+"42");         // Output: 42

Verwendungsrichtlinien:

• Number() drückt die Absicht klar aus und wird für Teamprojekte empfohlen.
• Der unäre Plus-Operator ist nützlich, wenn Kürze bevorzugt wird.

Umgang mit Sonderfällen

Leere Zeichenketten und ungültige Werte

Beispiel:

console.log(Number(""));           // Output: 0
console.log(parseInt(""));         // Output: NaN
console.log(+"");                  // Output: 0
console.log(Number("abc"));        // Output: NaN
console.log(parseFloat("abc123")); // Output: NaN

Wichtige Punkte:

• Verwende Number() oder unäres +, wenn leere Zeichenketten zu 0 werden sollen.
• Sei vorsichtig mit parseInt() und parseFloat(), da eine partielle Analyse auftreten kann.

Zusammenfassung

5. Fehlerbehandlung bei der Konvertierung

Eine ordnungsgemäße Fehlerbehandlung ist beim Konvertieren von Zeichenketten in Zahlen unerlässlich, insbesondere bei Benutzereingaben oder externen Daten.

Umgang mit NaN (Not-a-Number)

Wenn die Konvertierung fehlschlägt, gibt JavaScript NaN zurück, das technisch ein Zahlentyp ist, aber nicht in Berechnungen verwendet werden kann.

Beispiel:

console.log(Number("abc"));      // Output: NaN
console.log(parseInt("xyz"));    // Output: NaN
console.log(+"test");            // Output: NaN

Wichtige Punkte:

• Jede Berechnung, die NaN beinhaltet, ergibt NaN.
• NaN === NaN liefert false.

Verwendung von isNaN()

Die Funktion isNaN() prüft, ob ein Wert NaN ist.

Beispiel:

console.log(isNaN("abc")); // true
console.log(isNaN(42));    // false
console.log(isNaN(NaN));   // true

Vorsicht:
isNaN() führt eine implizite Typkonvertierung durch.

Verwendung von Number.isNaN()

Number.isNaN() führt eine strenge Prüfung ohne Typumwandlung durch.

Beispiel:

console.log(Number.isNaN("abc"));      // false
console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN(undefined));  // false

Empfehlung:

• Verwenden Sie Number.isNaN() für zuverlässige Fehlerüberprüfung.

Beispiel: Ungültige Eingaben verarbeiten

function safeConvert(input) {
  let value = Number(input);
  return Number.isNaN(value) ? 0 : value;
}

6. Praktische Beispiele

Dieser Abschnitt präsentiert Anwendungsfälle aus der Praxis, einschließlich Benutzereingaben, Arrays, Formularen und JSON‑Daten.

1. Umwandlung von Benutzereingaben

function processUserInput(input) {
  let value = Number(input);

  if (Number.isNaN(value)) {
    console.log("Error: Please enter a number.");
    return null;
  }

  console.log("Entered value: " + value);
  return value;
}

2. Umwandlung von Zeichenkettenwerten in Arrays

let data = ["10", "20", "30", "40"];
let numbers = data.map(Number);
console.log(numbers);

3. Verarbeitung von Formulardaten

function calculateTotalPrice(priceInput, quantityInput) {
  let price = parseFloat(priceInput);
  let quantity = parseInt(quantityInput);

  if (Number.isNaN(price) || Number.isNaN(quantity)) {
    console.log("Error: Please enter valid numbers.");
    return null;
  }

  let total = price * quantity;
  console.log("Total price: " + total);
  return total;
}

4. Umwandlung von JSON‑Daten

let jsonData = '[{"id": "1", "price": "120.5"}, {"id": "2", "price": "200"}]';
let products = JSON.parse(jsonData);

let total = products.reduce((sum, product) => {
  let price = Number(product.price);
  return sum + (Number.isNaN(price) ? 0 : price);
}, 0);

console.log("Total price: " + total);

7. Fazit

In diesem Artikel haben wir die Umwandlung von Zeichenketten in Zahlen in JavaScript von den Grundlagen bis zu fortgeschrittenen Anwendungsfällen behandelt.

Wichtige Erkenntnisse umfassen das Verständnis von Datentypen, die Wahl der richtigen Umwandlungsmethode und die Implementierung einer ordnungsgemäßen Fehlerbehandlung.

Die Umwandlung von Zeichenketten in Zahlen ist eine grundlegende, aber wesentliche Fähigkeit für die JavaScript‑Entwicklung in der Praxis. Üben Sie die hier bereitgestellten Beispiele und wenden Sie sie in Ihren eigenen Projekten an, um Zuverlässigkeit und Genauigkeit zu verbessern.