JavaScript Type Conversion - Chuyển đổi kiểu trong JavaScript

by GokiSoft.Com - 12:26 19/05/2020 3,482 Lượt Xem

Short URL: https://gokisoft.com/1357

Number() chuyển thành một số, String() chuyển thành một chuỗi, Boolean() chuyển thành một Boolean.

Các kiểu dữ liệu trong JavaScript(JavaScript Data Types)

Trong JavaScript có 5 kiểu dữ liệu khác nhau có thể chứa các giá trị:

string
number
boolean
object
function

Có 6 kiểu đối tượng:

Object
Date
Array
String
Number
Boolean

Và hai kiểu dữ liệu không thể chứa giá trị:

null
undefined

Toán tử typeof

Bạn có thể sử dụng toán tử typeof để tìm kiểu dữ liệu của một biến JavaScript.

ví dụ

typeof "John"                 // Returns "string"
typeof 3.14                   // Returns "number"
typeof NaN                    // Returns "number"
typeof false                  // Returns "boolean"
typeof [1,2,3,4]              // Returns "object"
typeof {name:'John', age:34}  // Returns "object"
typeof new Date()             // Returns "object"
typeof function () {}         // Returns "function"
typeof myCar                  // Returns "undefined" *
typeof null                   // Returns "object"

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable, object, function or expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  typeof "john" + "<br>" +
  typeof 3.14 + "<br>" +
  typeof NaN + "<br>" +
  typeof false + "<br>" +
  typeof [1,2,3,4] + "<br>" +
  typeof {name:'john', age:34} + "<br>" +
  typeof new Date() + "<br>" +
  typeof function () {} + "<br>" +
  typeof myCar + "<br>" +
  typeof null;
</script>

</body>
</html>

Xin hãy quan sát:

Kiểu dữ liệu của NaN là number
Kiểu dữ liệu của mảng là object
Kiểu dữ liệu của thời gian là object
Kiểu dữ liệu của null là object
Kiểu dữ liệu của một biến không xác định là undefined *
Kiểu dữ liệu của một biến chưa được gán giá trị cũng là undefined *

Tip: Bạn không thể dùng typeof để xác định nếu một đối tượng JavaScript là một mảng (hoặc một thời gian).

Kiểu dữ liệu của typeof

Toán tử typeof không phải là một biến. Nó là một toán tử. Toán tử ( +-*/ ) không có bất kì kiểu dữ liệu.

Nhưng, toán tử typeof luôn trả về một chuỗi (chứa kiểu của toán hạng).

Thuộc tính constructor(The constructor Property)

Thuộc tính constructor trả về hàm tạo cho toàn bộ các biến JavaScript.

ví dụ

"John".constructor                // Returns function String()  {[native code]}
(3.14).constructor                // Returns function Number()  {[native code]}
false.constructor                 // Returns function Boolean() {[native code]}
[1,2,3,4].constructor             // Returns function Array()   {[native code]}
{name:'John',age:34}.constructor  // Returns function Object()  {[native code]}
new Date().constructor            // Returns function Date()    {[native code]}
function () {}.constructor        // Returns function Function(){[native code]}

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript constructor Property</h2>

<p>The constructor property returns the constructor function for a variable or an 
object.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
  "john".constructor + "<br>" +
  (3.14).constructor + "<br>" +
  false.constructor + "<br>" +
  [1,2,3,4].constructor + "<br>" +
  {name:'john', age:34}.constructor + "<br>" +
  new Date().constructor + "<br>" +
  function () {}.constructor;
</script>

</body>
</html>

Bạn có thể kiểm tra thuộc tính cấu trúc để tìm ra nếu một đối tượng là một Array (chưa từ "Array"):

ví dụ

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}

<html>
<body>

<h2>JavaScript Arrays</h2>

<p>This "home made" isArray() function returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

Hoặc thậm chí dễ dàng hơn, bạn có thể kiểm tra nếu đối tượng đó là một hàm Array :

ví dụ

function isArray(myArray) {
  return myArray.constructor === Array;
}

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Object</h2>
<p>This "home made" isArray() function returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor === Array;
}
</script>

</body>
</html>

Bạn có thể kiểm tra thuộc tính cấu trúc để tìm ra nếu một đối tượng là một Date (chưa từ khóa "Date"):

ví dụ

function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

<p id="demo"></p>

<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>

</body>
</html>

Hoặc còn đơn giản hơn, bạn có thể kiểm tra nếu đối tượng là một hàm Date :

ví dụ

function isDate(myDate) {
  return myDate.constructor === Date;
}

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

<p id="demo"></p>

<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor === Date;
}
</script>

</body>
</html>

Chuyển kiểu trong JavaScript(JavaScript Type Conversion)

Các biến JavaScript có thể được chuyển thành một biến mới với kiểu dữ liệu khác:

Bằng cách sử dụng một trong các hàm JavaScript
Tự động bởi chính JavaScript

Chuyển số thành chuỗi

Phương thức toàn cục String() có thể chuyển số thành chuỗi.

Nó có thể được dùng trên bất kì kiểu số nào, số cố định, các biến, hoặc các biểu thức:

ví dụ

String(x)         // returns a string from a number variable x
String(123)       // returns a string from a number literal 123
String(100 + 23)  // returns a string from a number from an expression

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript String() Method</h2>

<p>The String() method can convert a number to a string.</p>

<p id="demo"></p>

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

Phương thức của số toString() cũng làm y hệt.

