Làm việc với Javascript chắc hẳn nhiều bạn đã gặp những trường hợp như sau:
1 2 3 4 5 | <span class="token number">1</span> <span class="token operator">*</span> <span class="token string">'foo'</span><span class="token punctuation">;</span> <span class="token comment">//NaN</span> <span class="token number">1</span> <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">//2</span> <span class="token string">'foo'</span> <span class="token operator">*</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//NaN</span> <span class="token string">'foo'</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//'foo1'</span> |
Điều này xảy ra là do cái gọi là Javascript Type Coercion. Có thể hiểu đơn giản là JS luôn cố cưỡng ép kiểu dữ liệu. Ví dụ:
1 2 | <span class="token number">1</span> <span class="token operator">+</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">//1</span> |
Trong ví dụ trên, JS trước tiên sẽ ép kiểu boolean true thành number 1 và sau đó thực hiện phép cộng và ta có được kết quả là 2.
Sử dụng các phép toán với những toán tử như -, *, /, và %sẽ ép kiểu dữ liệu trả về number.
1 2 3 4 5 | <span class="token string">'3'</span> <span class="token operator">-</span> <span class="token string">'2'</span><span class="token punctuation">;</span> <span class="token comment">//1</span> <span class="token string">'2'</span> <span class="token operator">*</span> <span class="token string">'4'</span><span class="token punctuation">;</span> <span class="token comment">//8</span> <span class="token string">'8'</span> <span class="token operator">/</span> <span class="token string">'2'</span><span class="token punctuation">;</span> <span class="token comment">//4</span> <span class="token string">'8'</span> <span class="token operator">%</span> <span class="token string">'3'</span><span class="token punctuation">;</span> <span class="token comment">//2</span> |
Nhưng với toán tử + thì chưa chắc kiểu dữ liệu trả về sẽ là number bởi vì chúng ta có thể sử dụng + để làm phép toán HOẶC ghép các đoạn string lại với nhau. Vì vậy mặc định các phép toán khi sử dụng + sẽ ưu tiên trả về kiểu dữ liệu string.
1 2 3 | <span class="token number">5</span> <span class="token operator">+</span> <span class="token string">'1'</span><span class="token punctuation">;</span> <span class="token comment">//'51'</span> <span class="token number">5</span> <span class="token operator">+</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">//6</span> |
JS còn có một kiểu ép dữ liệu nữa đó là truthiness. Ví dụ bạn dùng if/else với một giá trị nào đó, thì JS có thể ép kiểu dữ liệu của giá trị đó về true hoặc false.
1 2 3 4 5 | <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'true'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Hầu hết các giá trị trong JS đều được ép kiểu về true ngoại trừ 7 giá trị
false0-0NaN""nullundefined
Các giá trị này để được ép kiểu về false