Type Coercion ב-JavaScript: המרות מרומזות מול מפורשות

שני סוגים של המרה

JavaScript גמישה בכל הנוגע לטיפוסים. כשאופרטור מקבל ערך מהטיפוס ה"לא נכון", השפה לא זורקת שגיאה: היא ממירה. ההמרה הזו נקראת coercion, והיא מגיעה בשני טעמים:

• מפורשת: אתם מבקשים אותה: Number("42"), String(99), Boolean(value).
• מרומזת: אופרטור מפעיל אותה בלי שכתבתם המרה: "5" - 2, "" == 0, if (value).

שתיהן מגיעות בסוף לאותם חוקי המרה בסיסיים. ההבדל הוא אם אתם או השפה החלטתם להמיר. כמעט כל תוצאה מבלבלת ב-JavaScript, כמו "5" + 1 === "51", [] == false או null == undefined, נובעת מהמרה מרומזת שתפסה אתכם לא מוכנים.

console.log(Number("42"));    // 42     (explicit)
console.log("5" - 2);         // 3      (implicit)
console.log("5" + 2);         // "52"   (implicit, and different!)
console.log(Boolean(""));     // false  (explicit)
console.log(!!"");            // false  (implicit, same result)

המודל המחשבתי: אם אתם כותבים Number(...) או String(...), אתם יודעים מה אתם מבקשים. אם לא, לכל אופרטור יש דעה משלו על מה לעשות, ובדעות האלה גרים הבאגים.

שלושת טיפוסי היעד

המרה תמיד מתבצעת לאחד משלושה טיפוסים פרימיטיביים: string, number או boolean. (יש רביעי, bigint, אבל ערכים מטיפוסים אחרים אף פעם לא מומרים אליו אוטומטית.) כל שאר החוקים נגזרים מהשאלה לאיזה יעד האופרטור מכוון.

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String([1, 2, 3])); // "1,2,3"
console.log(String({a: 1}));    // "[object Object]"

המרה למחרוזת היא הסלחנית מכולן: לכל ערך יש צורה של מחרוזת. שימו לב שאובייקטים הופכים למחרוזת חסרת התועלת "[object Object]", ולכן הדפסה של אובייקט משורשר למחרוזת ("user: " + user) כמעט אף פעם לא מראה את מה שרציתם. השתמשו במקום זאת ב-JSON.stringify או ב-template literals עם שדות ספציפיים.

המרה למספר

המרה למספר קפדנית יותר. מחרוזות חייבות באמת להיראות כמו מספר, אחרת מקבלים NaN:

console.log(Number("42"));       // 42
console.log(Number("42.5"));     // 42.5
console.log(Number(""));         // 0    (!)
console.log(Number("   "));      // 0    (!)
console.log(Number("42px"));     // NaN
console.log(Number(true));       // 1
console.log(Number(false));      // 0
console.log(Number(null));       // 0    (!)
console.log(Number(undefined));  // NaN
console.log(Number([]));         // 0    (!)
console.log(Number([42]));       // 42   (!)
console.log(Number([1, 2]));     // NaN

ההפתעות שמסומנות בסוגריים הן אלה ששווה לזכור:

• מחרוזת ריקה ומחרוזות שיש בהן רק רווחים הופכות ל-0, לא ל-NaN.
• null הופך ל-0, אבל undefined הופך ל-NaN.
• מערך ריק הופך ל-0; מערך עם איבר אחד מומר לפי אותו איבר; מערך עם כמה איברים הופך ל-NaN.

אם רוצים לחלץ מספר ממחרוזת שיש בה תווים נוספים, השתמשו ב-parseInt או ב-parseFloat במקום ב-Number:

console.log(parseInt("42px", 10));   // 42
console.log(parseFloat("3.14em"));   // 3.14
console.log(parseInt("", 10));       // NaN  (stricter than Number(""))

