Ép kiểu trong JavaScript: chuyển đổi ngầm định và tường minh

Hai kiểu ép kiểu

JavaScript khá dễ dãi về kiểu dữ liệu. Khi một toán tử nhận một giá trị "sai" kiểu, ngôn ngữ không ném lỗi mà chuyển đổi nó. Việc chuyển đổi đó gọi là ép kiểu (coercion), và có hai dạng:

• Tường minh: bạn chủ động yêu cầu: Number("42"), String(99), Boolean(value).
• Ngầm định: một toán tử kích hoạt nó mà bạn không viết phép chuyển đổi nào: "5" - 2, "" == 0, if (value).

Cả hai cuối cùng đều dùng chung các quy tắc chuyển đổi bên dưới. Khác biệt nằm ở chỗ bạn hay ngôn ngữ quyết định chuyển đổi. Hầu như mọi kết quả khó hiểu trong JavaScript, như "5" + 1 === "51", [] == false, null == undefined, đều đến từ việc ép kiểu ngầm định khiến bạn bất ngờ.

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)

Cách nghĩ đơn giản: nếu bạn gõ Number(...) hoặc String(...), bạn biết mình đang yêu cầu gì. Nếu không, mỗi toán tử lại có ý kiến riêng về việc phải làm gì, và những ý kiến đó chính là nơi bug ẩn náu.

Ba kiểu đích

Ép kiểu luôn chuyển về một trong ba kiểu nguyên thủy: chuỗi, số hoặc boolean. (Còn một kiểu thứ tư là bigint, nhưng các kiểu khác không bao giờ tự động bị ép sang nó.) Mọi quy tắc còn lại đều suy ra từ việc toán tử đang nhắm tới kiểu đích nào.

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]"

Ép sang chuỗi là kiểu dễ dãi nhất: giá trị nào cũng có dạng chuỗi. Để ý rằng đối tượng được chuyển thành chuỗi "[object Object]" chẳng mấy hữu ích, đó là lý do việc in một đối tượng nối với chuỗi ("user: " + user) gần như không bao giờ cho thấy điều bạn muốn. Hãy dùng JSON.stringify hoặc template literal với các trường cụ thể.

Ép sang số

Ép sang số thì chặt chẽ hơn. Chuỗi phải thực sự trông giống một con số, nếu không bạn sẽ nhận được 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

Những điều bất ngờ được đánh dấu trong ngoặc là những điểm nên ghi nhớ:

• Chuỗi rỗng và chuỗi chỉ có khoảng trắng trở thành 0, không phải NaN.
• null trở thành 0, nhưng undefined trở thành NaN.
• Mảng rỗng trở thành 0; mảng một phần tử được ép theo chính phần tử đó; mảng nhiều phần tử trở thành NaN.

Nếu bạn muốn đọc một con số từ chuỗi có thêm ký tự thừa, hãy dùng parseInt hoặc parseFloat thay cho Number:

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

Luôn truyền cơ số (10) cho parseInt. Nếu không, chuỗi bắt đầu bằng "0x" sẽ được đọc theo hệ thập lục phân, hiếm khi là điều bạn muốn.

Ép sang boolean

Ép sang boolean là đơn giản nhất trong ba loại. Một danh sách ngắn các giá trị được ép thành false, mọi thứ còn lại là true.

Các giá trị falsy gồm:

• false
• 0, -0, 0n
• "" (chuỗi rỗng)
• null
• undefined
• NaN

Chỉ vậy thôi. Mọi giá trị khác, kể cả "false", "0", [] và {}, đều là truthy.

console.log(Boolean(""));      // false
console.log(Boolean("false")); // true   (non-empty string)
console.log(Boolean(0));       // false
console.log(Boolean("0"));     // true   (non-empty string)
console.log(Boolean([]));      // true   (empty array is truthy!)
console.log(Boolean({}));      // true   (empty object is truthy!)

if ([]) console.log("empty array runs the if block");
if ({}) console.log("empty object runs the if block too");

Kết quả với mảng rỗng và đối tượng rỗng hay làm khó những ai đến từ Python, nơi các tập hợp rỗng là falsy. Trong JavaScript, chúng là truthy: nếu bạn muốn hỏi "mảng này có rỗng không?", hãy kiểm tra tường minh arr.length === 0.

