Chuyển đổi kiểu dữ liệu (Type Conversion) trong JavaScript

Như bạn thấy, JavaScript có thể tự động thay đổi kiểu dữ liệu, giúp code ngắn gọn nhưng đôi khi cũng có thể gây ra lỗi khó phát hiện nếu không hiểu rõ cơ chế này.

Phân loại chuyển đổi kiểu dữ liệu

JavaScript hỗ trợ hai loại chuyển đổi kiểu dữ liệu chính:

Chuyển đổi tường minh (Explicit Type Conversion - Type Casting)

Lập trình viên chủ động chuyển đổi kiểu dữ liệu bằng cách sử dụng các hàm như:

• String(): Chuyển đổi giá trị sang chuỗi.
• Number(): Chuyển đổi giá trị sang số.
• Boolean(): Chuyển đổi giá trị sang kiểu luận lý.

Ví dụ:

let num = 42;
let str = String(num);  // "42"
let bool = Boolean(num); // true

Chuyển đổi ngầm định (Implicit Type Conversion - Type Coercion)

• JavaScript tự động chuyển đổi kiểu trong quá trình thực thi.

Ví dụ:

console.log("5" * 2); // 10 (Chuỗi "5" được chuyển thành số)
console.log("10" - true); // 9 (true được chuyển thành số 1)

Việc hiểu rõ hai dạng chuyển đổi này giúp lập trình viên kiểm soát tốt hơn luồng dữ liệu trong ứng dụng, tránh các lỗi không mong muốn khi làm việc với JavaScript.

Chuyển đổi kiểu dữ liệu tường minh (Explicit Type Conversion) trong Javascript

Chuyển đổi kiểu dữ liệu tường minh trong JavaScript xảy ra khi lập trình viên chủ động sử dụng các hàm hoặc phương thức để thay đổi kiểu dữ liệu của một giá trị sang String (chuỗi), Number (số) hoặc Boolean (luận lý). Việc này giúp kiểm soát dữ liệu tốt hơn, tránh các lỗi do chuyển đổi kiểu tự động gây ra.

Chuyển đổi sang kiểu String

Trong JavaScript, có nhiều cách để chuyển đổi một giá trị sang chuỗi (String):

• Dùng String(value) – Chuyển đổi giá trị sang chuỗi mà không làm thay đổi dữ liệu gốc.
• Dùng .toString() – Phương thức này có sẵn trên tất cả các kiểu dữ liệu ngoại trừ null và undefined.
• Dùng JSON.stringify(value) – Chuyển đổi giá trị (bao gồm cả object, array) thành chuỗi JSON.

Ví dụ minh họa

// Chuyển số thành chuỗi
console.log(String(123));      // "123"
console.log((123).toString()); // "123"

// Chuyển boolean thành chuỗi
console.log(String(true));      // "true"
console.log(false.toString());  // "false"

// Chuyển object thành chuỗi
console.log(String({ name: "Alice" })); // "[object Object]"
console.log(JSON.stringify({ name: "Alice" })); // '{"name":"Alice"}'

// Chuyển null và undefined thành chuỗi
console.log(String(null));  // "null"
console.log(String(undefined)); // "undefined"
// console.log(null.toString()); // Lỗi: Cannot read properties of null

Lưu ý:

• String(null) trả về "null", nhưng null.toString() sẽ báo lỗi.
• JSON.stringify() hữu ích khi cần chuyển đổi object hoặc array sang chuỗi JSON.

Chuyển đổi sang kiểu Number

Khi cần thực hiện các phép toán số học trên dữ liệu nhập từ người dùng (thường ở dạng chuỗi), ta phải chuyển đổi chúng sang số.

Các phương pháp chuyển đổi sang số

• Dùng Number(value) – Chuyển đổi trực tiếp giá trị sang số.
• Dùng parseInt(value) – Chuyển đổi chuỗi thành số nguyên (bỏ phần thập phân).
• Dùng parseFloat(value) – Chuyển đổi chuỗi thành số thực (giữ phần thập phân).

Ví dụ minh họa

// Chuyển chuỗi thành số
console.log(Number("123"));    // 123
console.log(Number("123.45")); // 123.45
console.log(parseInt("123px"));   // 123 (bỏ phần chữ)
console.log(parseFloat("123.45px")); // 123.45

// Chuyển boolean thành số
console.log(Number(true));  // 1
console.log(Number(false)); // 0

// Chuyển null, undefined thành số
console.log(Number(null));  // 0
console.log(Number(undefined)); // NaN

// Trường hợp đặc biệt
console.log(Number("abc")); // NaN (Không thể chuyển thành số)
console.log(parseInt("abc123")); // NaN (Không tìm thấy số đầu tiên)

Lưu ý:

• Number("123abc") trả về NaN, nhưng parseInt("123abc") sẽ lấy được 123.
• parseFloat("12.34abc") vẫn lấy được 12.34.
• Number(undefined) trả về NaN, nhưng Number(null) trả về 0.

Chuyển đổi sang kiểu Boolean

Trong JavaScript, các giá trị có thể được chuyển đổi thành Boolean (true/false) bằng cách sử dụng Boolean(value).

Quy tắc truthy và falsy

Các giá trị falsy (trả về false khi chuyển đổi):

• 0
• "" (chuỗi rỗng)
• null
• undefined
• NaN

Các giá trị còn lại được coi là truthy (trả về true).

Ví dụ minh họa

// Chuyển số thành boolean
console.log(Boolean(1));   // true
console.log(Boolean(0));   // false
console.log(Boolean(-1));  // true (số âm vẫn là truthy)

// Chuyển chuỗi thành boolean
console.log(Boolean("Hello")); // true
console.log(Boolean(""));      // false

// Chuyển null, undefined, NaN thành boolean
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false

// Chuyển object và array thành boolean
console.log(Boolean({})); // true (object không rỗng là truthy)
console.log(Boolean([])); // true (array không rỗng là truthy)

Lưu ý:

• Chuỗi rỗng "" là falsy, nhưng bất kỳ chuỗi nào khác (kể cả "0", "false") đều là truthy.
• Số 0 là falsy, nhưng tất cả các số khác (kể cả -1, 0.1) là truthy.
• Boolean([]) và Boolean({}) đều là true, vì object và array không bao giờ là falsy.

Chuyển đổi kiểu dữ liệu tường minh giúp lập trình viên kiểm soát tốt hơn cách dữ liệu được xử lý trong chương trình.

Chuyển đổi kiểu dữ liệu ngầm định (Implicit Type Conversion) trong Javascript

Chuyển đổi kiểu dữ liệu ngầm định xảy ra khi JavaScript tự động chuyển đổi một kiểu dữ liệu sang kiểu khác trong quá trình thực hiện biểu thức. Điều này chủ yếu xảy ra khi sử dụng toán tử số học, so sánh, hoặc các câu điều kiện.

JavaScript có ba dạng chuyển đổi ngầm định chính:

• Chuyển đổi sang String (khi dùng + với chuỗi)
• Chuyển đổi sang Number (khi dùng -, *, /)
• Chuyển đổi sang Boolean (trong điều kiện if, while)

Chuyển đổi sang String tự động

JavaScript sẽ tự động chuyển đổi Number và Boolean sang String khi chúng được nối (+) với một chuỗi.

Ví dụ minh họa

console.log("5" + 3);   // "53" (số 3 được chuyển thành chuỗi)
console.log(3 + "5");   // "35" (số 3 được chuyển thành chuỗi)
console.log("Hello" + true); // "Hellotrue" (true được chuyển thành chuỗi)
console.log("Age: " + 25);   // "Age: 25" (số 25 được chuyển thành chuỗi)
console.log("Value: " + null); // "Value: null" (null thành chuỗi "null")

Lưu ý:

• Khi sử dụng toán tử +, nếu một trong hai toán hạng là chuỗi, JavaScript sẽ chuyển tất cả thành chuỗi.
• Các toán tử khác như -, *, / không kích hoạt chuyển đổi sang String mà chuyển đổi sang Number.

Chuyển đổi sang Number tự động

JavaScript tự động chuyển đổi chuỗi số và Boolean thành Number khi sử dụng các toán tử -, *, /, %.

Ví dụ minh họa

console.log("5" - 2);  // 3 (chuỗi "5" được chuyển thành số)
console.log("10" * "2"); // 20 (cả hai chuỗi đều được chuyển thành số)
console.log("100" / "10"); // 10 (chuỗi được chuyển thành số)
console.log("5" - true);  // 4 (true thành 1)
console.log("5" - false); // 5 (false thành 0)
console.log("5" * null);  // 0 (null thành 0)
console.log("10px" - 2);  // NaN (chuỗi không thể chuyển thành số)

Lưu ý:

• Khi sử dụng -, *, /, null sẽ được chuyển thành 0, còn true thành 1 và false thành 0.
• "10px" - 2 trả về NaN vì "10px" không phải số hợp lệ.

Chuyển đổi sang Boolean tự động

Trong JavaScript, một số giá trị được coi là falsy (chuyển thành false khi ép kiểu), trong khi các giá trị còn lại là truthy (chuyển thành true).

Danh sách giá trị falsy

Các giá trị sau sẽ tự động chuyển thành false:

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

Mọi giá trị khác đều là truthy (chuyển thành true).

Ví dụ minh họa

if ("Hello") {
    console.log("Chuỗi không rỗng là truthy");
}
// Output: "Chuỗi không rỗng là truthy"

if (0) {
    console.log("Số 0 là truthy"); 
} else {
    console.log("Số 0 là falsy");
}
// Output: "Số 0 là falsy"

if ("") {
    console.log("Chuỗi rỗng là truthy"); 
} else {
    console.log("Chuỗi rỗng là falsy");
}
// Output: "Chuỗi rỗng là falsy"

console.log(Boolean(123));   // true (số khác 0 là truthy)
console.log(Boolean(0));     // false (0 là falsy)
console.log(Boolean(null));  // false
console.log(Boolean(undefined)); // false
console.log(Boolean([]));    // true (array rỗng vẫn là truthy)
console.log(Boolean({}));    // true (object rỗng vẫn là truthy)

let value = "5";
console.log(Number(value) === 5); // true

console.log(Number(null));       // 0
console.log(Number(undefined));  // NaN

console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false

console.log(String(null));       // "null"
console.log(String(undefined));  // "undefined"

console.log(Number("abc"));      // NaN
console.log(parseInt("Hello"));  // NaN
console.log(0 / 0);              // NaN

console.log(NaN === NaN);        // false
console.log(isNaN(NaN));         // true
console.log(Number.isNaN(NaN));  // true

let result = Number("abc") || 0;  // Tránh NaN, gán 0 nếu chuyển đổi thất bại
console.log(result); // 0

let obj = { name: "Alice" };
console.log(String(obj));  // "[object Object]" (mặc định gọi toString())

let numObj = {
    valueOf() {
        return 100;
    }
};
console.log(Number(numObj)); // 100 (valueOf() được gọi)

let obj = {
    toString() {
        return "50";
    }
};

console.log(obj + 10); // "5010" (toString() trả về "50", chuyển thành chuỗi)

let ageInput = "25";  
let age = Number(ageInput);  

console.log(typeof age); // "number"
console.log(age + 5);    // 30

let input = "abc";
let number = Number(input);

if (!isNaN(number)) {
    console.log("Là số hợp lệ:", number);
} else {
    console.log("Giá trị không hợp lệ!");
}
// Output: "Giá trị không hợp lệ!"

let apiResponse = {
    status: "1", 
    price: "200.5"
};

let status = Boolean(Number(apiResponse.status)); // Chuyển thành true/false
let price = parseFloat(apiResponse.price); // Chuyển thành số

console.log(status); // true
console.log(price);  // 200.5

let quantity = prompt("Nhập số lượng sản phẩm:");
quantity = Number(quantity);  

if (!isNaN(quantity) && quantity > 0) {
    console.log(`Bạn đã chọn ${quantity} sản phẩm.`);
} else {
    console.log("Số lượng không hợp lệ!");
}