העבירו תמיד את הבסיס (10) ל-parseInt. בלעדיו, מחרוזות שמתחילות ב-"0x" מפוענחות כהקסדצימליות, ולעיתים רחוקות זה מה שהתכוונתם.

המרה לבוליאני

המרה לבוליאני היא הפשוטה מבין השלוש. רשימה קצרה של ערכים מומרת ל-false, וכל השאר true.

ערכי ה-falsy הם:

• false
• 0, -0, 0n
• "" (מחרוזת ריקה)
• null
• undefined
• NaN

זהו. כל ערך אחר, כולל "false", "0", [] ו-{}, הוא truthy.

console.log(Boolean(""));      // false
console.log(Boolean("false")); // true   (מחרוזת לא ריקה)
console.log(Boolean(0));       // false
console.log(Boolean("0"));     // true   (מחרוזת לא ריקה)
console.log(Boolean([]));      // true   (מערך ריק הוא truthy!)
console.log(Boolean({}));      // true   (אובייקט ריק הוא truthy!)

if ([]) console.log("מערך ריק מריץ את בלוק ה-if");
if ({}) console.log("גם אובייקט ריק מריץ את בלוק ה-if");

התוצאות של מערך ריק ואובייקט ריק תופסות אנשים שמגיעים מ-Python, שבה אוספים ריקים הם falsy. ב-JavaScript הם truthy: אם אתם רוצים לדעת "האם המערך הזה ריק?", בדקו במפורש arr.length === 0.

המרה לבוליאני מתבצעת בכל פעם שערך מופיע במקום שבו מצופה בוליאני: if (...), while (...), האופרטור הטרנרי ? : והאופרטורים הלוגיים &&, ||, !.

האופרטור + הוא מקרה מיוחד

רוב האופרטורים האריתמטיים כופים על האופרנדים שלהם להפוך למספרים. + שונה: אם אחד מהצדדים הוא מחרוזת, + משרשר מחרוזות. אחרת הוא מבצע חיבור מספרי.

console.log(1 + 2);       // 3
console.log("1" + 2);     // "12"
console.log(1 + "2");     // "12"
console.log(1 + 2 + "3"); // "33"    (left-to-right: 3, then "33")
console.log("1" + 2 + 3); // "123"   (once it's a string, it stays one)

console.log("5" - 2);     // 3       (- has no string version)
console.log("5" * "2");   // 10      (* coerces both sides)
console.log("5" / "2");   // 2.5

החישוב מתבצע משמאל לימין. 1 + 2 + "3" מחשב קודם 1 + 2 = 3, ואז 3 + "3" = "33". אבל "1" + 2 + 3 מתחיל כמחרוזת ונשאר מחרוזת: "12", ואז "123".

זו הסיבה שבניית מחרוזות עם + שבירה. ל-template literals אין את הבעיה הזו:

const count = 3;
console.log("count: " + count + 1);   // "count: 31"  (oops)
console.log(`count: ${count + 1}`);   // "count: 4"

ה-template literal מחשב את count + 1 כביטוי מספרי נפרד, ורק אז משבץ את התוצאה. בלי המרה מפתיעה.

העדיפו המרות מפורשות

כשאתם צריכים להמיר טיפוס, אמרו את זה. זה עולה כמה תווים ומסיר כל עמימות עבור הקורא הבא:

const input = "42";

// Implicit - works, but easy to misread.
const n1 = +input;
const n2 = input * 1;

// Explicit - reads as "I want a number from this string".
const n3 = Number(input);

// For user input that might be messy:
const n4 = parseInt(input, 10);

console.log(n1, n2, n3, n4);

אותו דבר עם בוליאנים. !!value עובד ונפוץ, אבל Boolean(value) אומר בדיוק מה הוא עושה:

const value = "hello";
console.log(!!value);          // true
console.log(Boolean(value));   // true - easier to grep for