Ép sang boolean xảy ra bất cứ khi nào một giá trị xuất hiện ở chỗ cần boolean: if (...), while (...), toán tử ba ngôi ? : và các toán tử logic &&, ||, !.

Toán tử + là trường hợp đặc biệt

Hầu hết các toán tử số học ép toán hạng của chúng sang số. + thì khác: nếu một trong hai vế là chuỗi, + thực hiện nối chuỗi. Nếu không, nó thực hiện phép cộng số.

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

Biểu thức được tính từ trái sang phải. 1 + 2 + "3" trước tiên tính 1 + 2 = 3, rồi 3 + "3" = "33". Còn "1" + 2 + 3 bắt đầu là chuỗi và giữ nguyên là chuỗi: "12", rồi "123".

Đó là lý do việc ghép chuỗi bằng + rất dễ hỏng. Template literal không gặp vấn đề này:

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

Template literal tính count + 1 như một biểu thức số riêng, rồi mới chèn kết quả vào. Không có phép ép kiểu bất ngờ nào.

Ưu tiên chuyển đổi tường minh

Khi bạn cần chuyển đổi kiểu, hãy viết rõ ra. Chỉ tốn thêm vài ký tự mà xóa sạch mọi mơ hồ cho người đọc sau:

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);

Với boolean cũng vậy. !!value chạy được và khá phổ biến, nhưng Boolean(value) nói chính xác nó làm gì:

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

Một quy tắc hợp lý: dùng chuyển đổi tường minh trong logic của ứng dụng, và để dành các dạng viết tắt (+x, !!x) cho những chỗ cần ngắn gọn và ý định đã rõ ràng từ ngữ cảnh.

Toán tử == dựa rất nhiều vào ép kiểu

Các toán tử so sánh bằng là nguồn gây bất ngờ lớn nhất về ép kiểu. == ép kiểu trước khi so sánh; === thì không.

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

Mỗi kết quả true ở trên là kết quả của một chuỗi ép kiểu nhiều bước mà hầu hết lập trình viên không thể đọc thuộc lòng. Vấn đề nằm ở đó: code chạy đúng nhờ may mắn là code sẽ hỏng về sau. Chúng ta sẽ đi vào đầy đủ các quy tắc so sánh bằng ở trang tiếp theo; còn bây giờ, điều cần nhớ là: mặc định hãy dùng ===, và chỉ dùng == cho đúng một cách viết quen thuộc là x == null (bắt được cả null lẫn undefined).

Ghép tất cả lại

Một ví dụ hoàn chỉnh cho thấy khi nào ép kiểu có ích và khi nào nó gây hại:

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"

Hãy để ý lời gọi thứ hai. Number("") trả về 0 chứ không phải NaN, nên parsePrice("") trả về 0, có lẽ không phải điều người dùng hàm này mong muốn. Nếu đầu vào rỗng cần bị từ chối, hãy thêm một phép kiểm tra tường minh:

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

Biết rõ những giá trị nào được ép thành 0 và những giá trị nào thành NaN chính là thứ giúp bạn tránh được một bug khó thấy ở phía sau.

Những điều cần nhớ

• Ép kiểu chuyển giá trị sang chuỗi, số hoặc boolean tùy theo toán tử.
• + với bất kỳ chuỗi nào sẽ thành phép nối chuỗi; mọi toán tử số học khác đều ép sang số.
• Các giá trị falsy là một danh sách ngắn cố định: hãy thuộc lòng nó. Mọi thứ khác đều truthy, kể cả [] và {}.
• Number("") là 0, Number([]) là 0, Number(null) là 0, nhưng Number(undefined) là NaN. Những điều này xuất hiện trong các bug thực tế.
• Ưu tiên Number(x), String(x), Boolean(x) thay vì các mẹo ngầm định khéo léo. Bạn của tương lai sẽ biết ơn điều đó.

Tiếp theo: toán tử so sánh bằng

Mọi điều ép kiểu làm trong phép so sánh đều nằm bên trong ==. Trang tiếp theo sẽ đi qua ==, === và Object.is, cách viết duy nhất mà == vẫn còn hữu ích, và vì sao các linter mặc định cảnh báo dạng so sánh lỏng lẻo này.