Chuyển đổi định dạng dữ liệu trong trong JavaScript

JS có hai cấp độ so sánh bằng nhau, cấp độ thứ nhất sử dụng hai dấu == thì hai vế chỉ cần có giá trị giống nhau là sẽ trả về giá trị TRUE.

Ở cấp độ tiếp theo, sử dụng ba dấu === để thực hiện so sánh thì không chỉ yêu cầu giá trị giống nhau mà kiểu dữ liệu cũng phải gống nhau thì mới trả về kết quả TRUE, tức là phép so sánh này chặt hơn (khắt khe hơn).

Ví dụ:

let a = 10;
let b = "10";

Boolean(a==b); // sẽ cho kết quả TRUE, vì dù kiểu dữ liệu một cái là số, một cái là chuỗi, giá trị của nó được xem là bằng nhau.

// Nhưng câu lệnh bên dưới sẽ trả về False:

Bolean(a===b); // vì kiểu dữ liệu khác nhau là đủ để nó là False

OK, bây giờ chúng ta sẽ vào bài với các hàm chuyển đổi dữ liệu để có thể chắc chắn phép so sánh đúng với ý chúng ta.

Number() chuyển đổi thành dạng Số, String() chuyển đổi thành Chuỗi, Boolean() chuyển đổi thành dạng Boolean.


Các định dạng dữ liệu trong JavaScript

Trong JavaScript có 5 kiểu định dạng dữ liệu khác nhau có thể bao gồm các giá trị:

  1. string (chuỗi);
  2. number (số);
  3. boolean (đúng hoặc sai);
  4. object (đối tượng);
  5. function (hàm);

Có ba kiểu objects:

  1. Object (đối tượng);
  2. Date (ngày tháng);
  3. Array (mảng);

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

  1. null;
  2. undefined;

Toán tử typeof

Bạn có thể sử dụng toán tử typeof để tìm định dạng dữ liệu của một biến trong JavaScript.

Ví dụ:

 typeof "Đức Anh"  // Trả về string
 typeof 3.14   // Trả về number
 typeof NaN   // Trả về number
 typeof false  // Trả về boolean
 typeof [1,2,3,4] // Trả về object
 typeof {name:'John', age:34}  // Trả về object
 typeof new Date()  // Trả về object
 typeof function () {}  // Trả về function
 typeof myCar // Trả về undefined (nếu myCar không được khai báo)
 typeof null     // Trả về object

Hãy để ý:

  • Định dạng dữ liệu của NaN là number;
  • Định dạng dữ liệu của mảng là đối tượng;
  • Định dạng dữ liệu của date là đối tượng;
  • Định dạng của Date null là đối tượng;
  • Định dạng của biến không xác định là underfined;

Bạn không thể sử dụng typeof để xác định xem một đối tượng JavaScript là mảng (hoặc một ngày).


Kiểu dữ liệu của typeof

Toán tử 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ó bất kỳ kiểu dữ liệu nào.

Nhưng toán tử typeof luôn luôn trả về một chuỗi bao gồm định dạng của toán hạng.


Thuộc tính khởi tạo

Thuộc tính khởi tạo trả về hàm khởi tạo cho tất cả các biến JavaScript.

Ví dụ:

"John".constructor                 // Trả về hàm String()  { [native code] }
 (3.14).constructor                 // Trả về hàm Number()  { [native code] }
 false.constructor                  // Trả về hàm Boolean() { [native code] }
 [1,2,3,4].constructor              // Trả về hàm Array()   { [native code] }
 {name:'John', age:34}.constructor  // Trả về hàm Object()  { [native code] }
 new Date().constructor             // Trả về hàm Date()    { [native code] }
 function () {}.constructor         // Trả về hàm Function(){ [native code] }

Bạn có thể kiểm tra thuộc tính khởi tạo để biết được một đối tượng có là Mảng hay không (bào gồm từ “Array”):

Ví dụ:

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

