Tìm hiểu JavaScript Type Conversion

JavaScript Data Types

Bài viết được đăng tại freetuts.net

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.

Ví dụ RUN
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 NaNnumber.
  • Kiểu dữ liệu của Array object.
  • Kiểu dữ liệu của Date object.
  • Kiểu dữ liệu của Null 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.

Ví dụ RUN
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>";

Kết quả
"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:

Ví dụ RUN
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';
}

Kết quả
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:

Ví dụ RUN
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';
}

Kết quả
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:

Ví dụ RUN
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:

Ví dụ RUN
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.

Ví dụ
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ự:

Ví dụ
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:

Ví dụ
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ự:

Ví dụ
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.

Ví dụ
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:

Ví dụ
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:

Ví dụ
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ố:

Ví dụ
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.

Ví dụ
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ự:

Ví dụ
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:

Ví dụ RUN
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:

Ví dụ
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:

Ví dụ
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 và bài tập

  • Tìm hiểu JavaScript Type Conversion

Nguồn: freetuts.net

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.