Thay đổi kiểu dữ liệu trong Javascript

Thứ Sáu, 10/01/2020

Tram Ho

Thông thường, các toán tử và các hàm sẽ tự động chuyển đổi kiểu của giá trị về đúng.

Ví dụ như: alert sẽ tự động chuyển bất kỳ kiểu dữ liệu nào về string để hiển thị chúng, các toán tử toán học sẽ tự động chuyển về kiểu number để thực hiện tính toán.

Tuy nhiên trong nhiều trường hợp chúng ta muốn chuyển đổi kiểu về kiểu dữ liệu mà chúng ta mong muố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.

String Conversion

1. String()

Khi chúng ta cần chuyển đổi kiểu của một value sang string chúng ta có thể sử dụng String():

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">15</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// string</span>

<span class="token comment">//Hoặc khi ta có 1 mảng</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1,2,3</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// string</span>

<span class="token comment">//Tuy nhiên khi ta áp dụng với Object</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> objToString <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>objToString<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [object Object]</span>

var x = 15;

var y = String(x);

alert(typeof(y)); // string

//Hoặc khi ta có 1 mảng

var a = [1, 2, 3];

var b = String(a);

alert(b); // 1,2,3

alert(typeof(b)); // string

//Tuy nhiên khi ta áp dụng với Object

var obj = {1: 'a', 2: 'b'};

var objToString = String(obj);

alert(objToString); // [object Object]

2. toString()

Ngoài việc sử dụng String() thì chúng ta có vẻ quen thuộc hơn với toString(), nó cũng sẽ ép kiểu các giá trị về string:

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">15</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> y <span class="token operator">=</span> x<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// string</span>

<span class="token comment">//Hoặc khi ta có 1 mảng</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1,2,3</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// string</span>

<span class="token comment">//Và áp dụng với Object cũng chưa ra được kq mong muốn</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> objToString <span class="token operator">=</span> obj<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>objToString<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [object Object]</span>

var x = 15;

var y = x.toString();

//Hoặc khi ta có 1 mảng

var b = a.toString();

alert(typeof(b)); // string

//Và áp dụng với Object cũng chưa ra được kq mong muốn

var objToString = obj.toString();

3. Sử dụng toán tử cộng “+”

Khi sử dụng toán tử, chúng ta đặc biệt phải lưu ý đến toán tử + khi toán hạng có kiểu string.
Khi chúng ta sử dụng toán tử + mà một trong các toán hạng có kiểu là string thì Javascript sẽ cố gắng ép kiểu của toán hạng còn lại về kiểu string. Hãy cùng xem ví dụ dưới đây:

<span class="token comment">// Trong trường hợp có 2 toán hạng, 1 trong 2 toán hạng có kiểu là "string" </span>
<span class="token comment">// thì JS sẽ ép kiểu của toán hạng còn lại về "string"</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"1"</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "11"</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token string">"1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "11"</span>

<span class="token comment">// Trong trường hợp có nhiều hơn 2 toán hạng và 1 trong các toán hạng có kiểu là "string"</span>
<span class="token comment">// thì tùy vào vị trí của toán hạng kiểu "string" mà ta có các kq khác nhau.</span>

<span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token string">"string"</span> <span class="token operator">+</span> <span class="token number">3</span> <span class="token operator">+</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "3string34"</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token string">"string"</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token number">3</span> <span class="token operator">+</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "1string234"</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token number">3</span> <span class="token operator">+</span> <span class="token number">4</span> <span class="token operator">+</span> <span class="token string">"string"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "10string"</span>

<span class="token comment">// Chúng ta sẽ chuyển đổi kiểu như thế nào?</span>
<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">15</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token string">""</span> <span class="token operator">+</span> <span class="token number">15</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "15"</span>

// Trong trường hợp có 2 toán hạng, 1 trong 2 toán hạng có kiểu là "string"

// thì JS sẽ ép kiểu của toán hạng còn lại về "string"

alert("1" + 1); // "11"

// Trong trường hợp có nhiều hơn 2 toán hạng và 1 trong các toán hạng có kiểu là "string"

// thì tùy vào vị trí của toán hạng kiểu "string" mà ta có các kq khác nhau.

alert(1 + 2 + "string" + 3 + 4); // "3string34"

alert(1 + "string" + 2 + 3 + 4); // "1string234"

alert(1 + 2 + 3 + 4 + "string"); // "10string"

// Chúng ta sẽ chuyển đổi kiểu như thế nào?

var x = 15;

var y = "" + 15;

alert(y); // "15"

Numeric Conversion

1. Number()

Khi chúng ta muốn chuyển đổi từ một giá trị khác sang giá trị kiểu number, chúng ta có thể sử dụng Number():

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"123"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 123</span>

<span class="token comment">// Hoặc với các giá trị true/false</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
<span class="token comment">// còn Number(false), Number(''), Number([]) hoặc Number(null) sẽ trả về 0</span>

