1. Ép kiểu trong JavaScript là gì?

Quá trình chuyển đổi từ kiểu dữ liệu này sang kiểu dữ liệu khác được gọi là chuyển đổi kiểu hay ép kiểu. Có hai loại ép kiểu trong JavaScript:

• Ép kiểu ngầm định
• Ép kiểu tường minh

Trong những bài toán khác nhau với những trường hợp hợp khác nhau. Ta sẽ muốn đưa chúng về kiểu dữ liệu mà ta cần để giải quyết vấn đề đó. Trong bài này chúng ta sẽ tìm hiểu về các cách thay đổi kiểu dữ liệu.

Một số lưu ý khi ép kiểu. Thực ra nó có ở bài trước rồi các bạn không nhớ cũng có thể xem lại nhé.

Dùng Type of để kiểm tra kiểu dữ liệu: Kết quả trả về là tên của đối tượng (kiểu dữ liệu) mà biến đang thuộc về. Đối với các giá trị thông thường như chuỗi, số thì dễ hiểu đó là String và Number. Nhưng đối với các kiểu đặc biệt thì bạn cần chú ý như sau:

• NaN là Number
• Array, Object là Object
• Ngày tháng (Date) là Object
• Null là Object
• Biến chưa gán dữ liệu là undefined.
• Biến chưa được khai báo cũng là undefined.

Dùng constructor để kiểm tra kiểu dữ liệu: mỗi đối tượng trong Js sẽ có một thuộc tính constructor, nó là tên hàm khởi tạo nên bạn có thể tận dụng để kiểm tra kiểu dữ liệu của biến trước khi ép kiểu Js.

2. Ép kiểu chuỗi thành số

Phương thức toàn cục Number()có thể chuyển đổi chuỗi thành số. Các chuỗi chứa số (như “3.14”) chuyển đổi thành số (như 3.14). Chuỗi trống sẽ chuyển đổi thành 0. Bất kỳ thứ gì khác chuyển đổi sẽ thành NaN – không phải số.

Ví dụ:

Number("3.14")    // returns 3.14
Number(" ")       // returns 0
Number("")        // returns 0
Number("99 88")   // returns NaN

Hoặc có thể sử dụng hai hàm:

• parseInt() => Chuyển sang kiểu integer.
• parseFloat() => Chuyển sang kiểu float có dấu phẩy động.

Dùng toán tử + đặt trước chuỗi String cũng giúp ta chuyển từ String sang Number.

<script>
let y = "5";
let x = + y;
document.write(typeof y + "<br>" + typeof x);
</script>

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):

<script>
let y = "Thành";
let x = + y;
document.write(typeof y + "<br>" + typeof x);
</script>

3. Ép kiểu 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ể được sử dụng trên bất kỳ loại số, ký tự, biến hoặc biểu thức nào.

Ví dụ:

<p id="demo"></p>

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>

Phương pháp Số toString()cũng làm như vậy.

<p id="demo"></p>

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

4. Ép kiểu ngày thành số

Phương thức toàn cục Number() có thể được sử dụng để chuyển đổi ngày tháng sang số. Tương tự thì phương pháp ngày tháng getTime() cũng làm như vậy.

d = new Date();
Number(d)          // returns 1404568027739

d = new Date();
d.getTime()        // returns 1404568027739

5. Ép kiểu ngày thành chuỗi

Phương thức toàn cục String()có thể chuyển đổi ngày tháng thành chuỗi. Tương tự thì phương thức Date toString() cũng làm như vậy.

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

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

6. Ép kiểu boolean thành số hoặc chuỗi

Phương thức toàn cục Number()cũng có thể chuyển đổi boolean thành số.

Number(false)     // returns 0
Number(true)      // returns 1

Phương thức toàn cục String()có thể chuyển đổi boolean thành chuỗi. Phương thức Boolean toString()cũng làm như vậy.

false.toString()   // returns "false"
true.toString()    // returns "true"

7. Ép sang kiểu Boolean

Ta có 2 cách ép kiểu như sau:

• sử dụng hàm Boolean.

const number = 100;
Boolean(number); // true

• sử dụng hai lần toán tử phủ định ! .

const number = 100;
 
!!number; // true

8. Tự động ép kiểu dữ liệu

Khi Js 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”. Tức là ta có thể hiểu nôm na cho đơn giản khi Js cố gắng hoạt động trên kiểu dữ liệu “sai”, nó sẽ cố gắng chuyển đổi giá trị sang kiểu “đúng”.

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

Js 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. Numbers và booleans cũng được chuyển, nhưng điều này là không được nhìn thấy.

9. Bảng ép kiểu dữ liệu trong JavaScript

Dưới đây là bảng chuyển đổi giữa các kiểu dữ liệu với nhau. Bạn hãy tham khảo để biết từng trường hợp xảy ra khi sử dụng nhé.

Giá trị trong dấu ngoặc kép cho biết giá trị chuỗi.

Giá trị màu đỏ cho biết giá trị (một số) người lập trình có thể không mong đợi.