JavaScript Type Conversions là gì?

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về JavaScript Type Conversion hay chuyển đổi kiểu trong JavaScript thông qua các ví dụ nhé 🤗.

JavaScript Type Conversion là gì?

Trong lập trình, type conversion là quá trình chuyển đổi dữ liệu từ kiểu này sang kiểu khác. Ví dụ: chuyển đổi dữ liệu Boolean thành String.

Trong hầu hết các trường hợp, các toán tử (operators) và hàm (functions) tự động chuyển đổi các giá trị cung cấp cho chúng thành kiểu phù hợp.

Ví dụ: alert sẽ tự động chuyển đổi bất kỳ giá trị nào mà nó nhận được thành một string để hiển thị nó. Khi thực hiện các phép toán sẽ chuyển đổi giá trị thành số.

Có những trường hợp khi chúng ta cần chuyển đổi kiểu của một giá trị thành kiểu mong đợi.

Trong Javascript, có hai loại chuyển đổi kiểu.

1. Implicit Conversion - chuyển đổi kiểu tự động
2. Explicit Conversion - chuyển đổi thủ công

JavaScript Implicit Conversion

Trong một số trường hợp, JavaScript sẽ tự động chuyển đổi kiểu dữ liệu sẵn có thành kiểu phù hợp. Đây được gọi là chuyển đổi tự động - Implicit Conversion.

Khi một chuỗi là toán hạng (operand) của toán tử (operator) +, Javascript sẽ chuyển đổi các toán hạng khác thành chuỗi.

Implicit Conversion to String

let result;

result = '25' + 2; 
console.log(result) // "252"

result = '3' + false; 
console.log(result); // "3false"

result = '0' + undefined; 
console.log(result); // "0undefined"

result = '3' + null; 
console.log(result); // "3null"

Khi một số được + vào một chuỗi, JavaScript sẽ chuyển đổi số đó thành một chuỗi trước khi + (nối).

Implicit Conversion to Number

Trong một biểu thức ta có sử dụng các toán tử như: - , / , *, %. JavaScript sẽ chuyển kiểu của các toán hạng sang kiểu số. Bất kỳ giá trị nào chỉ chứa các ký tự số sẽ được chuyển đổi thành số tương đương của nó, nhưng một giá trị có chứa ký tự không phải là số vd như: null, undefined, 'day la string 123' sẽ trả về NaN.

let result;

result = '14' - '4'; 
// sử dụng toán tử "-" sẽ chuyển tất cả toán hạng sang kiểu số
console.log(result); // 10

result = '4' / 2;
console.log(result); // 2

result = '3' * 3 + ' tuổi'; 
// '3' chuyển thành số, sau đó 3*3 = 9, sau đó 9 chuyển thành '9', và '9' + ' tuổi'
console.log(result); // 9 tuổi 

// non-numeric string 
// giá trị có chứa ký tự không phải là số sẽ chuyển thành NaN
result = 'bye' - 'world';
console.log(result); // NaN

result = 4 - 'bye';
console.log(result); // NaN

result = true + undefined;
console.log(result);  // NaN

Trong biểu thức chứa toán hạng có kiểu Boolean, Javascript sẽ chuyển kiểu toán hạng này, nếu true sẽ chuyển sang giá trị 1, false chuyển sang giá trị 0.

let result;

result = '5' - true;
console.log(result); // 4

result = 2 + true;
console.log(result); // 3

result = 4 + false;
console.log(result); // 4

Trong biểu thức chứa toán hạng có kiểu null, Javascript sẽ chuyển null thành giá trị 0.

let result;

result = -5 + null;
console.log(result);  // -5

result = '15' - null;
console.log(result);  // 15

JavaScript Explicit Conversion

Trong một vài trường hợp, khi chúng ta muốn chuyển đổi kiểu dữ liệu này sang kiểu dữ liệu khác theo nhu cầu của mình (explicit conversion - chuyển đổi thủ công).

Trong JavaScript, chúng ta sẽ thực hiện chuyển kiểu thủ công bằng built-in methods có sẵn.

Dưới đây là một số phương pháp thường được sử dụng.

Chuyển kiểu sang chuỗi

let result;

// Chuyển string sang number
result = Number('2902');
console.log(result); // 2902

result = Number('homiedev')  
console.log(result); // NaN

// empty strings và null return 0
result = Number('')  
console.log(result); // 0

result = Number('       ')  
console.log(result); // 0

// boolean sang number
result = Number(true);
console.log(result); // 1

result = Number(false);
console.log(result); // 0

Để chuyển đổi các kiểu dữ liệu khác thành string, bạn có thể sử dụng String() hoặc toString().

Ví dụ:

//number to string
let result;
result = String(2902);
console.log(result);  // "2902"

result = String(0 + 0);
console.log(result); // "0"

result = String(null);
console.log(result); // "null"

result = String(undefined);
console.log(result); // "undefined"

result = String(NaN);
console.log(result); // "NaN"

result = String(true);
console.log(result); // "true"

result = String(Symbol('test'));
console.log(result); // "Symbol('test')"

// toString()
result = (0).toString();
console.log(result); // "0"

result = false.toString();
console.log(result); // "false"

String() có thể nhận null và undefined và chuyển chúng thành chuỗi. Tuy nhiên, toString() sẽ hiện lỗi khi truyền giá trị null hoặc undefined.

Chuyển kiểu sang boolean

Để chuyển đổi các kiểu dữ liệu khác thành boolean, bạn có thể sử dụng Boolean().

Trong JavaScript, khi chuyển kiểu thành boolean, các giá trị: undefined, null, 0, NaN, '' chuyển thành false. Tất cả các giá trị khác sẽ là true.

Các giá trị mà khi chuyển sang kiểu boolean trả về false được gọi là những giá trị falsy. Các bạn có thể tìm hiểu thêm tại: Tìm hiểu Falsy Values trong JavaScript.

let result;
result = Boolean('');
console.log(result); // false

result = Boolean(0);
console.log(result); // false

result = Boolean(undefined);
console.log(result); // false

result = Boolean('undefined');
console.log(result); // true

result = Boolean(null);
console.log(result); // false

result = Boolean(NaN);
console.log(result); // false

Như vậy là chúng ta đã tìm hiểu xong về JavaScript Type Conversion. Hy vọng các bạn sẽ hiểu chúng và khi áp dụng nó vào các biểu thức sẽ trả về kết quả như mong đợi.

Chúng các bạn học tốt. Hẹn gặp các bạn trong các bài viết sắp tới nhé 😁😁.