<span class="token comment">// Khi chúng ta truyền vào Number() một string không phải chứa toàn là số</span>
<span class="token comment">// thì sẽ trả về NaN: Not a Number</span>

<span class="token keyword">var</span> string <span class="token operator">=</span> <span class="token string">"string"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> toNumber <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>string<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>toNumber<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// NaN</span>
<span class="token comment">// Ngoài ra khi truyền vào Object, undefined</span>
<span class="token comment">//hoặc array có length &gt; 2 hoặc có 1 giá trị nhưng không phải number hoặc string là số thì cũng trả về NaN</span>

var x = "123";

var y = Number(x);

// Hoặc với các giá trị true/false

var a = Number(true);

alert(a); // 1

// còn Number(false), Number(''), Number([]) hoặc Number(null) sẽ trả về 0

// Khi chúng ta truyền vào Number() một string không phải chứa toàn là số

// thì sẽ trả về NaN: Not a Number

var string = "string";

var toNumber = Number(string);

alert(toNumber); // NaN

// Ngoài ra khi truyền vào Object, undefined

//hoặc array có length > 2 hoặc có 1 giá trị nhưng không phải number hoặc string là số thì cũng trả về NaN

2. parseInt()/parseFloat()

parseInt() sẽ chuyển đổi kiểu của một string về kiểu number nhưng ở dạng interger (số nguyên)
parseInt() sẽ trả về các số nằm đầu tiên trong giá trị string đó, nếu chuỗi đó không thể chuyển thành number thì nó sẽ trả về NaN. Cùng xét ví dụ sau:

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// NaN</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"10.00"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"10.33"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>
<span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"34 45 66"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 34</span>
<span class="token keyword">var</span> e <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"   60   "</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 60</span>
<span class="token keyword">var</span> f <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"40 years"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 40</span>
<span class="token keyword">var</span> g <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"He was 40"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// NaN</span>

var a = parseInt(true); // NaN

var b = parseInt("10.00"); // 10

var c = parseInt("10.33"); // 10

var d = parseInt("34 45 66"); // 34

var e = parseInt(" 60 "); // 60

var f = parseInt("40 years"); // 40

var g = parseInt("He was 40"); // NaN

parseFloat() sẽ chuyển đổi kiểu của một string về kiểu number nhưng ở dạng float (số thực)
parseFloat() cũng gần giống như parseInt(). Cùng xét ví dụ sau:

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// NaN</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"10"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"10.00"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"10.33"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10.33</span>
<span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"34 45 66"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 34</span>
<span class="token keyword">var</span> e <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"   60   "</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 60</span>
<span class="token keyword">var</span> f <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"40 years"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 40</span>
<span class="token keyword">var</span> g <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"He was 40"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// NaN</span>

var a = parseFloat("10"); // 10

var b = parseFloat("10.00"); // 10

var c = parseFloat("10.33"); // 10.33

var d = parseFloat("34 45 66"); // 34

var e = parseFloat(" 60 "); // 60

var f = parseFloat("40 years"); // 40

var g = parseFloat("He was 40"); // NaN

3. Sử dụng toán tử “+”

Tại sao vừa rồi ở trên chúng ta nói đến việc sử dụng + để chuyển kiểu về string mà dưới đây chúng ta lại dùng nó để chuyển kiểu về number. Chúng ta cùng xem ví dụ dưới đây:

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"15"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token operator">+</span>x<span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// number</span>

var x = "15";

var y = +x;

Khi chúng ta thêm + và trước giá trị thì nó sẽ chuyển đổi về kiểu number không giống như khi chúng ta sử dụng + trong một phép toán.

Và nó cũng trả về các kết quả giống như sử dụng Number() trong các trường hợp cụ thể:

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token operator">+</span><span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// 0 === +"", +[], +null</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token operator">+</span><span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token operator">+</span><span class="token string">"123"</span><span class="token punctuation">;</span> <span class="token comment">// 123</span>
<span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token operator">+</span><span class="token string">"abc"</span><span class="token punctuation">;</span> <span class="token comment">// NaN</span>
<span class="token keyword">var</span> e <span class="token operator">=</span> <span class="token operator">+</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 1 === +["1"]</span>
<span class="token keyword">var</span> f <span class="token operator">=</span> <span class="token operator">+</span><span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// NaN</span>
<span class="token keyword">var</span> g <span class="token operator">=</span> <span class="token operator">+</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// NaN</span>

var a = +false; // 0 === +"", +[], +null

var b = +true; // 1

var c = +"123"; // 123

var d = +"abc"; // NaN

var e = +[1]; // 1 === +["1"]

var f = +["a"]; // NaN

var g = +{}; // NaN

Ngoài ra, khi chúng ta tính toán sử dụng các toán tử -, *, /, %, ** thì Javascript cũng sẽ cố gắng chuyển đổi kiểu các toàn hạng về number.

