Chuyển Đổi Kiểu Dữ Liệu Thường Gặp Trong Javascript
NỘI DUNG BÀI VIẾT
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:
Original Value | Converted to Number | Converted to String | Converted to Boolean |
---|---|---|---|
false | 0 | “false” | false |
true | 1 | “true” | true |
0 | 0 | “0” | false |
1 | 1 | “1” | true |
“0” | 0 | “0” | true |
“000” | 0 | “000” | true |
“1” | 1 | “1” | true |
NaN | NaN | “NaN” | false |
Infinity | Infinity | “Infinity” | true |
-Infinity | -Infinity | “-Infinity” | true |
“” | 0 | “” | false |
“20” | 20 | “20” | true |
“twenty” | NaN | “twenty” | true |
[ ] | 0 | “” | true |
true | 1 | “true” | true |
[20] | 20 | “20” | true |
[10,20] | NaN | “10,20” | true |
[“twenty”] | NaN | “twenty” | true |
[“ten”,”twenty”] | NaN | “ten”,”twenty” | true |
function(){} | NaN | “function(){}” | true |
{ } | NaN | “[object Object]” | true |
null | 0 | “null” | false |
undefined | NaN | “undefined” | false |
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.
Leave a Reply