JavaScript - Chuyển đổi kiểu

Xin chào các bạn đang học JavaScript! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của việc chuyển đổi kiểu trong JavaScript. Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ dẫn dắt bạn từng bước một, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc thức uống yêu thích của bạn), và chúng ta cùng bắt đầu nhé!

Chuyển đổi kiểu trong JavaScript

Trước khi chúng ta đi vào chi tiết, hãy hiểu thế nào là chuyển đổi kiểu. Hãy tưởng tượng bạn có một hộp Legos, nhưng một số mảnh lại làm bằng gỗ. Để xây lâu đài Lego của bạn, bạn cần chuyển đổi những mảnh gỗ thành những viên gạch Lego. Đó chính là điều mà chuyển đổi kiểu trong JavaScript - thay đổi dữ liệu từ một kiểu này sang kiểu khác.

Trong JavaScript, chúng ta có hai loại chuyển đổi chính:

1. Chuyển đổi ẩn (còn gọi là Ép kiểu)
2. Chuyển đổi 显式 (còn gọi là Ép kiểu rõ ràng)

Hãy cùng khám phá từng loại này chi tiết hơn.

Chuyển đổi ẩn

Chuyển đổi ẩn xảy ra tự động khi JavaScript cố gắng thực hiện một thao tác trên các giá trị có kiểu khác nhau. Nó giống như JavaScript nói, "Đừng lo, tôi đã giải quyết rồi!" và chuyển đổi các kiểu ở hậu cảnh.

Chuyển đổi thành chuỗi (Chuyển đổi ẩn)

JavaScript rất thân thiện khi chuyển đổi thành chuỗi. Nó giống như một người bạn có thể bắt đầu một cuộc trò chuyện với bất kỳ ai!

let num = 5;
let str = "The number is: " + num;
console.log(str); // Output: "The number is: 5"
console.log(typeof str); // Output: "string"

Trong ví dụ này, JavaScript tự động chuyển đổi con số 5 thành chuỗi khi chúng ta sử dụng toán tử + với một chuỗi. Nó như thể JavaScript đã đặt dấu ngoặc kép xung quanh con số cho chúng ta.

Chuyển đổi thành số (Chuyển đổi ẩn)

Khi nói đến số, JavaScript cố gắng hết sức để hiểu điều gì đang xảy ra, giống như một giáo viên toán học giải mã chữ viết lộn xộn của học sinh.

let str = "10";
let num = str - 5;
console.log(num); // Output: 5
console.log(typeof num); // Output: "number"

Ở đây, JavaScript thấy toán tử - và nghĩ, "Aha! Chúng ta đang làm toán!" Nên nó chuyển đổi chuỗi "10" thành số 10 trước khi trừ đi 5.

Chuyển đổi thành boolean (Chuyển đổi ẩn)

JavaScript có một quy tắc đơn giản cho việc chuyển đổi thành boolean: một số giá trị được coi là "thiệt" và những giá trị khác là "dối". Giống như phân loại học sinh thành "có mặt" và "vắng mặt".

if ("Hello") {
console.log("This will run because 'Hello' is truthy");
}

if (0) {
console.log("This won't run because 0 is falsy");
}

Trong các ví dụ này, JavaScript tự động chuyển đổi "Hello" thành true và 0 thành false.

Null chuyển thành số (Chuyển đổi ẩn)

Null là một trường hợp đặc biệt. Khi chuyển đổi thành số, nó trở thành 0. Giống như một học sinh không nộp bài tập về nhà nhưng vẫn nhận được điểm số không.

let x = null;
console.log(+x); // Output: 0

Toán tử unary + cố gắng chuyển đổi null thành số, kết quả là 0.

Undefined với số và boolean (Chuyển đổi ẩn)

Undefined còn phức tạp hơn. Nó giống như một học sinh không chỉ không nộp bài tập về nhà mà thậm chí không có tên trong danh sách lớp học!

let x;
console.log(+x); // Output: NaN (Not a Number)
console.log(Boolean(x)); // Output: false

Khi chuyển đổi thành số, undefined trở thành NaN. Khi chuyển đổi thành boolean, nó trở thành false.

Chuyển đổi 显式

Chuyển đổi 显式 là khi chúng ta, những người lập trình, lấy quyền kiểm soát và nói cho JavaScript chính xác kiểu nào chúng ta muốn. Giống như là đạo diễn của một vở kịch và nói cho các diễn viên chính xác vai trò nào họ phải đóng.

Chuyển đổi thành chuỗi (Chuyển đổi 显式)

Chúng ta có một số phương pháp để chuyển đổi thành chuỗi:

let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";

console.log(str1, typeof str1); // Output: "123" string
console.log(str2, typeof str2); // Output: "123" string
console.log(str3, typeof str3); // Output: "123" string

Tất cả các phương pháp này đều đạt được cùng một kết quả, nhưng String() và toString() rõ ràng hơn về ý định của chúng ta.

Chuyển đổi thành số (Chuyển đổi 显式)

Đối với việc chuyển đổi thành số, chúng ta cũng có các tùy chọn tương tự:

let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;

console.log(num1, typeof num1); // Output: 456 number
console.log(num2, typeof num2); // Output: 456 number
console.log(num3, typeof num3); // Output: 456 number

Number() và parseInt() rõ ràng hơn về điều chúng ta đang cố gắng làm, trong khi toán tử unary + là một cách viết ngắn mà một số nhà phát triển sử dụng.

Chuyển đổi thành boolean (Chuyển đổi 显式)

Chuyển đổi thành boolean rất đơn giản:

let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;

console.log(bool1, typeof bool1); // Output: true boolean
console.log(bool2, typeof bool2); // Output: true boolean

Hàm Boolean() rõ ràng và dễ đọc. Cách viết ngắn với hai dấu chấm than (!!) là một cách viết ngắn mà một số nhà phát triển sử dụng, nhưng nó có thể làm rối loạn cho người mới bắt đầu.

Chuyển đổi ngày thành chuỗi/số

Ngày là một trường hợp đặc biệt trong JavaScript. Chúng có thể được chuyển đổi thành cả chuỗi và số:

let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);

console.log(dateString); // Output: "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // Output: 1684154096000 (milliseconds since January 1, 1970)

Chuyển đổi ngày thành chuỗi cho chúng ta một định dạng dễ đọc, trong khi chuyển đổi thành số cho chúng ta số milliseconds kể từ Unix epoch.

Bảng chuyển đổi trong JavaScript

Để tóm tắt tất cả các phương pháp chuyển đổi chúng ta đã học, đây là một bảng tiện ích:

Giá trị gốc	Đến chuỗi	Đến số	Đến boolean
false	"false"	0	false
true	"true"	1	true
0	"0"	0	false
1	"1"	1	true
"0"	"0"	0	true
"1"	"1"	1	true
NaN	"NaN"	NaN	false
Infinity	"Infinity"	Infinity	true
-Infinity	"-Infinity"	-Infinity	true
""	""	0	false
"20"	"20"	20	true
[ ]	""	0	true
[20]	"20"	20	true
[10,20]	"10,20"	NaN	true
["twenty"]	"twenty"	NaN	true
["ten","twenty"]	"ten,twenty"	NaN	true
function(){}	"function(){}"	NaN	true
{ }	"[object Object]"	NaN	true
null	"null"	0	false
undefined	"undefined"	NaN	false

Và thế là xong! Chúng ta đã cùng nhau hành trình qua thế giới chuyển đổi kiểu trong JavaScript. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các khái niệm này. Ai biết được? Bạn có thể thấy mình thích thú với quá trình biến đổi từ lego thành gỗ và ngược lại!

Chúc các bạn may mắn, những người làm chủ JavaScript tương lai!

Credits: Image by storyset