programming javascript

Sự khác biệt giữa chuyển đổi loại và ép buộc loại trong javascript

Loại ép buộc, loại chuyển đổi, loại typecasting, và loại tung hứng. tất cả các tên khác nhau đề cập đến quá trình chuyển đổi một loại dữ liệu thành một loại dữ liệu khác. Quá trình này có mặt trong hầu hết mọi ngôn ngữ lập trình và là một khái niệm quan trọng trong khoa học máy tính

Mặc dù JavaScript được biết đến là một trong những ngôn ngữ lập trình dễ dàng nhất cho người mới bắt đầu, nhưng nó cũng có thể trở nên khó chịu khi các nhà phát triển mong đợi JavaScript làm một việc và nó lại trả về một việc khác.

Và mặc dù tiêu chuẩn Đặc tả ngôn ngữ ECMAScript có sẵn cho các nhà phát triển để giúp hướng dẫn họ giải quyết các vấn đề này, nhưng việc không đọc và hiểu tiêu chuẩn đặc tả có thể gây ra nhiều thất vọng hơn khi xử lý việc ép buộc kiểu trong JavaScript

Kiểu ép buộc trong JavaScript là một ví dụ về cách ngôn ngữ này có thể tạo ra kết quả không mong muốn khi chúng ta không biết chính xác cách thức hoạt động của nó. Tất cả những ai đã chạm vào dù chỉ một chút mã trong JavaScript đều có thể liên tưởng rằng việc ép kiểu có thể phức tạp

Mặc dù các ví dụ về mã mà chúng tôi trình bày trong bài viết này có vẻ giống như các lỗi mà bản cập nhật phiên bản có thể khắc phục, nhưng lý do chúng tôi xem xét lý do tại sao tính năng cưỡng chế kiểu lại hoạt động như vậy là do nhiều sản phẩm và mã kế thừa phụ thuộc vào các phiên bản JavaScript cũ hơn

Điều này có nghĩa là việc tạo ra các thay đổi đối với ngôn ngữ có thể phá vỡ các sản phẩm và mã kế thừa, và thay vào đó, chúng ta phải tìm hiểu cách điều hướng các quy tắc ép buộc kiểu

Trong bài đăng này, chúng tôi sẽ đề cập đến các loại trong JavaScript và cách sử dụng kiểu ép buộc, giúp chúng tôi lập trình thành công

Các loại trong JavaScript

Chúng ta có thể coi JavaScript là một ngôn ngữ chưa định kiểu, có nghĩa là nó không có kiểu tĩnh. Tuy nhiên, lầm tưởng phổ biến rằng JavaScript không có loại là sai

JavaScript có bảy loại nguyên thủy

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

Tuy nhiên, các biến trong JavaScript không có loại. Bất cứ khi nào chúng ta sử dụng toán tử

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

2 để trả về một loại biến, chúng ta sẽ trả về loại giá trị của biến đó

Bây giờ chúng ta đã làm sáng tỏ một vài quan niệm sai lầm về JavaScript và các loại, chúng ta có thể tìm hiểu thêm về ép buộc loại và cách nó hoạt động trong JavaScript

Loại cưỡng chế

Loại ép buộc trong JavaScript chỉ ép buộc đối với các loại nguyên thủy

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

8 và

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

9. Không có cách nào trong JavaScript để ép buộc một loại giá trị thành

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

6 hoặc

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

JavaScript có hai hình thức cưỡng chế đặc trưng. ép buộc ngầm và ép buộc rõ ràng

Ép buộc tiềm ẩn xảy ra khi JavaScript ép buộc loại giá trị thành loại mong đợi dưới mui xe. Kiểu ép buộc này xảy ra mà nhà phát triển không nhận thấy

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

Ép buộc rõ ràng xảy ra khi chúng ta muốn ép buộc loại giá trị thành một loại cụ thể. Hầu hết thời gian, sự ép buộc rõ ràng trong JavaScript xảy ra bằng cách sử dụng các hàm tích hợp như

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

9 và

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

Khi chúng tôi cố gắng tạo các hoạt động trong JavaScript bằng cách sử dụng các loại giá trị khác nhau, JavaScript sẽ ép buộc các loại giá trị cho chúng tôi một cách ngầm định

Đây là một trong những lý do tại sao các nhà phát triển có xu hướng tránh sự ép buộc ngầm trong JavaScript. Hầu hết thời gian chúng tôi nhận được kết quả không mong muốn từ hoạt động nếu chúng tôi không biết chính xác cách JavaScript ép buộc các loại giá trị

