Convertir une string en number en TypeScript (et inversement)

Pour convertir une chaîne en nombre en TypeScript, appelez Number(text). Le résultat est de type number, et il vaut NaN quand le texte n'est pas un nombre valide. Pour un texte suivi d'autres caractères, comme "42px", utilisez parseInt(text, 10) ou 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

Les quatre conversions renvoient le type number. TypeScript ne sait pas si le texte était valide ; une chaîne invalide donne quand même un number, dont la valeur est NaN.

Pourquoi il faut convertir

Les champs de formulaire, les paramètres d'URL, les variables d'environnement et le contenu des fichiers arrivent sous forme de chaînes. TypeScript ne vous laisse pas en utiliser une là où un nombre est attendu :

// 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'arithmétique avec -, * et / sur une chaîne est une erreur. + est autorisé mais concatène, donc "3" + 10 donne la chaîne "310" : c'est pourquoi la conversion doit venir en premier, Number(quantity) * 10.

Une assertion de type n'aide pas non plus. quantity as number est refusé (TS2352), et le forcer via as unknown as number ne fait que faire taire le compilateur : la valeur reste une chaîne à l'exécution.

Number, parseInt, parseFloat ou + unaire

Les quatre fonctions s'accordent sur une entrée propre et divergent sur tout le reste. Ce tableau montre la sortie réelle de chacune sous Node :

Les règles derrière ce tableau :

• Number et le + unaire sont identiques. Ils convertissent toute la chaîne après avoir retiré les espaces, comprennent 1e3 et l'hexadécimal 0x, et renvoient NaN s'il reste quoi que ce soit. Une chaîne vide ou composée uniquement d'espaces devient 0.
• parseInt et parseFloat lisent depuis le début et s'arrêtent au premier caractère qu'ils ne savent pas utiliser, si bien que "42px" et "1,000" donnent des nombres partiels. Une chaîne vide donne NaN.
• parseInt abandonne la partie décimale et ne comprend pas les exposants : "1e3" s'arrête au e.
• Les séparateurs numériques (12_000) sont valides dans le code source, pas dans les chaînes.

Number est le choix le plus strict pour valider une entrée. parseInt et parseFloat conviennent aux textes qui portent réellement une unité ou un suffixe, comme les tailles CSS.

Gérer une entrée invalide : NaN

NaN est de type number, le compilateur ne vous en avertit donc jamais. Vérifiez le résultat vous-même, avec Number.isNaN ou 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
}

Renvoyer number | undefined fait de l'échec une partie du type : chaque appelant doit le traiter avant de faire des calculs. Number.isFinite refuse aussi Infinity, que Number("Infinity") renvoie sans problème.

Évitez le isNaN(x) global : il convertit d'abord son argument, donc isNaN("abc") vaut true en JavaScript. La déclaration de TypeScript n'accepte qu'un number, donc passer une chaîne provoque l'erreur TS2345, ce qui invite à utiliser Number.isNaN sur une valeur déjà convertie.

Chaîne en entier

Passez toujours à parseInt son second argument, la base : 10 pour un texte décimal. Il est facultatif, mais il documente l'intention et compte pour les autres bases. Pour obtenir un entier à partir d'une chaîne décimale, convertissez puis arrondissez explicitement.

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 attend une chaîne : parseInt(12.7) est une erreur de compilation (TS2345), ce qui est utile, car en JavaScript parseInt appliqué à un nombre le convertit d'abord en texte et donne de mauvaises réponses pour des valeurs comme 0.0000005 (il renvoie 5). Utilisez Math.trunc pour les nombres. Pour les entiers au-delà de Number.MAX_SAFE_INTEGER, BigInt(text) analyse la valeur complète (et lève une SyntaxError sur un texte invalide au lieu de renvoyer NaN).

Nombre en chaîne

String(n), n.toString() et `${n}` convertissent tous un nombre en sa forme textuelle la plus courte. Les méthodes de formatage donnent plus de contrôle :

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 arrondit la valeur binaire, pas le décimal que vous avez tapé, donc (1.005).toFixed(2) vaut "1.00" : 1.005 est stocké comme une valeur légèrement inférieure à 1,005. Pour de l'argent, gardez les montants en centimes entiers ou formatez avec Intl.NumberFormat.

String(n) fonctionne aussi sur null et undefined (en donnant "null" et "undefined"), là où n.toString() serait une erreur de compilation avec strict, puisque la valeur peut être absente.

Référence rapide