tek4

Chuyển đổi kiểu dữ liệu trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8289 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-88.png" alt="Chuyển đổi kiểu dữ liệu trong JavaScript" width="562" height="339" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ c&ugrave;ng t&igrave;m hiểu về c&aacute;ch chuyển đổi kiểu dữ liệu trong JavaScript c&ugrave;ng với c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>Chuyển đổi kiểu dữ liệu trong JavaScript</h1> <p>Qu&aacute; tr&igrave;nh chuyển đổi kiểu dữ liệu n&agrave;y sang kiểu dữ liệu kh&aacute;c được gọi l&agrave; chuyển đổi kiểu dữ liệu. C&oacute; hai loại chuyển đổi kiểu trong JavaScript.</p> <ul> <li>Chuyển đổi kiểu ngầm định.</li> <li>Chuyển đổi kiểu r&otilde; r&agrave;ng.</li> </ul> <h2>1. Chuyển đổi kiểu dữ liệu ngầm định trong JavaScript</h2> <p>Trong một số t&igrave;nh huống nhất định, JavaScript sẽ tự động chuyển đổi kiểu dữ liệu n&agrave;y sang kiểu dữ liệu kh&aacute;c (kiểu dữ liệu sao cho ph&ugrave; hợp). Đ&acirc;y được gọi l&agrave; chuyển đổi kiểu ngầm định.</p> <p>V&iacute; dụ: Thực hiện c&aacute;c ph&eacute;p to&aacute;n cộng với c&aacute;c kiểu dữ liệu kh&aacute;c nhau để thực hiện việc chuyển đổi kiểu dữ liệu ngầm định.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = 'abc' + 1; console.log(a) a = 6 + 9.5; console.log(a); a = '6' + undefined; console.log(a); a = '6' + null; console.log(a);</pre> <p>Kết quả:</p> <pre>abc1 15.5 6undefined 6null</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Khi một số được cộng th&ecirc;m v&agrave;o một chuỗi k&yacute; tự, JavaScript sẽ chuyển đổi số đ&oacute; th&agrave;nh một chuỗi k&yacute; tự trước khi thực hiện ph&eacute;p nối cho kiểu dữ liệu số v&agrave; kiểu dữ liệu chuỗi k&yacute; tự.</span></strong></p> <p>V&iacute; dụ 2: Thực hiện ph&eacute;p to&aacute;n trừ với c&aacute;c kiểu dữ liệu kh&aacute;c nhau.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let a; a = '9' - '1'; console.log(a); a = '9' - 2; console.log(a);</pre> <p>Kết quả:</p> <pre>8 7 </pre> <p>V&iacute; dụ 3:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = 'abc' - 'ab'; console.log(a); a = '100' - 'ab'; console.log(a);</pre> <p>Kết quả:</p> <pre>NaN NaN</pre> <p>Trong v&iacute; dụ tr&ecirc;n, c&oacute; thể thấy việc trừ giữa kiểu dữ liệu chuỗi k&yacute; tự với chuỗi k&yacute; tự sẽ đưa ra c&aacute;c kết quả l&agrave; kh&ocirc;ng phải dạng kiểu dữ liệu số.</p> <p>V&iacute; dụ 4: Thực hiện ph&eacute;p t&iacute;nh với gi&aacute; trị true v&agrave; false.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = '100' - true; console.log(a); a = 100 + true; console.log(a); a = 100 + false; console.log(a);</pre> <p>Kết quả:</p> <pre>99 101 100</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: JavaScript coi 0 tương đương với gi&aacute; trị l&agrave; false v&agrave; tất cả c&aacute;c số kh&aacute;c 0 tương đương với gi&aacute; trị true. V&agrave;, nếu true được chuyển đổi th&agrave;nh một số, kết quả lu&ocirc;n l&agrave; 1.</span></strong></p> <p>Trong v&iacute; dụ tr&ecirc;n, v&igrave; gi&aacute; trị true sẽ được chuyển đổi sang gi&aacute; trị l&agrave; 1 v&agrave; chuỗi k&yacute; tự số '100' được chuyển th&agrave;nh gi&aacute; trị số 100 v&agrave; thực hiện ph&eacute;p trừ cho nhau, do đ&oacute;, gi&aacute; trị nhận được sẽ l&agrave; 99. Tương tự với c&aacute;c ph&eacute;p t&iacute;nh đằng sau. Gi&aacute; trị false sẽ được chuyển sang gi&aacute; trị 0, do đ&oacute; việc thực hiện ph&eacute;p cộng giữa gi&aacute; trị 100 v&agrave; gi&aacute; trị false sẽ 100.</p> <p>V&iacute; dụ 5:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = 100 + null; console.log(a); a = 100 + undefined; console.log(a); a = true + undefined; console.log(a);</pre> <p>Kết quả:</p> <pre>100 NaN NaN</pre> <h2>2. Chuyển đổi kiểu dữ liệu r&otilde; r&agrave;ng trong JavaScript</h2> <p>Ta cũng c&oacute; thể chuyển đổi kiểu dữ liệu n&agrave;y sang kiểu dữ liệu kh&aacute;c một c&aacute;ch r&otilde; r&agrave;ng t&ugrave;y theo nhu cầu của m&igrave;nh. Chuyển đổi kiểu dữ liệu m&agrave; ta thực hiện theo c&aacute;ch thủ c&ocirc;ng được gọi l&agrave; chuyển đổi kiểu dữ liệu r&otilde; r&agrave;ng.</p> <p>Trong JavaScript, chuyển đổi kiểu r&otilde; r&agrave;ng được thực hiện bằng c&aacute;c phương thức được t&iacute;ch hợp sẵn.</p> <p>Dưới đ&acirc;y l&agrave; một số phương ph&aacute;p chuyển đổi kiểu r&otilde; r&agrave;ng được &aacute;p dụng phổ biến.</p> <h3>1. Chuyển đổi th&agrave;nh kiểu dữ liệu số một c&aacute;ch r&otilde; r&agrave;ng</h3> <p>Để chuyển đổi c&aacute;c chuỗi k&yacute; tự số v&agrave; gi&aacute; trị boolean th&agrave;nh kiểu dữ liệu số, ta c&oacute; thể sử dụng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">Number()</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = Number('100'); console.log(a); a = Number(true); console.log(a); a = Number(false); console.log(a);</pre> <p>Kết quả:</p> <pre>100 1 0</pre> <p>Trong JavaScript, c&aacute;c chuỗi k&yacute; tự rỗng v&agrave; gi&aacute; trị null sẽ được trả về gi&aacute; trị l&agrave; 0.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = Number(''); console.log(a); a = Number(null); console.log(a);</pre> <p>Kết quả:</p> <pre>0 0</pre> <p>Nếu một chuỗi k&yacute; tự l&agrave; một số kh&ocirc;ng hợp lệ, kết quả sẽ l&agrave; NaN (Kh&ocirc;ng phải l&agrave; kiểu dữ liệu số).</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = Number('Javascript'); console.log(a); a = Number(undefined); console.log(a); a = Number(NaN); console.log(a);</pre> <p>Kết quả:</p> <pre>NaN NaN NaN</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Ta cũng c&oacute; thể tạo c&aacute;c số từ c&aacute;c chuỗi bằng c&aacute;ch sử dụng phương thức parseInt(), parseFloat(), to&aacute;n tử một ng&ocirc;i + v&agrave; phương thức Math.floor().</span></strong></p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = parseInt('100'); console.log(a); a = parseFloat('100.2'); console.log(a); a = + '100'; console.log(a); a = Math.floor('100.6'); console.log(a);</pre> <p>Kết quả:</p> <pre>100 100.2 100 100</pre> <h3>2. Chuyển đổi th&agrave;nh kiểu dữ liệu chuỗi k&yacute; tự một c&aacute;ch r&otilde; r&agrave;ng</h3> <p>Để chuyển đổi c&aacute;c kiểu dữ liệu kh&aacute;c th&agrave;nh dữ liệu kiểu chuỗi k&yacute; tự, ta c&oacute; thể sử dụng phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">String()</code>hoặc <code class="EnlighterJSRAW" data-enlighter-language="generic">toString()</code>.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = String(100); console.log(a); a = String(100 + 123); console.log(a); a = String(null); console.log(a); a = String(undefined); console.log(a); a = String(NaN); console.log(a); a = String(true); console.log(a); a = (100).toString(); console.log(a); a = false.toString(); console.log(a);</pre> <p>Kết quả:</p> <pre>100 223 null undefined NaN true 100 False</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Phương thức String() nhận gi&aacute; trị null v&agrave; undefined v&agrave; chuyển đổi ch&uacute;ng th&agrave;nh chuỗi k&yacute; tự. Tuy nhi&ecirc;n, phương thức toString() sẽ th&ocirc;ng b&aacute;o lỗi khi truyền gi&aacute; trị null.</span></strong></p> <h3>3. Chuyển đổi sang kiểu dữ liệu Boolean một c&aacute;ch r&otilde; r&agrave;ng</h3> <p>Để chuyển đổi c&aacute;c kiểu dữ liệu kh&aacute;c th&agrave;nh kiểu dữ liệu Boolean, ta c&oacute; thể sử dụng phương thức Boolean(). Trong JavaScript, c&aacute;c gi&aacute; trị l&agrave; undefined, null, 0, NaN, '' sẽ được chuyển th&agrave;nh gi&aacute; trị false.</p> <p>V&iacute; dụ: Chuyển đổi sang kiểu dữ liệu Boolean.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = Boolean(''); console.log(a); a = Boolean(0); console.log(a); a = Boolean(undefined); console.log(a); a = Boolean(null); console.log(a); a = Boolean(NaN); console.log(a);</pre> <p>Kết quả:</p> <pre>false false false false false</pre> <p>Tất cả c&aacute;c gi&aacute; trị kh&aacute;c đều trả về gi&aacute; trị l&agrave; true.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">var a; a = Boolean(100); console.log(a); a = Boolean('Javascript'); console.log(a); a = Boolean(' '); console.log(a);</pre> <p>Kết quả:</p> <pre>True True True</pre> <h2>Bảng chuyển đổi kiểu dữ liệu trong JavaScript</h2> <p>Bảng b&ecirc;n dưới đ&acirc;y hiển thị việc chuyển đổi c&aacute;c gi&aacute; trị kh&aacute;c nhau th&agrave;nh kiểu dữ liệu chuỗi k&yacute; tự, kiểu dữ liệu số v&agrave; Boolean trong JavaScript.</p> <table> <tbody> <tr> <td style="text-align: center;">Gi&aacute; trị</td> <td style="text-align: center;">Chuyển đổi th&agrave;nh kiểu dữ liệu chuỗi k&yacute; tự</td> <td style="text-align: center;">Chuyển đổi th&agrave;nh kiểu dữ liệu dạng số</td> <td style="text-align: center;">Chuyển đổi th&agrave;nh kiểu dữ liệu Boolean</td> </tr> <tr> <td style="text-align: center;">1</td> <td style="text-align: center;">"1"</td> <td style="text-align: center;">1</td> <td style="text-align: center;">true</td> </tr> <tr> <td style="text-align: center;">0</td> <td style="text-align: center;">"0"</td> <td style="text-align: center;">0</td> <td style="text-align: center;">false</td> </tr> <tr> <td style="text-align: center;">"1"</td> <td style="text-align: center;">"1"</td> <td style="text-align: center;">1</td> <td style="text-align: center;">true</td> </tr> <tr> <td style="text-align: center;">"0"</td> <td style="text-align: center;">"0"</td> <td style="text-align: center;">0</td> <td style="text-align: center;">true</td> </tr> <tr> <td style="text-align: center;">"ten"</td> <td style="text-align: center;">"ten"</td> <td style="text-align: center;">NaN</td> <td style="text-align: center;">true</td> </tr> <tr> <td style="text-align: center;">true</td> <td style="text-align: center;">"true"</td> <td style="text-align: center;">1</td> <td style="text-align: center;">true</td> </tr> <tr> <td style="text-align: center;">false</td> <td style="text-align: center;">"false"</td> <td style="text-align: center;">0</td> <td style="text-align: center;">false</td> </tr> <tr> <td style="text-align: center;">null</td> <td style="text-align: center;">"null"</td> <td style="text-align: center;">0</td> <td style="text-align: center;">false</td> </tr> <tr> <td style="text-align: center;">undefined</td> <td style="text-align: center;">"undefined"</td> <td style="text-align: center;">NaN</td> <td style="text-align: center;">false</td> </tr> <tr> <td style="text-align: center;">''</td> <td style="text-align: center;">""</td> <td style="text-align: center;">0</td> <td style="text-align: center;">false</td> </tr> <tr> <td style="text-align: center;">' '</td> <td style="text-align: center;">" "</td> <td style="text-align: center;">0</td> <td style="text-align: center;">true</td> </tr> </tbody> </table> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về chuyển đổi kiểu dữ liệu trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>