Chuyển đổi Kiểu dữ liệu trong JavaScript

Trong bài hướng dẫn tự học JavaScirpt này, bạn sẽ học cách chuyển đổi kiểu dữ liệu của một giá trị trong JavaScript.

Chuyển đổi Kiểu dữ liệu trong JavaScript

Rất nhiều lập trình viên làm việc với JavaScript hay gặp lỗi bắt nguồn từ việc kiểu dữ liệu không đúng như mong muốn. Chính vì thế, hãy chú ý khi học phần này bạn nhé.

> Tham khảo: KHÓA HỌC LẬP TRÌNH VIÊN (Full stack). Học tập theo lộ trình bài bản, chi tiết dưới sự hướng dẫn của đại diện nhà tuyển dụng (liên kết Đào tạo - Tuyển dụng) của NIIT - ICT Hà Nội. 

1. Chuyển đổi kiểu dữ liệu tự động

Là một ngôn ngữ động, hầu hết, JavaScript tự động chuyển đổi giá trị từ kiểu dữ liệu này sang kiểu dữ liệu khác khi được sử dụng trong biểu thức.

Ví dụ, trong các phép toán, các giá trị được tự động chuyển thành số.

Tuy nhiên, tự động chuyển đổi kiểu dữ liệu có thể mang lại kết quả cuối cùng không như bạn mong đợi:

alert("3" - 2);  // Kết quả: 1 
alert("3" + 2);  // Kết quả: "32" (Bởi vì toán tử + cũng là toán tử nối)
alert(3 + "2");  // Kết quả: "32"
alert("3" * "2");  // Kết quả: 6
alert("10" / "2");  // Kết quả: 5
alert(1 + true);  // Kết quả: 2 (Bởi vì true được chuyển đổi thành 1)
alert(1 + false);  // Kết quả: 1 (Bởi vì false được chuyển đổi thành 0)
alert(1 + undefined);  // Kết quả: NaN
alert(3 + null);  // Kết quả: 3 (Bởi vì null được chuyển đổi thành 0)
alert("3" + null);  // Kết quả: "3null"
alert(true + null);  // Kết quả: 1
alert(true + undefined);  // Kết quả: NaN

Bởi vì có khá nhiều trường hợp như vậy, để đảm bảo an toàn, có những tình huống khi chúng ta cần chuyển đổi thủ công một giá trị từ kiểu dữ liệu này sang kiểu dữ liệu khác.

JavaScript cung cấp một số phương thức khác nhau để thực hiện tác vụ chuyển đổi kiểu dữ liệu đó.

Trong các phần sau chúng ta sẽ thảo luận chi tiết về các phương thức này.

2. Chuyển đổi giá trị thành số

Chuyển đổi số thường được yêu cầu khi chúng ta đọc giá trị từ đầu vào dạng chuỗi như text input.

Tất cả những gì người dùng nhập từ bàn phím đều là text.

Nhưng chúng ta lại mong đợi nó là số hoặc coi nó là số để sử dụng tính toán.

Trong những tình huống như vậy, bạn có thể sử dụng phương thức toàn cục Number() để chuyển đổi chuỗi thành số.

var str = "123";
alert(typeof str); // Kết quả: string

var num = Number(str); // Chuyển đổi chuỗi "123" thành số 123
alert(typeof num); // Kết quả: number

Nếu chuỗi không phải là một số hợp lệ, kết quả sẽ là NaN. Chuỗi rỗng sẽ chuyển đổi thành 0.

Number("10.5")  // Kết quả: 10.5
Number(true)  // Kết quả: 1
Number(false)  // Kết quả: 0
Number(null)  // Kết quả: 0
Number(" 123 ")  // Kết quả: 123
Number(" ")  // Kết quả: 0
Number("")  // Kết quả: 0
Number("123e-1")  // Kết quả: 12.3
Number("0xFF") // Kết quả: 255 (Hệ thập lục phân)
Number("undefined")  // Kết quả: NaN
Number("null")  // Kết quả: NaN
Number("Hello World!")  // Kết quả: NaN

3. Chuyển đổi giá trị thành chuỗi

Tương tự như trên, đối với chuỗi. Bạn có thể sử dụng phương thức String() để chuyển đổi một giá trị thành một chuỗi.

Ví dụ sau đây sẽ chỉ cho bạn cách chuyển đổi giá trị Boolean thành một chuỗi.

var bool = true;
alert(typeof bool); // Kết quả: boolean

var str = String(bool); // Chuyển đổi thành "true"
alert(typeof str); // Kết quả: string

Phương thức String() có thể được sử dụng trên bất kỳ loại số, biến hoặc biểu thức nào:

String(10.5)  // Trả về "10.5"
String(123)  // Trả về "123"
String(100 + 23)  // Trả về "123"
String(true)  // Trả về "true"
String(false)  // Trả về "false"
String(123e-1)  // Trả về "12.3"
String(0xFF) // Trả về "255"
String(undefined)  // Trả về "undefined"
String(null)  // Trả về "null"

Ngoài ra, một kỹ thuật khác để chuyển đổi số thành chuỗi là sử dụng phương thức toString():

var num = 123;
alert(typeof num); // Kết quả: number

var str = num.toString(); // Chuyển đổi thành "123"
alert(typeof str); // Kết quả: string

4. Chuyển đổi giá trị thành boolean

Chuyển đổi boolean cũng khá dễ dàng. Bạn có thể sử dụng phương thức Boolean() để chuyển đổi bất kỳ giá trị nào thành giá trị Boolean (nghĩa là true hoặc false).

Các giá trị trống trực quan như: 0, null, false, undefined, NaN hoặc một chuỗi rỗng ("") trở thành false.

Các giá trị khác trở thành true, như được hiển thị trong ví dụ ở đây:

Boolean(0) // Trả về false
Boolean(null)  // Trả về false
Boolean(false)  // Trả về false
Boolean(undefined)  // Trả về false
Boolean(NaN)  // Trả về false
Boolean("") // Trả về false
Boolean("0") // Trả về true
Boolean(1) // Trả về true
Boolean(true) // Trả về true
Boolean("false") // Trả về true
Boolean("Hello World!") // Trả về  true
Boolean(" ") // Trả về true

Nếu bạn xem kỹ ví dụ, bạn sẽ thấy phương thức Boolean() trả về true cho chuỗi có số 0 và chuỗi 'false', trong khi nó trả về false đối với các giá trị 0 và false.

Bởi vì, trong một số ngôn ngữ lập trình (cụ thể là PHP), chuỗi '0' được coi là false. Nhưng trong JavaScript, một chuỗi không rỗng luôn là true.

Có nghĩa là chỉ cần không rỗng thì là true, bất kể là chuỗi "0" hay là chuỗi "false"

5. Chuyển đổi object về kiểu nguyên thủy

Tất cả các chuyển đổi mà chúng ta đã thấy cho đến nay đều được thực hiện trên các kiểu nguyên thủy (kiểu dữ liệu chỉ có thể chứa một loại giá trị duy nhất tại một thời điểm).

Nhưng điều gì sẽ xảy ra với các kiểu dữ liệu phức tạp như đối tượng (object), chúng ta hãy thử xem.

JavaScript tự động thực hiện chuyển đổi đối tượng thành chuỗi khi chúng ta cố gắng in ra một đối tượng như alert(obj) hoặc document.write(obj).

Tương tự như vậy, việc chuyển đổi đối tượng thành số được tự động thực hiện khi chúng tôi cố gắng CỘNG hoặc TRỪ các đối tượng hoặc áp dụng các hàm toán học, chẳng hạn như cộng hoặc trừ các đối tượng date.

Xem thêm: Ngày và giờ trong JavaScript

Đây là một ví dụ:

var date1 = new Date(2020, 09, 12);
document.write(date1);
// Hiển thị dạng chuỗi:
// Mon Oct 12 2020 00:00:00 GMT+0700 (Giờ Đông Dương)

var date2 = new Date(2002, 09, 12);
var time = date1 - date2;
document.write(+ time) // Hiển thị dạng mili giây: 568080000000	

Bạn cũng có thể thực hiện chuyển đổi đối tượng thành chuỗi theo cách thủ công bằng phương thức toString()

Phương thức này trả về biểu diễn dạng chuỗi của đối tượng.

Ngoài ra, bạn có thể sử dụng phương thức valueOf() trên một số đối tượng như Date để thực hiện chuyển đổi đối tượng thành số.

Đây là một ví dụ:

var arr = [1, 2, 3];
document.write(arr.toString() + "<br>");
// Kết quả: "1,2,3"
    
var d = new Date(2020, 9, 19);
document.write(d.toDateString() + "<br>");
// Kết quả: date like Sun Jun 24 2018 00:00:00

document.write(d.valueOf());
// Kết quả: 1529778600000

Lưu ý: Chuyển đổi đối tượng sang Boolean là không có ý nghĩa, vì tất cả các đối tượng (bao gồm cả mảng và hàm) đều là true trong ngữ cảnh boolean. Vì thế, chỉ có chuyển đổi chuỗi và số.

6. Chuyển đổi kiểu dữ liệu bằng toán tử

Một số toán tử JavaScript nhất định, chẳng hạn như toán tử + và -, cũng có thể được sử dụng để thực hiện chuyển đổi kiểu dữ liệu.

Hãy xem minh họa trong ví dụ sau:

var x = "10"; // x là một chuỗi
var y = +x;
alert(typeof(y)); // Kết quả: number
alert(y); // Kết quả: 10

var x = 10; // x là một số
var y = x + "";
alert(typeof(y)); // Kết quả: string
alert(y); // Kết quả: 10

var x = "15"; // x là một chuỗi
var y = x - 0;
alert(typeof(y)); // Kết quả: number
alert(y); // Kết quả: 15

var x = "123"; x là một chuỗi
alert(typeof(!!x)); // Kết quả: boolean
alert(!!x); // Kết quả: true

var x = "Hello World!";
var y = +x;
alert(typeof(y));// Kết quả: number
alert(y); // Kết quả: NaN

Qua bài hướng dẫn này, mình hy vọng bạn đã hiểu những kiến ​​thức cơ bản về chuyển đổi kiểu dữ liệu trong JavaScript.

Ngoài ra, bạn có thể đọc thêm về Các kiểu dữ liệu trong JavaScript để biết thêm về kiểu dữ liệu bạn nhé.