Tìm hiểu JavaScript Type Conversion (chi tiết)
JavaScript Data Types
Trong Javascript có 5 kiểu dữ liệu có thể bao gồm giá trị:
- string
- boolean
- object
- number
- function
Trong kiểu Object có 3 kiểu dữ liệu khác:
- Object
- Date
- Array
Và 2 kiểu dữ liệu không thể chứa giá trị:
- null
- undefined
The typeof Operator
Javasctipt cung cấp toán tử typeof để giúp ta kiếm tra kiểu dữ liệu của biến.
Bài viết này được đăng tại [free tuts .net]
var content = '"Freetut" - ' + typeof "Freetut" + "<br>"; content += "3.14 - " + typeof 3.14 + "<br>"; content += "NaN - " + typeof NaN + "<br>"; content += "false - " + typeof false + "<br>"; content += "[1,2,3,4] - " + typeof [1,2,3,4] + "<br>"; content += "{name:'John', age:34} - " + typeof {name:'John', age:34} + "<br>"; content += "Date() - " + typeof new Date() + "<br>"; content += "function () {} - " + typeof function () {} + "<br>"; content += "null - " + typeof null + "<br>"; content += "Freetut - " + typeof Freetut + "<br>";
Qua ví dụ trên, có thể nhận 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 biến chưa được định nghĩa là undefined.
- Kiểu dữ liệu của biến chưa được gán giá trị là undefined.
The Data Type of typeof
Typeof không phải là một biến, nó là một toán tử. Các toán tử( +, -, *, /) không có kiểu dữ liệu.
Tuy nhiên, toán tử Typeof luôn luôn trả về một chuỗi đại diện cho kiểu dữ liệu của biến mà nó kiểm tra.
The constructor Property
Thuộc tính constructor sẽ trả về hàm khởi tạo của tất cả các biến trong Javascript.
var content = '"Freetut" - ' + "Freetut".constructor + "<br>"; content += "3.14 - " + 3.14.constructor + "<br>"; content += "NaN - " + NaN.constructor + "<br>"; content += "false - " + false.constructor + "<br>"; content += "[1,2,3,4] - " + [1,2,3,4].constructor + "<br>"; content += "{name:'John', age:34} - " + {name:'John', age:34}.constructor + "<br>"; content += "Date() - " + (new Date()).constructor + "<br>"; content += "function () {} - " + (function () {}).constructor + "<br>";
"Freetut" - function String() { [native code] } 3.14 - function Number() { [native code] } NaN - function Number() { [native code] } false - function Boolean() { [native code] } [1,2,3,4] - function Array() { [native code] } {name:'John', age:34} - function Object() { [native code] } Date() - function Date() { [native code] } function () {} - function Function() { [native code] }
Như vậy, bạn có thể áp dụng thuộc tính constructor để kiểm tra một đối tượng có phải thuộc kiểu Array hay không:
var arr = ["php", "css", "html"]; if (arr.constructor === Array) { var content = 'arr là một mảng'; }else{ var content = 'arr không phải là một mảng'; }
arr là một mảng
Bạn cũng có thể sử dụng thuộc tính constructor để kiểu trả một đối tượng có phải một đối tượng thời gian hay không:
var date = new Date(); if (date.constructor === Date) { var content = 'arr là một đối tượng thời gian'; }else{ var content = 'arr không phải đối tượng thời gian'; }
arr là một đối tượng thời gian
JavaScript Type Conversion
Một biến trong Javascript có thể được chuyển đổi thành một biến khác với kiểu dữ liệu khác bằng 2 cách sau:
- Sử dụng các hàm hỗ trợ trong Javascript(
Number()
,String()
,Boolean()
...). - Sử dụng các phương thức của chính đối tượng đó(
toString
,toNumber
....).
Converting Numbers to Strings
Hàm toàn cục String()
có thể chuyển đổi một số sang kiểu dữ liệu string.
Hàm này có thể sử dụng với bất kì kiểu tham số nào, từ một biến, một số hay một biểu thức:
var variable = 456; var content = " 123 to string = " + String(123) + "<br>"; content += " variable to string = " + String(variable) + "<br>"; content += " 123 + 456 to string = " + String(123 + 456) + "<br>";
Phương thức toString của đối tượng Number cũng tương tự như vậy:
var variable = 456; var content = " 123 to string = " + (123).toString() + "<br>"; content += " variable to string = " + variable.toString() + "<br>"; content += " 123 + 456 to string = " + (123 + 456).toString() + "<br>";
Trong mục Number Function các bạn sẽ được giới thiệu cụ thể về các hàm chuyển đổi kiểu dữ liệu của đối tượng Number như number.toPrecision(), number.toFixed() ...
Converting Booleans to Strings
Hàm toàn cục String() cũng có thể chuyển đổi kiểu Boolean sang kiểu String.
var content = " true to string = " + String(false) + "<br>"; // trả về "true" content += " false to string = " + String(true) + "<br>"; // trả về "false"
Phương thức toString của đối tượng Boolean cũng tương tự:
var content = " true to string = " + true.toString() + "<br>"; // trả về "true" content += " false to string = " + false.toString() + "<br>"; // trả về "false"
Converting Dates to Strings
Hàm toàn cục String()
cũng có thể chuyển đổi một đối tượng thời gian thành kiểu string:
var date = new Date(); var content = " Date() to string = " + String(date) + "<br>"; //trả về kết quả Fri Jun 30 2017 17:43:31 GMT+0700 (SE Asia Standard Time)
Phương thức toString của đối tượng thời gian cũng có chức năng tương tự:
var date = new Date(); var content = " Date() to string = " + date.toString(date) + "<br>"; //trả về kết quả Fri Jun 30 2017 17:43:31 GMT+0700 (SE Asia Standard Time)
Trong mục Date Function các bạn sẽ tìm thấy một số phương thức chuyển đổi thời gian thành chuỗi:
Phương thức | Mô tả |
---|---|
getDate() | Trả về chuỗi đại diện cho ngày trong tháng ( từ 1 đến 31). |
getDay() | Trả chuỗi đại diện cho ngày trong tuần ( từ 0 đến 6, 0 là chủ nhật) |
getFullYear() | Trả về chuỗi đại diện cho số năm. |
getHours() | Trả về chuỗi đại diện cho số giờ. |
getMilliseconds() | Trả về chuỗi đại diện cho số mili giây. |
getMinutes() | trả về chuỗi đại diện cho số phút. |
getMonth() | trả về chuỗi đại diện cho tháng trong năm( từ 0 đến 11). |
getSeconds() | trả về chuỗi đại diện cho số giây() |
getTime() | trả về chuỗi đại diện cho số mili giây (tính từ thời điểm 00:00:00 1/1/1970). |
Converting Strings to Numbers
Hàm toàn cục Number()
sẽ chuyển đổi chuỗi thành một số nếu có thể.
Các chuỗi với nội dung là số như "3.14", "55", "24" sẽ được chuyển thành thành số 3.14, 55, 24.
Chuỗi rỗng sẽ được chuyển thành 0.
Bất kì các chuỗi nào không thể chuyển thành số sẽ được chuyển thành NaN.
var content = '"3.14" to number = ' + Number("3.14") + "<br>"; // trả về 3.14 content += '" " to number = ' + Number(" ") + "<br>";; // trả về 0 content += '"" to number = ' + Number("") + "<br>";; // trả về 0 content += '"99 88" to number = ' + Number("99 88") + "<br>"; // trả về NaN
Trong Number function các bạn có thể tìm thấy 2 phương thức có chức năng tương tự của đối tượng Number như sau:
Phương thức | Mô tả |
---|---|
parseFloat() | Truyền vào một chuỗi và trả về số thập phân. |
parseInt() | Truyền vào một chuỗi và trả về một số nguyên. |
The Unary + Operator
Toán tử + cũng có thể được sử dụng để chuyển đổi kiểu dữ liệu của biến thành kiểu Number:
var y = "5"; // y is a string var x = + y; // x is a number
Nếu biến không thể chuyển về kiểu số, nó vẫn sẽ được chuyển sang kiểu số tuy nhiên sẽ mang giá trị NaN:
var y = "freetuts.net"; // y is a string var x = + y; // x is a number (NaN)
Converting Booleans to Numbers
Hàm toàn cục Number()
cũng có thể chuyển đối tượng Boolean thành kiểu số:
Number(false) // returns 0 Number(true) // returns 1
Converting Dates to Numbers
Hàm Number()
có thể được sử dụng để chuyển đối tượng thời gian thành kiểu Number.
milliSecond = new Date(); Number(milliSecond) // returns 14045680327739
Giá trị trả về là số mili giây tính từ thời điểm 00:00:00 1/1/1970 đến thời gian của đối tượng.
Phương thức getTime()
của đối tượng thời gian cũng có chức năng tương tự:
milliSecond = new Date(); milliSecond.getTime() // returns 14045680327739
Automatic Type Conversion
Khi Javascript thực hiện các phép tính có kiểu dữ liệu sai, nó sẽ cố gắng chuyển đổi kiểu dữ liệu thành kiểu số sau đó thực hiện phép tính.
Chính vì vậy, đôi khi những kết quả sẽ không chính xác:
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
Automatic String Conversion
Javascript sẽ tự động gọi phương thức toString khi bạn muốn xuất ra màn hình giá trị của đố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"
Kiểu Number và kiểu Boolean cũng sẽ được chuyển đổi, tuy nhiên nó sẽ khó được nhận ra:
document.getElementById("demo").innerHTML = myVar; // if myVar = 123 // toString converts to "123" // if myVar = true // toString converts to "true" // if myVar = false // toString converts to "false"
JavaScript Type Conversion Table
Bảng dưới đây sẽ đưa ra kết quả của việc chuyển đổi kiểu dữ liệu trong Javascript của một số loại chuyển đổi như toString, toNumber, toBoolean:
Giá tri gốc | toNumber | toString | toBoolean | DEMO |
---|---|---|---|---|
fasle | 0 | "false" | false | DEMO |
true | 1 | "true" | true | DEMO |
0 | 0 | "0" | false | DEMO |
1 | 1 | "1" | false | DEMO |
"0" | 0 | "0" | true | DEMO |
"1" | 1 | "1" | true | DEMO |
NaN | NaN | "NaN" | false | DEMO |
Infinity | Infinity | "Infinity" | true | DEMO |
-Infinity | -Infinity | "-Infinity" | true | DEMO |
"" | 0 | "" | false | DEMO |
"24" | 24 | "24" | true | DEMO |
"twenty four" | NaN | "twenty four" | true | DEMO |
[ ] | 0 | "" | true | DEMO |
[24] | 24 | "24" | true | DEMO |
[8, 24] | NaN | "8, 24" | true | DEMO |
["ten"] | NaN | "ten" | true | DEMO |
["ten", "fourteen"] | NaN | "ten, fourteen" | true | DEMO |
function(){} | NaN | "function(){}" | true | DEMO |
{ } | NaN | "[Object Object]" | true | DEMO |
null | 0 | null | fasle | DEMO |
undefined | NaN | "undefined" | false | DEMO |
Tham khảo: w3schools.com
Câu hỏi thường gặp liên quan: