IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript Type Conversion - Chuyển đổi kiểu trong JavaScript

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

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

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ứcMô 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ứcMô 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ứcMô 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

false0"false"false
true1"true"true
00"0"false
11"1"true
"0"0"0"true
"000"0"000"true
"1"1"1"true
NaNNaN"NaN"false
InfinityInfinity"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
null0"null"false
undefinedNaN"undefined"false


Giá trị trong dấu ngoặc kép biểu thi giá trị chuỗi.

Giá trị màu đỏ biểu thi giá trị (một vài) lập trình viên có thể không mong đợi.




Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!