Boolean Conversion

Thường khi viết code Javascript chúng ta ít khi ép kiểu các giá trị về kiểu Boolean mà thường để tự Javascript ngầm ép kiểu, ví dụ như sau:

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"string"</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//KQ: true</span>

var x = "string";

if(x) {

alert(true);

} else {

alert(false);

}

//KQ: true

Ở đoạn code trên, chúng ta có thể thấy Javascript đã tự động ngầm ép kiểu của x trong if về Boolean để chạy câu lệnh if.

Tuy nhiên, nhiều trường hợp chúng ta muốn lấy giá trị kiểu Boolean của nó để có thể strict equal hoặc cần hàm trả về true hoặc false thì chúng ta sẽ sử dụng Boolean():

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token function">Boolean</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

var x = Boolean(1);

alert(x); // true

Các giá trị khi ép kiểu sang Boolean trả về false: 0, '', false, null, undefined, NaN. Các giá trị này cũng được gọi là các falsy value trong Javascript.

Ngoài các giá trị ở trên thì các giá trị còn lại đều trả về true.

Object Conversion

Như chúng ta đã tìm hiểu ở trên thì khi chuyển đổi kiểu từ object sang các kiểu khác như:

string: [object Object]
number: NaN
boolean: true

Vậy chúng ta phải làm thế nào để chuyển đổi kiểu từ object sang các kiểu dữ liệu nguyên thủy theo cách mà chúng ta mong muốn nhất.

Khi chúng ta ép kiểu một object về string hoặc number thì Javascript sẽ cố gắng tìm và gọi 3 object methods như sau:

Gọi obj[Symbol.toPrimitive](hint) – với key tượng trưng là Symbol.toPrimitive, nếu method này tồn tại.
Dựa vào hint , nếu là string thì nó sẽ cố gọi đến method obj.toString() trước và obj.valueOf() sau nếu obj.toString() không tồn tại.
Nếu hint là number thì nó sẽ cố gọi đến obj.valueOf() trước và obj.toString() sau.

Symbol.toPrimitive

Hãy cùng xét ví dụ:

<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Doe'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
  
  <span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>toPrimitive<span class="token punctuation">]</span><span class="token punctuation">(</span>hint<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> hint <span class="token operator">==</span> <span class="token string">"string"</span> <span class="token operator">?</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span> <span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token function">alert</span><span class="token punctuation">(</span><span class="token function">String</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "John Doe"</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 53</span>

var obj = {

name: 'John Doe',

age: 53,

[Symbol.toPrimitive](hint) {

return hint == "string" ? `${this.name}` : this.age;

}

alert(String(obj)); // "John Doe"

alert(Number(obj)); // 53

Symbol.toPrimitive sẽ cho phép chúng ta quy định giá trị trả về thông qua hint.

toString/valueOf

Methods toString và valueOf là 2 method cũ, nếu không tìm thấy Symbol.toPrimitive thì Javascript sẽ cố gắng gọi đến chúng theo thứ tự:

toString rồi đến valueOf nếu hint là string
valueOf rồi đên toString nếu hint khác string

Theo mặc định, đối với một object đơn giản:

toString method trả về một string: "[object Object]".
valueOf method trả về chính object đó.

<span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">"John"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token function">alert</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [object Object]</span>
<span class="token function">alert</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

var user = {name: "John"};

alert(user); // [object Object]

alert(user.valueOf() === user); // true

Vậy chúng ta muốn giá trị trả về là giá trị mà chúng ta mong muốn giống như sử dụng Symbol.toPrimitive thì chúng ta sẽ cần sử dụng kết hợp toString và valueOf như sau:

<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token string">'John Doe'</span><span class="token punctuation">,</span>
  age<span class="token punctuation">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
  
  <span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

var obj = {

name: 'John Doe',

age: 53,

toString() {

return this.name;

},

valueOf() {

return this.age;

}

Lời kết

Vậy là chúng ta đã tìm hiểu qua về các cách thay đổi kiểu dữ liệu trong Javascript. Vì kiến thức là vô tận nên trong bài không thể tránh khỏi những thiếu sót cũng như nhầm lẫn, mong mọi người thông cảm là nếu góp ý bên dưới để mình có thể đưa ra nhưng bài viết có chất lượng hơn.

Xin cảm ơn mọi người đã đọc bài viết.

References

https://javascript.info/type-conversions

https://javascript.info/operators

https://javascript.info/object-toprimitive

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Thay đổi kiểu dữ liệu trong Javascript

String Conversion

1. String()

2. toString()

3. Sử dụng toán tử cộng “+”

Numeric Conversion

1. Number()

2. parseInt()/parseFloat()

3. Sử dụng toán tử “+”

Boolean Conversion

Object Conversion

Symbol.toPrimitive

toString/valueOf

Lời kết

References

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript