TypeScript string to number (ו-number to string)

כדי להמיר מחרוזת למספר ב-TypeScript, קראו ל-Number(text). לתוצאה יש טיפוס number, והיא NaN כשהטקסט אינו מספר תקין. לטקסט עם תווים נוספים בסוף, כמו "42px", השתמשו ב-parseInt(text, 10) או ב-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

כל ארבע ההמרות מחזירות את הטיפוס number. TypeScript לא יודע אם הטקסט היה תקין; מחרוזת לא תקינה עדיין נותנת number, שהערך שלו הוא NaN.

למה חייבים להמיר

שדות טופס, פרמטרים של URL, משתני סביבה ותוכן של קבצים מגיעים כמחרוזות. TypeScript לא ייתן לכם להשתמש במחרוזת במקום שבו מצופה מספר:

// 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.

חשבון עם -, * ו-/ על מחרוזת הוא שגיאה. + מותר אבל משרשר, כך ש-"3" + 10 הוא המחרוזת "310", ולכן ההמרה חייבת לבוא קודם: Number(quantity) * 10.

גם type assertion לא עוזר. quantity as number נדחה (TS2352), וכפייה דרך as unknown as number רק משתיקה את הקומפיילר: בזמן ריצה הערך נשאר מחרוזת.

Number מול parseInt מול parseFloat מול + אונרי

ארבע הפונקציות מסכימות על קלט נקי ולא מסכימות על כל השאר. הטבלה הזו היא הפלט האמיתי של כל אחת מהן ב-Node:

הכללים שמאחורי הטבלה:

• Number ו-+ אונרי זהים. הם ממירים את כל המחרוזת אחרי הסרת רווחים מהקצוות, מבינים 1e3 ו-hex עם 0x, ומחזירים NaN אם נשאר משהו. מחרוזת ריקה או כזו שיש בה רק רווחים הופכת ל-0.
• parseInt ו-parseFloat קוראים מההתחלה ועוצרים בתו הראשון שאינם יכולים להשתמש בו, ולכן "42px" ו-"1,000" נותנים מספרים חלקיים. מחרוזת ריקה היא NaN.
• parseInt משמיט את החלק העשרוני ולא מבין מעריכים: "1e3" נעצר ב-e.
• מפרידים מספריים (12_000) תקינים בקוד מקור, לא במחרוזות.

Number היא הבחירה המחמירה יותר לבדיקת קלט. parseInt ו-parseFloat מתאימים לטקסט שבאמת נושא יחידה או סיומת, כמו גדלים ב-CSS.

טיפול בקלט לא תקין: NaN

ל-NaN יש טיפוס number, ולכן הקומפיילר אף פעם לא מזהיר עליו. בדקו את התוצאה בעצמכם, עם Number.isNaN או 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
}

החזרה של number | undefined הופכת את הכישלון לחלק מהטיפוס, כך שכל מי שקורא לפונקציה חייב לטפל בו לפני שהוא עושה חשבון. Number.isFinite דוחה גם את Infinity, ש-Number("Infinity") מחזיר בלי בעיה.

הימנעו מ-isNaN(x) הגלובלי: הוא ממיר קודם את הארגומנט שלו, ולכן isNaN("abc") הוא true ב-JavaScript. ההצהרה של TypeScript מקבלת רק number, כך שהעברת מחרוזת היא השגיאה TS2345, וזה רמז להשתמש ב-Number.isNaN על ערך שכבר הומר.

מחרוזת למספר שלם

תמיד העבירו ל-parseInt את הארגומנט השני שלו, ה-radix: 10 לטקסט עשרוני. הוא אופציונלי, אבל הוא מתעד את הכוונה וחשוב לבסיסים אחרים. כדי לקבל מספר שלם ממחרוזת עשרונית, המירו ואז עגלו במפורש.

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 מצפה למחרוזת: parseInt(12.7) היא שגיאת קומפילציה (TS2345), וזה שימושי, כי ב-JavaScript parseInt על מספר ממיר אותו קודם לטקסט ונותן תשובות שגויות לערכים כמו 0.0000005 (הוא מחזיר 5). השתמשו ב-Math.trunc למספרים. למספרים שלמים מעבר ל-Number.MAX_SAFE_INTEGER, BigInt(text) מפרש את הערך המלא (וזורק SyntaxError על טקסט לא תקין במקום להחזיר NaN).

מספר למחרוזת

כל אחד מ-String(n), n.toString() ו-`${n}` ממיר מספר לצורת המחרוזת הקצרה ביותר שלו. מתודות עיצוב נותנות יותר שליטה:

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 מעגל את הערך הבינארי, לא את המספר העשרוני שהקלדתם, ולכן (1.005).toFixed(2) הוא "1.00": 1.005 נשמר כערך קטן מעט מ-1.005. לכסף, שמרו סכומים כאגורות שלמות או עצבו אותם עם Intl.NumberFormat.

String(n) עובד גם על null ו-undefined (ונותן "null" ו-"undefined"), במקום שבו n.toString() היה שגיאת קומפילציה תחת strict, כי הערך עשוי להיות חסר.

סיכום מהיר