Chuyển đổi một value sang string trong JavaScript

Trong Javascript, có 3 cách chính để chuyển đổi bất kỳ value nào sang 1 string (chuỗi).
Mỗi cách đều có những ưu thế cũng như nhược điểm riêng.
Cùng theo dõi nhé. :blush:

Ba cách tiếp cận đó là:

1. value.toString()
2. "" + value
3. String(value)

Cách một:

Sẽ không chơi được trong trường hợp value là null hoặc undefined.

Cách hai:

Về cơ bản thì hai cách này tương đương với nhau.

• "" + value: toán tử + hay được dùng để chuyển đổi 1 value khi nó dc bọc quanh bởi các chuỗi không rỗng. Tùy sở thích, có nhiều người thích cách tiếp cận này hơn là cách #3.

• String(value): cách tiếp cận này thì khá là rõ ràng. Áp dụng function String() cho value. Vấn đề duy nhất đó là lời gọi function này sẽ gây chút bối rối cho người xài, đặc biệt đối với những ai có gốc từ Java, bởi vì **String ** cũng là 1 constructor (hàm tạo).

Tuy nhiên function và constructor cho ra những kết quả hoàn toàn khác nhau. Các bạn có thể bật Console trong Developer Tools của Chrome để kiểm tra sự khác biệt này trong các ví dụ nhỏ bên dưới:

[js]
> String("abc") === new String("abc")
false

> typeof String("abc")
‘string’
> String("abc") instanceof String
false

> typeof new String("abc")
‘object’
> new String("abc") instanceof String
true

[/js]

Function sản sinh ra 1 chuỗi – string (đây 1 kiểu dữ liệu cơ bản trong Javascript – primitive). Các bạn chú ý sẽ có 1 vài chỗ mình để nguyên gốc tiếng anh để các bạn nếu có tìm hiểu docs trên mạng thì có thể nắm.

Trong khi constructor lại là 1 instance của kiểu dữ liệu String hay còn gọi là 1 object.

Cái sau thì hầu như không hữu ích mấy trong JS, đó là lý do tại sao bạn thường quên String còn là 1 constructor và chỉ biết đến nó như là 1 cách để chuyển đổi sang chuỗi.

1 điểm khác nhau nhỏ nữa giữa ""+value and String(value)

Đến đây thì bạn đã biết toán tử + và String() chuyển đổi “argument” của chúng thành string.

Nhưng, cách chúng thật sự làm là như thế nào, bạn có biết không?

Chúng làm điều này theo những cách khác nhau đôi chút, nhưng thường dẫn đến cùng 1 kết quả.

1.1 Chuyển đổi 1 kiểu dữ liệu cơ bản thành string

Cả 2 cách tiếp cận đều sử dụng 1 phương thức internal ToString() to chuyển đổi kiểu dữ liệu cơ bản sang string.

Table bên dưới sẽ giải thích cho bạn cách ToString() thao tác trên các kiểu dữ liệu cơ bản.

1.2 Chuyển đổi kiểu dữ liệu object sang string

Cả 2 cách tiếp cận đầu tiên đều chuyển đổi 1 object sang 1 kiểu dữ liệu cơ bản, trước khi chuyển đổi kiểu dữ liệu cơ bản đó sang string.

Tuy nhiên, toán tử + sử dụng phương thức ToPrimitive(Number) (ngoại trừ dates[2]), trong khi String() sử dụng ToPrimitive(String).

• ToPrimitive(Number): để chuyển đổi 1 object obj sang 1 kiểu dữ liệu cơ bản, nó triệu gọi obj.valueOf().
  • Nếu kết quả là primitive, trả về kết quả đó luôn.
  • Ngược lại, nó triệu gọi obj.toString():
    • Nếu kết quả từ method trên là primitive, trả về kết quả đó luôn.
    • Ngược lại thì ném cái lỗi TypeError.
• ToPrimitive(String): hoạt động tương tự cái ở trên, nhưng nó triệu gọi obj.toString() trước khi obj.valueOf() được gọi.

Nhìn thử object trong khai báo bên dưới để thấy sự khác biệt này:

[js]
var obj = {
valueOf: function () {
console.log("valueOf");
return {}; // không phải kiểu cơ bản, đi tiếp
},
toString: function () {
console.log("toString");
return {}; // không phải kiểu cơ bản, đi tiếp
}
};

[/js]

Nào, bật console lên để kiểm chứng thôi:

[js]
> "" + obj
valueOf
toString
TypeError: Cannot convert object to primitive value

> String(obj)
toString
valueOf
TypeError: Cannot convert object to primitive value

[/js]

1.3 Các kết quả thường giống nhau

Điểm khác nhau được mô tả ở trên thì đâu có ai thấy dc trong thực tế.

Đây là lý do:

Hầu hết mọi objects sử dụng kiểu thực thi mặc định của valueOf(), cái này nó trả về this cho mỗi objects.

[js]
> var x = {}
> x.valueOf() === x
true

[/js]

Do đó, ToPrimitive(Number) sẽ bỏ qua method đó và trả về kết quả của toString(), giống như ToPrimitive(String).

Tuy nhiên, nếu 1 object là 1 instance của Boolean, Number hoặc String, thì valueOf() sẽ trả về 1 kiểu dữ liệu cơ bản (kiểu dữ liệu mà được bọc bởi object).

Điều đó có nghĩa là 2 phương thức tính toán kết quả của chúng như sau:

• ToPrimitive(Number) trả về kết quả của việc áp dụng phương thức ToString() lên kết quả của valueOf().
• ToPrimitive(String) trả về kết quả của toString() (kết của việc áp dụng phương thức ToString() lên kiểu dữ liệu cơ bản được bọc).

Vì thế, cả 2 vẫn đưa ta đến La Mã, nhưng khác cách thức chút thôi. :satisfied:

Kết luận

Tôi đã diễn giải cho bạn 3 cách tiếp cận để chuyển đổi 1 value sang kiểu string. Vậy riêng bạn sẽ chọn cách nào?

Còn theo tôi, sử dụng value.toString() sẽ ổn khi bạn chắc chắn value mà bạn đang chuyển đổi sẽ không bao giờ bị null hoặc undefined.

Ngược lại, "" + value và String(value) thì gần như là tương đương rồi. Sử dụng cái nào là tùy sở thích của mỗi người thôi. :smiley:

Cá nhân tôi thì tôi thích dùng String(value) vì nó cực rõ ràng, và cuối cùng cảm ơn bạn đã đọc bài viết này nếu thấy hữu ích hãy chia sẽ!