Bạn có thể kiểm tra thuộc tính khởi tạo để biết được một đối tượng có là Ngày tháng (Date) hay không? (bao gồm từ “Date”):

Ví dụ:

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

Chuyển đổi định dạng trong JavaScript

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

  • Bằng cách sử dụng hàm JavaScript (bạn có làm chủ được kết quả tốt hơn);
  • Được thực hiện tự động bởi chính JavaScript (rất rủi ro);

Chuyển đổi Số thành Chuỗi

Phương thức toàn cục String() có thể chuyển đổi số thành chuỗi.

Nó có thể sử dụng bất cứ dạng số nào: số thuần tuý, biến hoặc biểu thức:

Ví dụ:

var x = 123;

String(x);         // trả về kết quả là chuỗi 123

String(123);       // trả về kết quả là chuỗi 123 từ số thuần tuý 123 

String(100 + 23)  // trả về kết quả là một chuỗi từ phép tính của biểu thức

Phương thức số toString() cho kết quả tương tự.

Ví dụ:

x.toString();

(123).toString();

(100 + 23).toString();

Trong bài các phương thức của Số, bạn sẽ tìm thấy nhiều phương thức hơn có thể sử dụng để chuyển đổi số thành chuỗi:

Phương thứcMô tả
toExponential()Trả về một chuỗi, với số được làm tròn và được viết dưới dạng số mũ.
toFixed()Trả về một chuỗi, với số được làm tròn và được viết một số được chỉ định số thập phân.
toPrecision()Trả về một chuỗi, với số được viết với độ dài chỉ định

Chuyển đổi Booleans sang dạng Chuỗi

Phương thức toàn cục String() có thể chuyển đổi booleans sang chuỗi.

String(false)        // trả về kết quả "false"

String(true)         // trả về kết quả "true"

Phương thức Booleans toString() cho kết quả tương tự.

false.toString()     // trả về "false"

true.toString()      // trả về "true"

Chuyển đổi Ngày tháng sang dạng Chuỗi

Phương thức toàn cục String() có thể chuyển đổi ngày tháng sang dạng chuỗi.

String(Date())  // trả về Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Phương thức Date toString() cho kết quả tương tự,

Ví dụ:

Date().toString()   // trả về kết quả Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Trong bài viết về Phương thức Ngày tháng, bạn có thể tìm thấy các phương thức có thể được dùng để chuyển đổi dates thành strings:

Phương thứcMô tả
getDate()Lấy một ngày dạng số (1-31)
getDay()Lấy ngày trong tuần dạng số (0-6)
getFullYear()Lấy năm dạng số có 4 chữ số (yyyy)
getHours()Lấy giờ (0-23)
getMilliseconds()Lấy mili giây (0-999)
getMinutes()Lấy phút (0-59)
getMonth()Lấy tháng (0-11)
getSeconds()Lấy giây (0-59)
getTime()Lấy thời gian (tính theo mili giây từ 1 tháng 1, 1970)

Chuyển Chuỗi sang dạng Số

Phương thức toàn cục Number() có thể chuyển đổi chuỗi sang dạng số.

Các chuỗi bao gồm số (như kiểu “3.14”) sẽ chuyển sang dạng số (thành 3.14).

Chuỗi rỗng được chuyển thành 0.

Những chuỗi khác hai kiểu trên sẽ được chuyển về dạng NaN (Not a Number / Không phải số).

Number("3.14")    // trả về kết quả 3.14
Number(" ")       // trả về kết quả 0
Number("")        // trả về kết quả 0
Number("99 88")   // trả về kết quả NaN

Trong bài các phương thức của số trong JavaScript, bạn sẽ học nhiều phương thức hơn có thể sử dụng để chuyển chuỗi thành số:

Phương thứcMô tả
parseFloat()Phân tích một chuỗi và trả về số thực với dấu chấm động
parseInt()Phân tích một chuỗi và trả về một số nguyên

Toán tử đơn +

