Chuyển Đổi Kiểu Dữ Liệu Thường Gặp Trong Javascript

Mặc dù JavaScript là ngôn ngữ không chặt chẽ về kiểu dữ liệu, tuy nhiên nhiều khi chúng ta vẫn cần chuyển đổi từ kiểu dữ liệu này sang kiểu khác. Sau đây là một số cách chuyển đổi dữ liệu trong javascript.

Kiểu dữ liệu trong Javascript

Trong Javascript có 5 kiểu dữ liệu khác nhau có thể chứa các giá trị:

• string
• number
• boolean
• object
• function

Có 6 loại đối tượng:

• Object
• Date
• Array
• String
• Number
• Boolean

Và 2 kiểu dữ liệu không thể chứa các giá trị:

• null
• undefined

Toán tử typeof

 Bạn có thể dùng toán tử typeof để tìm kiểu dữ kiệu của một biến javascript.

Ví dụ:

typeof "John"                 // Returns "string"
typeof 3.14                   // Returns "number"
typeof NaN                    // Returns "number"
typeof false                  // Returns "boolean"
typeof [1,2,3,4]              // Returns "object"
typeof {name:'John', age:34}  // Returns "object"
typeof new Date()             // Returns "object"
typeof function () {}         // Returns "function"
typeof myCar                  // Returns "undefined" *
typeof null                   // Returns "object"
Code language: JavaScript (javascript)

Hãy để ý sẽ thấy:

• Kiểu dữ liệu của NaN là number
• Kiểu dữ liệu của array là object
• Kiểu dữ liệu của date là object
• Kiểu dữ liệu của null là object
• Kiểu dữ liệu của một biến mà chưa được gán giá trị là undefined 

Chuyển đổi kiểu dữ liệu trong Javascript

Các biến javaScript  có thể được chuyển đổi thành một biến mới và một kiểu dữ liệu khác:

• Bằng cách sử dụng một hàm JavaScript
• Tự động bởi chính JavaScript

1. Chuyển đổi bằng Javascript function

Chuyển đổi Numbers sang Strings

Phương thức toàn cục String() có thể chuyển numbers sang strings.

var x=123;
String(x);         // return '123'
String(123);       // return '123'
String(100 + 23);  // return '123'
Code language: JavaScript (javascript)

Phương thức  toString() cũng thực hiện tương tự.

var x=123;
x.toString();           //return '123'
(123).toString();       //return '123'
(100 + 23).toString();  //return '123'
Code language: JavaScript (javascript)

Chuyển đổi Booleans sang Strings

Phương thức toàn cục String() có thể chuyển booleans sang strings

String(false);      // return "false"
String(true);       // return "true"
Code language: JavaScript (javascript)

Phương thức toString() cũng thực hiện tương tự.

false.toString();   // return "false"
true.toString();    // return "true"
Code language: JavaScript (javascript)

Chuyển đổi Dates sang Strings

Phương thức toàn cục String() có thể chuyển dates sang strings.

String(Date());  // return "Sat Jul 25 2020 09:05:53 GMT+0700 (Giờ Đông Dương)"
Code language: JavaScript (javascript)

Phương thức toString() cũng thực hiện tương tự.

Date().toString();  // returns "Sat Jul 25 2020 09:07:02 GMT+0700 (Giờ Đông Dương)"
Code language: JavaScript (javascript)

Chuyển đổi Strings sang Numbers

Phương thức toàn cục String() có thể chuyển strings sang numbers.

Chuỗi chứa số (ví dụ : “3.14”) chuyển sang numbers (3.14).

Chuỗi rỗng chuyển thành 0.

Mọi trường hợp còn lại chuyển sang NaN (Not a Number).

Number("3.14");    // returns 3.14
Number(" 10 ");    // returns 10
Number(" ");       // returns 0
Number("");        // returns 0
Number("3,14");    // returns NaN
Number("99 88");   // returns NaN
Code language: JavaScript (javascript)

Toán tử + 

Toán tử + có thể được sử dụng để chuyển một chuỗi sang số:

var y = "5";      // y is a string
var x = + y;      // x is a number (5)
Code language: JavaScript (javascript)

Nếu biến không thể được chuyển đổi, nó vẫn sẽ trở thành một số, nhưng với giá trị NaN (Not a Number):

var y = "John";   // y is a string
var x = + y;      // x is a number (NaN)
Code language: JavaScript (javascript)

Chuyển đổi Booleans sang Numbers

Phương thức toàn cục  Number() cũng có thể chuyển booleans sang numbers.

Number(false)     // returns 0
Number(true)      // returns 1
Code language: JavaScript (javascript)

Chuyển đổi Dates sang Numbers

Phương thức toàn cục  Number() có thể được dùng để chuyển dates sang numbers.

d = new Date();
Number(d)          // returns 1404568027739
Code language: JavaScript (javascript)

Phương thức getTime() cũng thực hiện tương tự..

d = new Date();
d.getTime()        // returns 1404568027739
Code language: JavaScript (javascript)

2. Tự động chuyển đổi kiểu dữ liệu

Khi JavaScript cố gắng hoạt động trên loại dữ liệu “wrong”, nó sẽ cố gắng chuyển đổi giá trị thành loại “right”.

5 + null    // returns 5         because null is converted to 0
"5" + null  // returns "5null"   because null is converted to "null"
"5" + 2     // returns "52"      because 2 is converted to "2"
"5" - 2     // returns 3         because "5" is converted to 5
"5" * "2"   // returns 10        because "5" and "2" are converted to 5 and 2
Code language: JavaScript (javascript)

Tự động chuyển sang string

JavaScript tự động gọi hàm toString () của biến khi hiển thị một đối tượng hoặc một biến:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"
Code language: JavaScript (javascript)

Numbers và booleans cũng được chuyển, nhưng điều này là không được nhìn thấy:

// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"
Code language: JSON / JSON with Comments (json)

Bảng chuyển đổi kiểu dữ liệu trong JavaScript

Bảng này thể hiện kết quả chuyển đổi các giá trị khác nhau trong Javascript sang Number, String, and Boolean:

Giá trị trong nháy kép biểu thị là giá trị chuỗi.

Giá trị đỏ biểu thị giá trị lập trình viên có thể không mong đợi.

Lời kết

Trên đây là những cách chyển đổi cơ bản giữa các loại dữ liệu thường dùng nhất. Ngoài ra với mỗi loại dữ liệu khác nhau sẽ có thêm những phương thức khác để chuyển đổi nữa,mình sẽ trình bày trong những bài viết sau.

Cảm ơn các bạn đã đọc bài viết, nếu các bạn thấy hay thì ủng hộ giúp mình, có bất kì ý kiến đóng góp gì thì mong các bạn để lại comment ở dưới để chúng ta cùng thảo luận.