Convertire una stringa in numero in TypeScript (e viceversa)

Per convertire una stringa in numero in TypeScript, chiama Number(text). Il risultato ha tipo number, ed è NaN quando il testo non è un numero valido. Per un testo con caratteri in coda, come "42px", usa parseInt(text, 10) o parseFloat(text).

const input: string = "42";

const a = Number(input);       // 42
const b = parseInt(input, 10); // 42 (whole numbers)
const c = parseFloat("3.75");  // 3.75
const d = +input;              // 42 (unary plus, same as Number)

console.log(a + 1, b + 1, c + 1, d + 1); // 43 43 4.75 43

// And back: number to string
const text: string = String(a);
console.log(text, text.length); // 42 2

Tutte e quattro le conversioni restituiscono il tipo number. TypeScript non sa se il testo era valido: anche una stringa non valida dà un number, il cui valore è NaN.

Perché devi convertire

Campi dei form, parametri degli URL, variabili d'ambiente e contenuti dei file arrivano come stringhe. TypeScript non ti permette di usarne una dove si aspetta un numero:

// This does not compile: a string is not a number.
const quantity: string = "3";
const total: number = quantity * 10;
console.log(total);

index.ts(3,23): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

L'aritmetica con -, * e / su una stringa è un errore. + è permesso ma concatena, quindi "3" + 10 è la stringa "310": ecco perché la conversione deve venire prima, Number(quantity) * 10.

Nemmeno una type assertion aiuta. quantity as number viene rifiutato (TS2352), e forzarlo con as unknown as number zittisce solo il compilatore: in esecuzione il valore resta una stringa.

Number, parseInt, parseFloat e più unario a confronto

Le quattro funzioni concordano sugli input puliti e divergono su tutto il resto. Questa tabella è l'output reale di ciascuna su Node:

Le regole dietro la tabella:

• Number e il + unario sono identici. Convertono l'intera stringa dopo aver tolto gli spazi ai lati, capiscono 1e3 e l'esadecimale 0x, e restituiscono NaN se avanza qualcosa. Una stringa vuota o di soli spazi diventa 0.
• parseInt e parseFloat leggono dall'inizio e si fermano al primo carattere che non possono usare, quindi "42px" e "1,000" danno numeri parziali. Una stringa vuota è NaN.
• parseInt scarta la parte decimale e non capisce gli esponenti: "1e3" si ferma alla e.
• I separatori numerici (12_000) sono validi nel codice sorgente, non nelle stringhe.

Number è la scelta più severa per validare l'input. parseInt e parseFloat vanno bene per testi che portano davvero un'unità o un suffisso, come le dimensioni CSS.

Gestire l'input non valido: NaN

NaN ha tipo number, quindi il compilatore non avvisa mai. Controlla il risultato tu, con Number.isNaN o Number.isFinite:

function toNumber(text: string): number | undefined {
    if (text.trim() === "") return undefined; // Number("") would be 0
    const n = Number(text);
    return Number.isFinite(n) ? n : undefined;
}

for (const s of ["12.5", "", "abc", "7 ", "Infinity"]) {
    console.log(JSON.stringify(s), toNumber(s));
}

const age = toNumber("30");
if (age !== undefined) {
    console.log(age + 1); // age is number here
}

Restituire number | undefined rende il fallimento parte del tipo, così ogni chiamante deve gestirlo prima di fare calcoli. Number.isFinite rifiuta anche Infinity, che Number("Infinity") restituisce senza problemi.

Evita l'isNaN(x) globale: converte prima il suo argomento, quindi in JavaScript isNaN("abc") è true. La dichiarazione di TypeScript accetta solo un number, quindi passare una stringa è l'errore TS2345, un indizio per usare Number.isNaN su un valore già convertito.

Da stringa a intero

Passa sempre a parseInt il secondo argomento, la base (radix): 10 per il testo decimale. È opzionale, ma documenta l'intenzione e conta per le altre basi. Per ottenere un intero da una stringa decimale, converti e poi arrotonda in modo esplicito.

console.log(parseInt("0042", 10)); // 42
console.log(parseInt("ff", 16));   // 255
console.log(parseInt("1010", 2));  // 10

const price = Number("19.99");
console.log(Math.trunc(price), Math.round(price), Math.floor(price)); // 19 20 19

console.log(Number.isInteger(Number("7")));   // true
console.log(Number.isInteger(Number("7.5"))); // false

console.log(BigInt("9007199254740993")); // 9007199254740993n

parseInt si aspetta una stringa: parseInt(12.7) è un errore di compilazione (TS2345), ed è utile, perché in JavaScript parseInt su un numero lo converte prima in testo e dà risposte sbagliate per valori come 0.0000005 (restituisce 5). Per i numeri usa Math.trunc. Per interi oltre Number.MAX_SAFE_INTEGER, BigInt(text) interpreta il valore completo (e lancia un SyntaxError sul testo non valido invece di restituire NaN).

Da numero a stringa

String(n), n.toString() e `${n}` convertono tutti un numero nella sua forma testuale più corta. I metodi di formattazione danno più controllo:

const n = 1234.5678;

console.log(String(n));            // 1234.5678
console.log(n.toString());         // 1234.5678
console.log(`${n}`);               // 1234.5678
console.log(n.toFixed(2));         // 1234.57
console.log(n.toPrecision(3));     // 1.23e+3
console.log(n.toLocaleString("en-US")); // 1,234.568
console.log((255).toString(16));   // ff
console.log((5).toString().padStart(3, "0")); // 005

const label: string = n.toFixed(1); // every method here returns string
console.log(label);                 // 1234.6

toFixed arrotonda il valore binario, non il decimale che hai scritto, quindi (1.005).toFixed(2) è "1.00": 1.005 è memorizzato come un valore leggermente inferiore a 1,005. Per il denaro, tieni gli importi in centesimi interi o formatta con Intl.NumberFormat.

String(n) funziona anche su null e undefined (dando "null" e "undefined"), dove n.toString() sarebbe un errore di compilazione con strict, perché il valore potrebbe mancare.

Riepilogo rapido