Toán tử đơn + (toán tử đơn là toán tử chỉ có một toán hạng) có thể được sử dụng để chuyển đổi một biến thành một số:

Ví dụ:

var y = "5";      // y là một chuỗi
var x = + y;      // x là một số

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

Ví dụ:

var y = "Đức Anh";   // y là một chuỗi
var x = + y;      // x là một số (NaN)

Chuyển đổi Booleans sang dạng Số

Phương thức toàn cục Number() có thể chuyển đổi booleans sang dạng số.

Number(false)     // trả về kết quả 0
Number(true)      // trả về kết quả 1

Chuyển đổi định dạng ngày tháng sang dạng Số

Phương thức toàn cục Number() có thể sử dụng để chuyển đổi ngày tháng sang dạng số.

d = new Date();
Number(d)          // trả về 1404568027739

Phương thức ngày tháng getTime() cho kết quả tương tự.

d = new Date();
d.getTime()        // trả về 1404568027739

Nếu bạn nào thắc mắc về con số của getTime được tính như thế nào, thì đó chính là số mili giây tính từ thời điểm ngày 01/01/1970.

1 = 1000 mili giây.


Chuyển đổi định dạng tự động

Khi JavaScript cố gắng xử lý một định dạng “có vấn đề”, nó sẽ cố chuyển giá trị sang định dạng “đúng chuẩn”.

Kết quả không phải lúc nào cũng như bạn mong đợi:

5 + null  // trả về kết quả 5, bởi vì null được chuyển thành 0

"5" + null  // trả về "5null", bởi vì null được chuyển thành "null" - lưu ý 5 ngay từ đầu không phải là dạng số mà là dạng chuỗi

"5" + 2  // trả về 52, bởi vì 2 được chuyển thành "2"

"5" - 2  // trả về 3, bởi vì "5" được chuyển thành 5

"5" * "2" // trả về 10, bởi vì "5" và "2" được chuyển thành 5 và 2

Bạn có thể thấy kiểu chuyển đổi định dạng tự động của JS rất kỳ quái vì nó không thống nhất. Mỗi lúc một kiểu với phép toán cộng trừ nhân chia, thay vì ngồi dữ đoán thì khi thao tác với kiểu dữ liệu nào và không chắc các thao tác trước đó đem lại định dạng dữ liệu như mong đợi thì chúng ta cần phải thực hiện việc chuyển đổi dữ liệu.


Tự động chuyển đổi dạng chuỗi

JavaScript tự động gọi hàm toString() của biến khi bạn cố gắng “xuất” một đối tượng hoặc một biến:

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

// if myVar = {name:"Fjohn"}  // toString chuyển thành "[object Object]"
 // if myVar = [1,2,3,4]       // toString chuyển thành "1,2,3,4"
 // if myVar = new Date()      // toString chuyển thành "Fri Jul 18 2014 09:08:55 GMT+0200"

Số và booleans cũng được chuyển đổi, nhưng điều này không phải dễ nhìn ra:

// if myVar = 123    // toString chuyển thành "123"
// if myVar = true   // toString chuyển thành "true"
 // if myVar = false // toString chuyển thanh "false"

Bảng chuyển đổi định dạng trong JavaScript

Bảng này trình bày kết quả chuyển đổi các giá trị JavaScript khác nhau thành dạng Số, Chuỗi và Boolean:

Giá trị gốcChuyển thành dạng sốChuyển thành dạng chuỗiChuyển thành dạng Boolean
false0“false”false
true1“true”true
00“0”false
11“1”true
“0”0“0”true
“1”1“1”true
NaNNaN“NaN”false
InfinityInfinity“Infinity”true
-Infinity-Infinity“-Infinity”true
“”0“”false
“20”20“20”true
“twenty”NaN“twenty”true
[ ]0“”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
null0“null”false
undefinedNaN“undefined”false

Các giá trị trong ngoặc chỉ đến giá trị string.

Các giá trị có bôi đậm là những giá trị mà có thể các lập trình viên không mong đợi.

Leave a Comment