Ép buộc ngầm không tệ như các nhà phát triển thường nghĩ, và trên thực tế, rất hữu ích để viết mã dễ đọc nhưng hiệu quả. Chìa khóa để hiểu đúng cách thức hoạt động của tính năng ép buộc ngầm trong JavaScript là hiểu những gì nó đang thực hiện bên trong

Con số

Có nhiều cách có thể để ép buộc một kiểu nguyên thủy thành một số. Hàm

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

9 ép buộc loại giá trị chuyển đến hàm, sau đó chuyển đến một số. Khi một loại không thể bị ép buộc thành một số, kết quả trả về là

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

Hãy xem xét một số ví dụ về ép buộc rõ ràng bằng cách sử dụng hàm

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

Chúng ta có thể thấy rõ một số kết quả rõ ràng và bất ngờ. Chuyển đổi

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

1 thành một số trả về

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

5 trong khi chuyển đổi

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

0 thành một số trả về

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

2. Cả hai hoạt động sẽ trả về

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

2 vì cả hai loại giá trị rõ ràng không phải là số hợp lệ

Chuyển đổi một chuỗi rỗng thành một số trả về

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

5. Đây là một phần kỳ lạ khác của JavaScript vì loại giá trị này rõ ràng không phải là một số hợp lệ nhưng nó vẫn chuyển đổi thành

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

Các bài viết hay khác từ LogRocket

Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
Chuyển đổi giữa nhiều phiên bản của Node
Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
So sánh NestJS với. Thể hiện. js

Kyle Simpson, tác giả của bộ sách You Don't Know JS, cho biết: “Chuỗi rỗng trở thành 0 là gốc rễ của mọi tội ác cưỡng chế. ”

Mặc dù kết quả mà chúng ta nhận được từ hàm

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

9 có vẻ ngoài dự kiến, nhưng đặc tả ECMAScript nêu rõ những khác biệt này. Nhưng nếu không đọc đặc tả ECMA, các nhà phát triển có thể không nhận ra đây chính là cách JavaScript được viết

Trong ví dụ đầu tiên của chúng tôi, chúng tôi đã nhận được các kết quả khác nhau cho

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

1 và

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

0. Đặc tả ECMAScript Hàm

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

9 với loại giá trị null, nó trả về

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

5 và bất cứ khi nào chúng ta sử dụng cùng một hàm với

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

0, nó sẽ trả về

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

18 là tên chuyển đổi loại mà đặc tả ECMAScript sử dụng khi đề cập đến một hoạt động trong đó một giá trị chuyển đổi thành một số.

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

9 là một đối tượng bao bọc nguyên thủy trong JavaScript chuyển đổi một giá trị thành một số. Điều này cũng tương tự với

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

30, mà chúng tôi sẽ đề cập sau

Dưới đây là danh sách các đối số và kết quả mà hoạt động

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

18 chuyển đổi chúng thành

Trong ví dụ khác của chúng tôi, chúng tôi đã sử dụng hàm

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

9 với một chuỗi trống và nhận được một

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

5. Đây cũng là điều rõ ràng trong đặc tả ECMAScript

Một
String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"
34 trống hoặc chỉ chứa khoảng trắng được chuyển đổi thành +0. – Đặc tả ngôn ngữ ECMAScript 2015

Chuỗi

Để ép buộc một giá trị cho một chuỗi trong JavaScript một cách rõ ràng, chúng ta có thể sử dụng hàm

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

8. Để hoàn toàn ép buộc một giá trị cho một chuỗi, chúng ta có thể sử dụng toán tử

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

36 với bất kỳ toán hạng nào là một chuỗi

Các kiểu nguyên thủy chuyển đổi thành chuỗi như mong đợi

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

Chúng ta nên cẩn thận khi sử dụng ép buộc kiểu khi chúng ta muốn tạo một phép toán và một trong các kiểu toán hạng của chúng ta là một chuỗi

JavaScript trả về hoạt động của chúng tôi dưới dạng một chuỗi khi cách xử lý hoạt động chính xác sẽ gây ra lỗi vì không có cách nào để thực hiện một phép toán bằng cách sử dụng một số và một chuỗi, đây không phải là một số hợp lệ

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

Boolean

Để ép buộc một giá trị thành Boolean một cách rõ ràng trong JavaScript, chúng ta có thể sử dụng hàm

10 + "10" // "1010"
20 + "200" // "20200"
0.212 + "1" // "0.2121"