כלל סביר: השתמשו בהמרות מפורשות בלוגיקה של האפליקציה, ושמרו את הצורות הקצרות (+x, !!x) למקומות שבהם הקיצור חשוב והכוונה ברורה מההקשר.

האופרטור == נשען בכבדות על המרה

אופרטורי השוויון הם המקור הגדול ביותר להפתעות של המרת טיפוסים. == ממיר לפני ההשוואה; === לא.

console.log(1 == "1");         // true   (string coerced to number)
console.log(0 == "");          // true   (both coerce to 0)
console.log(0 == false);       // true   (false coerces to 0)
console.log(null == undefined); // true  (special case, only these two)
console.log(null == 0);        // false  (null does NOT coerce for ==)
console.log([] == false);      // true   ([] → "" → 0, false → 0)
console.log([1] == 1);         // true   ([1] → "1" → 1)

console.log(1 === "1");        // false  (different types, done)
console.log(null === undefined); // false

כל true למעלה הוא תוצאה של שרשרת המרות רב שלבית שרוב המפתחים לא יכולים לשחזר מהזיכרון. זו הבעיה: קוד שעובד במקרה הוא קוד שיישבר בהמשך. ניכנס לכל חוקי השוויון בעמוד הבא; בינתיים, השורה התחתונה היא: השתמשו ב-=== כברירת מחדל, ותשתמשו ב-== רק בביטוי הספציפי x == null (שתופס גם null וגם undefined).

לחבר את הכול יחד

דוגמה מלאה שמראה איפה המרה עוזרת ואיפה היא מזיקה:

function parsePrice(input) {
    // Explicit: we want a number or nothing.
    const n = Number(input);
    if (Number.isNaN(n)) return null;
    return n;
}

function formatTotal(price, quantity) {
    // Template literal handles string building without + surprises.
    const total = price * quantity;
    return `Total: $${total.toFixed(2)}`;
}

console.log(parsePrice("19.99"));  // 19.99
console.log(parsePrice(""));        // 0      (Number("") is 0 - watch out)
console.log(parsePrice("abc"));     // null
console.log(formatTotal(parsePrice("19.99"), 3)); // "Total: $59.97"

שימו לב לקריאה השנייה. Number("") מחזיר 0, לא NaN, ולכן parsePrice("") מחזיר 0, מה שכנראה לא היה רוצה מי שמשתמש בפונקציה הזו. אם צריך לדחות קלט ריק, הוסיפו בדיקה מפורשת:

function parsePrice(input) {
    if (typeof input !== "string" || input.trim() === "") return null;
    const n = Number(input);
    return Number.isNaN(n) ? null : n;
}

console.log(parsePrice(""));       // null
console.log(parsePrice("  "));     // null
console.log(parsePrice("19.99"));  // 19.99

לדעת אילו ערכים מומרים ל-0 ואילו ל-NaN זה בדיוק מה שמציל אתכם מבאג עדין בהמשך הדרך.

מה לקחת מכאן

• המרה מתבצעת למחרוזת, למספר או לבוליאני, בהתאם לאופרטור.
• + עם מחרוזת כלשהי הופך לשרשור; כל אופרטור אריתמטי אחר ממיר למספר.
• ערכי falsy הם רשימה קצרה וקבועה, שננו אותה. כל השאר truthy, כולל [] ו-{}.
• Number("") הוא 0, Number([]) הוא 0, Number(null) הוא 0, אבל Number(undefined) הוא NaN. אלה מופיעים בבאגים אמיתיים.
• העדיפו Number(x), String(x), Boolean(x) על פני טריקים מרומזים מתוחכמים. העצמי העתידי שלכם יודה לכם.

הבא בתור: אופרטורי שוויון

כל מה שהמרה עושה בהשוואות גר בתוך ==. העמוד הבא עובר על == מול === מול Object.is, על הביטוי היחיד שבו == עדיין שימושי, ועל הסיבה ש-linters מסמנים כברירת מחדל את הצורה הרופפת.