JavaScript là ngôn ngữ lập trình được gõ động (hoặc gõ lỏng lẻo). Nó cho phép bạn khai báo các biến mà không cần chỉ định hoặc xác định loại biến.
Bạn có thể tạo một biến trong JavaScript mà không cần xác định loại giá trị mà bạn có thể lưu trữ trong biến đó. Điều này có thể ảnh hưởng đến chương trình của bạn và gây ra lỗi trong thời gian chạy vì loại có thể thay đổi.
Ví dụ, một biến có thể được khai báo và gán một số. Nhưng khi bạn viết nhiều mã hơn, các giá trị có thể bị đặt nhầm chỗ và bạn có thể gán cho cùng một biến một chuỗi hoặc boolean. Điều này sẽ ảnh hưởng đến mã của bạn khi nó chạy:
let myVariable = 45; // => number
myVariable="John Doe"; // => string
myVariable = false; // => boolean
Như bạn có thể thấy từ ví dụ trên, một biến trong JavaScript có thể thay đổi loại trong suốt quá trình thực thi chương trình. Điều này có thể khó theo dõi với tư cách là một lập trình viên. Đây là một trong những lý do tại sao TypeScript được coi là siêu bộ JavaScript.
Để xác thực các biến bằng cách kiểm tra loại của chúng trong JavaScript, bạn có thể sử dụng typeof nhà điều hành. Kiểm tra loại trong JavaScript không đơn giản đối với các loại dữ liệu không nguyên thủy và các giá trị cụ thể. Đây là lý do tại sao kiểm tra kiểu có thể trở nên khó chịu, đặc biệt đối với các nhà phát triển JS thiếu kinh nghiệm.
Trong bài viết này, bạn sẽ học cách sử dụng typeof nhà điều hành, trường hợp khi bạn không nên sử dụng typeofvà cách tốt nhất để kiểm tra loại trong JavaScript cho các trường hợp như vậy.
Các kiểu dữ liệu JavaScript
Trong JavaScript, các loại dữ liệu được phân loại thành hai nhóm: bạn có các loại dữ liệu nguyên thủy và không nguyên thủy. Ngoài đối tượng là kiểu dữ liệu không nguyên thủy, tất cả các kiểu dữ liệu khác đều là nguyên thủy.
Các loại dữ liệu này bao gồm:
- Chuỗi
- Con số
- Boolean (đúng và sai)
- vô giá trị
- không xác định
- Biểu tượng
Tại thời điểm này, bạn có thể cho rằng tôi đã bỏ qua mảng và hàm. Nhưng không, tôi đã không. Điều này là do cả hai đều là đối tượng.
Cách kiểm tra loại với typeof Toán tử trong JavaScript
Các typeof toán tử chấp nhận một toán hạng đơn (toán tử một ngôi) và xác định loại toán hạng.
Có hai cách bạn có thể sử dụng typeof nhà điều hành. Bạn có thể đánh giá một giá trị hoặc một biểu thức:
typeof(expression);
// Or
typeof value;
Các typeof toán tử sẽ trả về kiểu dưới dạng chuỗi, nghĩa là “số”, “chuỗi”, “boolean”, v.v.
let myVariable = 45;
console.log(typeof myVariable); // returns "number"
console.log(typeof(myVariable)); // returns "number"
console.log(typeof 45); // returns "number"
console.log(typeof(45)); // returns "number"
Điều quan trọng cần biết là bạn phải luôn sử dụng phương thức biểu thức (ở dạng hàm) khi đánh giá một biểu thức thay vì một giá trị đơn lẻ. Ví dụ:
console.log(typeof(typeof 45)); // returns "string"
Ở trên trả về một chuỗi vì đầu ra của typeof 45 được đánh giá là “số” (được trả về dưới dạng chuỗi), sau đó là đầu ra của typeof("number") được đánh giá là “chuỗi”.
Một ví dụ khác là nếu số của bạn có dấu gạch nối trong đó:
// Using expression
console.log(typeof(123-4567-890)); // returns "number"
// Using single value
console.log(typeof 123-4567-890); // returns NaN
Phương thức giá trị đơn sẽ trả về NaN (Không phải là Số) vì trước tiên nó sẽ đánh giá typeof 123, sẽ trả về một chuỗi, “số”. Điều này có nghĩa là bây giờ bạn còn lại với "number" - 4567-890không thể trừ được và sẽ trả về NaN.
Cách kiểm tra loại dữ liệu số
Bây giờ chúng ta hãy khám phá các trường hợp có thể sẽ trả về kiểu dữ liệu số.
Có nhiều giá trị có thể khác nhau mà JavaScript xem xét một số, chẳng hạn như số nguyên dương và số nguyên âm, số không, số dấu phẩy động và vô cực:
console.log(typeof 33); // returns "number"
console.log(typeof -23); // returns "number"
console.log(typeof 0); // returns "number"
console.log(typeof 1.2345); // returns "number"
console.log(typeof Infinity); // returns "number"
Điều quan trọng cần biết là các giá trị như NaN, mặc dù nó có nghĩa là Không phải là Số, sẽ luôn trả về một loại “số”. Ngoài ra, các hàm toán học sẽ có kiểu dữ liệu là số:
console.log(typeof NaN); // returns "number"
console.log(typeof Math.LOG2E); // returns "number"
Cuối cùng, khi bạn sử dụng Number() để chuyển kiểu một cách rõ ràng một chuỗi chứa một số thành một số hoặc thậm chí một giá trị như một chuỗi thực tế không thể chuyển kiểu thành một số nguyên, nó sẽ luôn trả về một số làm kiểu dữ liệu của nó:
// Typecasting value to number
console.log(typeof Number(`123`)); // returns "number"
// Value cannot be typecasted to integer
console.log(typeof Number(`freeCodeCamp`)); // returns "number"
Cuối cùng, khi bạn sử dụng các phương thức như parseInt() và parseFloat(), chuyển đổi một chuỗi thành một số và cũng làm tròn một số, kiểu dữ liệu của nó sẽ là số:
console.log(typeof parseInt(`123`)); // returns "number"
console.log(typeof parseFloat(`123.456`)); // returns "number"
Cách kiểm tra kiểu dữ liệu chuỗi
Chỉ có một vài trường hợp sẽ trả về “chuỗi”. Các trường hợp này là chuỗi rỗng, chuỗi ký tự (đây cũng có thể là số) và nhiều từ:
console.log(typeof ''); // returns "string"
console.log(typeof 'freeCodeCamp'); // returns "string"
console.log(typeof 'freeCodeCamp offers the best free resources'); // returns "string"
console.log(typeof '123'); // returns "string"
Ngoài ra, khi bạn sử dụng String() hàm tạo với bất kỳ giá trị nào:
console.log(typeof String(123)); // returns "string"
Cách kiểm tra kiểu dữ liệu Boolean
Khi bạn kiểm tra true và false các giá trị, nó sẽ luôn trả về kiểu “boolean”. Ngoài ra, khi bạn kiểm tra bất kỳ thứ gì sử dụng Boolean() người xây dựng:
console.log(typeof true); // returns "boolean"
console.log(typeof false); // returns "boolean"
console.log(typeof Boolean(0)); // returns "boolean"
Ngoài ra, khi bạn sử dụng toán tử không kép (!!), hoạt động giống như Boolean() constructor, “boolean” sẽ được trả về:
console.log(typeof !!(0)); // returns "boolean"
Cách kiểm tra loại dữ liệu ký hiệu
Khi bạn sử dụng Symbol() hàm tạo, kiểu dữ liệu “biểu tượng” sẽ được trả về ngay cả khi không có giá trị nào được chuyển. Ngoài ra, khi bạn truyền vào một tham số hoặc sử dụng Symbol.iterator biểu tượng, chỉ định trình vòng lặp mặc định cho một đối tượng:
console.log(typeof Symbol()); // returns "symbol"
console.log(typeof Symbol('parameter')); // returns "symbol"
console.log(typeof Symbol.iterator); // returns "symbol"
Cách kiểm tra loại dữ liệu không xác định
Một biến được cho là undefined khi bạn khai báo nó mà không bắt đầu một giá trị. Khi bạn kiểm tra không xác định, một biến được khai báo không có giá trị (không xác định) và một biến không xác định, chúng sẽ luôn trả về “không xác định”:
// Using the undefined keyword
console.log(typeof undefined); // returns "undefined"
//variable is declared but undefined (has no value intentionally)
let a;
console.log(typeof a); // returns "undefined"
// Using undefined variable
console.log(typeof v); // returns "undefined"
Cho đến giờ, bạn đã học cách kiểm tra các kiểu của tất cả các kiểu dữ liệu nguyên thủy ngoại trừ null. Đó là một chút khó khăn và tôi đã trình bày chi tiết trong bài viết của mình về Giải thích kiểm tra không có giá trị trong JavaScript.
Nhưng tôi sẽ nói ngắn gọn về cách kiểm tra null trong bài viết này để bạn có thể hiểu những điều cơ bản.
Cách kiểm tra kiểu dữ liệu đối tượng
Một số trường hợp nhất định sẽ luôn trả về “đối tượng”, mặc dù trường hợp đó null là một lỗi lịch sử không thể sửa được, trong khi chức năng có lý do kỹ thuật của nó.
console.log(typeof null);
console.log(typeof [1, 2, 3, "freeCodeCamp"]);
console.log(typeof { age: 12, name: "John Doe" });
console.log(typeof [1, 2, 3, 4, 5, 6]);
Như bạn có thể thấy trong ví dụ trên, một mảng sẽ luôn trả về “đối tượng” khi bạn sử dụng typeof hoạt động. Điều này có thể không dễ chịu lắm, nhưng về mặt kỹ thuật, Mảng là một loại đối tượng đặc biệt:
console.log(typeof [1, 2, 3, 'freeCodeCamp']);
Trong ES6, Array.isArray đã được giới thiệu, giúp bạn có thể dễ dàng phát hiện một Mảng:
console.log(Array.isArray([1, 2, 3, "freeCodeCamp"])); // returns true
console.log(Array.isArray({ age: 12, name: "John Doe" })); // returns false
Ngoài ra, trước khi giới thiệu ES6, instanceof toán tử được sử dụng để phát hiện một Mảng:
const isArray = (input) => {
return input instanceof Array;
};
console.log(isArray([1, 2, 3, 'freeCodeCamp'])); // returns true
Cách kiểm tra kiểu dữ liệu Null
Khi bạn sử dụng typeof nhà điều hành để kiểm tra null giá trị, nó trả về “đối tượng” do một lỗi lịch sử không thể sửa được.
Ghi chú: Đừng nhầm lẫn null với không xác định. Một biến được gọi là null nếu nó cố ý chứa giá trị của null. Ngược lại, một biến là undefined khi bạn khai báo mà không khởi tạo giá trị.
Một cách rất đơn giản để phát hiện null là sử dụng phép so sánh chặt chẽ:
const isNull = (input) => {
return input === null;
}
let myVar = null;
console.log(isNull(myVar)); // returns true
Bạn có thể đọc bài viết này về Kiểm tra Null trong JavaScript Giải thích để có thêm tùy chọn và giải thích chi tiết.
Một giải pháp chung để kiểm tra loại trong JavaScript
Trong một bài viết trước của Tapas Adhikary về Cách kiểm tra loại biến hoặc đối tượng trong JS, anh ấy đã thêm và giải thích một giải pháp chung mà bạn có thể sử dụng để kiểm tra loại chính xác hơn:
const typeCheck = (value) => {
const return_value = Object.prototype.toString.call(value);
const type = return_value.substring(
return_value.indexOf(" ") + 1,
return_value.indexOf("]")
);
return type.toLowerCase();
};
Hãy kiểm tra điều này:
console.log(typeCheck([])); // returns 'array'
console.log(typeCheck(new Date())); // returns 'date'
console.log(typeCheck(new String("freeCodeCamp"))); // returns 'string'
console.log(typeCheck(new Boolean(true))); // returns 'boolean'
console.log(typeCheck(null)); // returns 'null'
Kết thúc!
Trong bài viết này, bạn đã học cách kiểm tra các loại trong JavaScript với typeof nhà điều hành.
Bạn cũng đã học được những hạn chế và cách sử dụng các phương pháp khác để khắc phục những hạn chế. Hãy nhớ rằng đối với hầu hết các kiểu dữ liệu nguyên thủy, bạn luôn có thể sử dụng typeof nhà điều hành.
Hãy mã hóa vui vẻ!