ví dụ

x.toString()
(123).toString()
(100 + 23).toString()

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The toString() method converts a number to a string.</p>

<p id="demo"></p>

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

Trong chương phương thức của các số, bạn sẽ tìm thấy nhiều hơn các phương thức có thể sử dụng để chuyển số thành chuỗi:

Phương thức	Mô tả
toExponential()	Trả về một chuỗi, với một số được làm tròn và được viết sử dụng kí hiệu mũ.
toFixed()	Trả về một chuỗi, với một số được làm tròn và được viết với một số thập phân xác định.
toPrecision()	Trả về một chuỗi, với một số được viết với một độ dài xác định.

Chuyển kiểu Boolean thành chuỗi(Converting Booleans to Strings)

Phương thức toàn cục String() có thể chuyển boolean thành chuỗi.

String(false)      // returns "false"
String(true)       // returns "true"

Chuyển kiểu thời gian thành chuỗi(Converting Dates to Strings)

Phương thức String() có thể chuyển đổi thời gian thành chuỗi.

String(Date())  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

Phương thức của Date toString() cũng làm y hệt.

ví dụ

Date().toString()  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

Trong chương các phương thức của thời gian, bạn sẽ tìm thấy nhiều hơn các phương thức có thể được sử dụng để chuyển các thời gian thành chuỗi:

Phương thức	Mô tả
getDate()	Lấy ngày như một số (1-31)
getDay()	Lấy các thứ trong tuần như một số (0-6)
getFullYear()	Lấy bốn kí tự của năm (yyyy)
getHours()	Lấy giờ (0-23)
getMilliseconds()	Lấy mili giây (0-999)
getMinutes()	Lấy phút (0-59)
getMonth()	Lấy tháng (0-11)
getSeconds()	Lấy giây (0-59)
getTime()	Lấy thời gian (mili giây từ tháng 1, 1, 1970)

Chuyển đổi chuỗi thành số

Phương thức toàn cục Number() có thể chuyển chuỗi thành số.

Các chuỗi có thể chứa các số (như "3.14") chuyển thành các số (như "3.14").

Chuỗi rỗng chuyển thành 0.

Mọi thứ khác đều chuyển thành NaN (Không phải số).

Number("3.14")    // returns 3.14
Number(" ")       // returns 0
Number("")        // returns 0
Number("99 88")   // returns NaN

Trong chương các phương thức của chữ số, bạn sẽ tìm thấy nhiều hơn nữa các phương thức có thể được dùng để chuyển chuỗi thành các số:

Phương thức	Mô tả
parseFloat()	Ép kiểu một chuỗi và trả về một số thực dấu phẩy động
parseInt()	Ép kiểu một chuỗi và trả vể một số nguyên

Toán tử + đơn(The Unary + Operator)

ví dụ

var y = "5";      // y is a string
var x = + y;      // x is a number


<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var y = "5";
  var x = + y;
  document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
}
</script>

</body>
</html>

Nếu biến không thể chuyển đổi, nó sẽ vẫn trở thành một số, nhưng với giá trị NaN (Not a Number):

ví dụ

var y = "John";   // y is a string
var x = + y;      // x is a number (NaN)

Chuyển đổi kiểu Boolean thành số(Converting Booleans to Numbers)

Phương thức toàn cục Number() cũng có thể chuyển kiểu boolean thành số.

Number(false)     // returns 0
Number(true)      // returns 1

Chuyển đổi kiểu thời gian thành số(Converting Dates to Numbers)

Phương thức toàn cục Number() có thể được dùng để chuyển kiểu thời gian thành số.

d = new Date();
Number(d)          // returns 1404568027739

Phương thức của thời gian getTime() cũng làm điều tương tự.

d = new Date();
d.getTime()        // returns 1404568027739

(Chuyển kiểu tự động)Automatic Type Conversion

Mỗi khi JavaScript cố gắng tính toán trên một kiểu dữ liệu "sai", nó sẽ cố gắng chuyển giá trị thành "đúng" kiểu.

Kết quả không phải lúc nào cũng như bạn mong muốn:

5 + null    // returns 5         because null is converted to 0
"5" + null  // returns "5null"   because null is converted to "null"
"5" + 2     // returns "52"      because 2 is converted to "2"
"5" - 2     // returns 3         because "5" is converted to 5
"5" * "2"   // returns 10        because "5" and "2" are converted to 5 and 2

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = [];
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>

(Chuyển kiểu chuỗi tự động)Automatic String Conversion

JavaScript tự động gọi hàm toString() của biến khi bạn cố gắng "xuất ra" một đối tượng hoặc một biến:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"

Số và các boolean cũng được chuyển đổi, nhưng điều này cũng không được hiển thị rõ ràng cho lắm:

// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"

Bảng chuyển kiểu JavaScript(JavaScript Type Conversion Table)

Giá trị gốc	Chuyển thành số	Chuyển thành chuỗi	Chuyển thành Boolean
false	0	"false"	false
true	1	"true"	true
0	0	"0"	false
1	1	"1"	true
"0"	0	"0"	true
"000"	0	"000"	true
"1"	1	"1"	true
NaN	NaN	"NaN"	false
Infinity	Infinity	"Infinity"	true
-Infinity	-Infinity	"-Infinity"	true
""	0	""	false
"20"	20	"20"	true
"twenty"	NaN	"twenty"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["twenty"]	NaN	"twenty"	true
["ten","twenty"]	NaN	"ten,twenty"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false