0. Để hoàn toàn ép buộc một giá trị cho Boolean, chúng ta có thể sử dụng các toán tử logic, chẳng hạn như

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

38,

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

39 và

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

70 trong ngữ cảnh logic

Thông số kỹ thuật của

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

71 rất rõ ràng và hữu ích. Chúng tôi có thể thấy rõ ràng những kết quả mà chúng tôi nhận được tùy thuộc vào loại giá trị mà chúng tôi vượt qua

Danh sách các giá trị giả rất dễ nhớ. Mọi thứ không có trong danh sách đều là giá trị trung thực

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

Như đã nêu trước đây, các toán tử logic cũng ép buộc một loại giá trị thành Boolean

String["42"]; // "42"
String[true]; // "true"
String[false]; // "false"
String[null]; // "null"
String[undefined]; // "undefined"

Phần kết luận

Ép buộc loại là một khái niệm JavaScript cốt lõi được sử dụng trên mọi ứng dụng, API và dịch vụ sử dụng JavaScript

Nói chung, trừ khi bạn theo đuổi sự ép buộc rõ ràng, JavaScript hoàn toàn ép buộc tùy thuộc vào loại giá trị và thao tác được sử dụng. Nhưng bất kể sử dụng ép buộc kiểu ngầm định hay rõ ràng, nó cung cấp cho nhà phát triển sự linh hoạt và giúp mã dễ đọc hơn

Tổng quan ngắn này cung cấp kiến thức cơ bản để hiểu về ép kiểu, tuy nhiên, việc đọc các thông số kỹ thuật ECMAScript có thể cung cấp đánh giá sâu hơn về khái niệm này để hiểu tại sao lại xảy ra kết quả ép kiểu không mong muốn

Đăng NhậpTên Lửa. Gỡ lỗi JavaScript dễ dàng hơn bằng cách hiểu ngữ cảnh

Gỡ lỗi mã luôn là một công việc tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ sửa chúng

LogRocket cho phép bạn hiểu những lỗi này theo những cách mới và độc đáo. Giải pháp giám sát giao diện người dùng của chúng tôi theo dõi mức độ tương tác của người dùng với giao diện người dùng JavaScript của bạn để cung cấp cho bạn khả năng tìm ra chính xác những gì người dùng đã làm dẫn đến lỗi

LogRocket ghi nhật ký bảng điều khiển, thời gian tải trang, dấu vết ngăn xếp, yêu cầu/phản hồi mạng chậm với tiêu đề + nội dung, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn thế

Sự khác biệt giữa kiểu đúc và kiểu ép buộc là gì?

Sự khác nhau cơ bản giữa chuyển kiểu và ép kiểu, i. e. chuyển đổi kiểu được thực hiện "tự động" bởi trình biên dịch trong khi đó, chuyển kiểu phải được lập trình viên "thực hiện rõ ràng". Hai thuật ngữ “ép kiểu” và “chuyển kiểu” xuất hiện khi có nhu cầu chuyển kiểu dữ liệu này sang kiểu dữ liệu khác

Chuyển đổi kiểu trong JavaScript là gì?

Chuyển đổi loại [hoặc ép kiểu] có nghĩa là chuyển dữ liệu từ loại dữ liệu này sang loại dữ liệu khác . Chuyển đổi ngầm định xảy ra khi trình biên dịch [đối với ngôn ngữ được biên dịch] hoặc thời gian chạy [đối với ngôn ngữ tập lệnh như JavaScript] tự động chuyển đổi kiểu dữ liệu. Mã nguồn cũng có thể yêu cầu chuyển đổi diễn ra một cách rõ ràng.

Sự khác biệt giữa == và cái nào cho phép ép buộc kiểu?

!! operator converts both 'true' and 'false' strings to boolean true , since they are non-empty strings. Then, == chỉ cần kiểm tra sự bằng nhau của hai giá trị boolean true mà không có bất kỳ sự ép buộc nào . Toán tử == kích hoạt chuyển đổi số cho một mảng.

Làm cách nào để sử dụng kiểu ép buộc trong JavaScript?

Để ép buộc một giá trị thành chuỗi một cách rõ ràng trong JavaScript, chúng ta có thể sử dụng hàm String[] . Để cưỡng chế ngầm một giá trị cho một chuỗi, chúng ta có thể sử dụng toán tử + với bất kỳ toán hạng nào là một chuỗi. Chúng ta nên cẩn thận khi sử dụng ép buộc kiểu khi chúng ta muốn tạo một phép toán và một trong các kiểu toán hạng của chúng ta là một chuỗi.