javascript / beginner
Snippet
Bereinigen und Konvertieren von Formulareingaben in numerische Datentypen in Svelte
HTML-Eingabefelder liefern Benutzerwerte standardmäßig als Zeichenketten (Strings). Die Verwendung von `Number.parseFloat()` mit Fallback-Operatoren stellt Datentypsicherheit sicher und schützt vor NaN-Werten vor reaktiven arithmetischen Berechnungen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<script>let rawInput = "0";$: parsedNumber = Number.parseFloat(rawInput) || 0;$: doubledValue = parsedNumber * 2;</script><label for="numeric-input">Enter amount:</label><input id="numeric-input" type="text" bind:value={rawInput} /><p>Parsed Number: {parsedNumber}</p><p>Doubled Result: {doubledValue}</p>
svelte
Erklärung
1
let rawInput = "0";
Initialisiert eine String-Zustandsvariable, die an das rohe Formular-Eingabefeld gebunden ist.
2
$: parsedNumber = Number.parseFloat(rawInput) || 0;
Parst den Eingabestring reaktiv in eine Fließkommazahl mit Fallback auf 0 bei ungültiger Eingabe (NaN).
3
$: doubledValue = parsedNumber * 2;
Führt mathematische Arithmetik mit dem bereinigten numerischen Datentyp aus, sobald sich parsedNumber ändert.
4
<input id="numeric-input" type="text" bind:value={rawInput} />
Bindet den Textfeldwert bidirektional an die Variable rawInput in Svelte.