Chuyển đổi đối tượng thành nguyên thủy trong javascript

Chào các bạn

Trong bài viết này mình sẽ nói về chuyển đổi object về nguyên thủy như string number bigint boolean symbol null undefined

1let user = {
2    name: "Hồ Quang Trí"
3}
4
5alert(user); // "[object Object]"

alert chức năng hiển thị thông báo. Có sẵng trong trình duyệt.

Cái chúng ta quan tâm bây giờ là chuổi "[object Object]" này từ đâu ra.

Để chuyển đổi một object thành một giá trị nguyên thủy thì javascript thực hiện các bước như sau.

1. javascript tìm và gọi phương pháp Symbol.toPrimitive
2. Nếu không tìm thấy thì tìm phương pháp .toString hoặc .valueOf
3. Nếu không tìm thấy các thứ trên thì chuỗi "[object Object]" được sử dụng

Ví dụ:

• Symbol.toPrimitive

1let user = {
2    name: "Hồ Quang Trí",
3    age: 100,
4    [Symbol.toPrimitive](hint) { // Phương pháp tự động gọi khi chuyển kiểu
5        if(hint === 'string') {
6            return this.name;
7        } if(hint === "number") {
8            return this.age;
9        }
10    }
11}
12
13
14alert(user); // Hồ Quang Trí

Khi chức năng alert gọi. Bắt đầu user chuyển đổi kiểu dữ liệu. Nó tìm ký hiệu Symbol.toPrimitive trong user nếu mà có thì nó bắt đầu so sánh hint === 'string' nếu mà true thì trả về this.name nên nó trả về chuỗi Hồ Quang Trí và kết quả là thông báo nó trên màn hình.

Cũng từ ví dụ đó chúng ta thêm toString với valueOf vào đối tượng có biến user và cùng xem mức độ ưu tiên của nó nhé.

1let user = {
2    name: "Hồ Quang Trí",
3    age: 100,
4    [Symbol.toPrimitive](hint) { // Phương pháp tự động gọi khi chuyển kiểu
5        if(hint === 'string') {
6            return this.name;
7        } if(hint === "number") {
8            return this.age; 
9        }
10    },
11    toString() {
12        return "toString";
13    },
14    valueOf() {
15        return 123;
16    }
17}
18
19
20alert(+user); // 100

Như các bạn thấy ký hiệu Symbol.toPrimitive được ưu tiên hơn nên kết quả là 100.

+user là dùng để chuyển đổi object về thành một number. unary + là viết tắt. Chúng ta có thể viết lại nó như thế này Number(user).

Bây giờ chính là tùy vào sự lựa chọn của chúng ta mà chọn 1 trong 2 để sử dụng

1. Ký hiệu Symbol.toPrimitive
2. Phương pháp toString và valueOf

Từ các ví dụ ở trên các bạn đã hình dung ra chuổi "[object Object]" từ đâu ra rồi đúng không ạ.

Chúng ta có thể đổi tên nó bằng cách

1let user = {
2    name: "Hồ Quang Trí",
3    age: 100,
4    [Symbol.toStringTag]: "User"
5}
6
7
8alert(user); // [object User]

Bây giờ đầu ra thông báo là chuỗi "[object User]" nhờ vào ký hiệu Symbol.toStringTag

Lưu Ý: object chuyển đổi kiểu boolean luôn luôn là true

1let user = {
2    name: "Hồ Quang Trí",
3    age: 100,
4    [Symbol.toStringTag]: "User"
5}
6
7
8if(user) { //  true
9    alert(user); // [object User]
10}

hoặc

1let user = {};
2
3if (user) { // true
4    alert(user); // [object Object]
5}

Các bạn nên ghi nhớ nó nào tâm trí. Để sau này so sánh còn biết đường mà gở lỗi

Vậy câu hỏi đặt ra ở dây là. Chúng ta cần chuyển đổi object về nguyên thủy để làm gì?.

Thật ra tùy biến kết quả đầu ra của object.

Ví dụ:

1. new Date() trả về chuỗi thời gian hiện tại

   1alert(new Date()); // Tue Nov 09 2021 20:54:40 GMT+0700 (Indochina Time)

2. +new Date() trả về số miliseconds đã trôi qua

   1alert(+new Date()); // 1636466189394

Chúng ta nên biết càng nhiều càng tốt. Sau này không áp dụng được cái này thì áp dụng cái kia. Chỉ cần nhớ nó trong tâm trí là có cách tìm kiếm.

Tổng kết

Trong bài viết này mình đã nói đến về chuyển đổi object sang nguyên thủy kiểu string hoặc number.

Các bạn có thể tìm hiểu thêm về nó tại đây Symbol.toPrimitive