Xử lý kiểu dữ liệu trong JavaScript hiệu quả

Giới thiệu

Khi làm việc với JavaScript, việc xác định kiểu dữ liệu của đầu vào người dùng là rất quan trọng. Qua bài viết này, tôi sẽ hướng dẫn cách xử lý các kiểu dữ liệu khác nhau trong JavaScript mà không cần đến TypeScript, đặc biệt trong các dự án cá nhân hoặc dự án nhỏ.

Cơ bản về kiểu dữ liệu

Kiểm tra kiểu dữ liệu cơ bản

Để kiểm tra các kiểu dữ liệu cơ bản như chuỗi, số, bigint, boolean, undefined và symbol, bạn có thể sử dụng toán tử typeof. Đây là cách đơn giản để xác định kiểu dữ liệu vì chúng là các kiểu nguyên thủy.

console.log(typeof "Hello World");    // string
console.log(typeof 100);              // number
console.log(typeof 42n);              // bigint
console.log(typeof true);             // boolean
console.log(typeof undefined);        // undefined
console.log(typeof Symbol("id"));     // symbol

Nếu giá trị không phải là kiểu bạn cần, bạn có thể chuyển đổi nó thành kiểu dữ liệu phù hợp bằng cách sử dụng các bộ chuyển đổi.

Chuyển đổi chuỗi

Đối với chuỗi, tôi thường sử dụng hàm String() để chuyển đổi dữ liệu. Mặc dù có thể sử dụng toString(), nhưng các giá trị như null và undefined không có phương thức toString() và sẽ gây ra lỗi loại khi chương trình chạy.

Ví dụ:

function convertToString(value){
  if(typeof value !== 'string')
  {
    let returnValue = String(value);
    return returnValue;
  }
  return value;
}

console.log(convertToString("Hello"));       // "Hello"
console.log(convertToString(145));           // "145"
console.log(convertToString(12n));           // "12"
console.log(convertToString(true));          // "true"
console.log(convertToString(null));          // "null"
console.log(convertToString(undefined));     // "undefined"
console.log(convertToString(Symbol("id")));  // "Symbol(id)"

Chuyển đổi số

Đối với các số, tôi sử dụng hàm Number() vì nó có hiệu suất tốt và giữ cho mã của tôi sạch sẽ. Nhược điểm duy nhất là bạn không thể chuyển đổi Symbol thành số, nhưng tôi chưa bao giờ gặp trường hợp này.

Ví dụ:

function convertToNumber(value){
  if(typeof value !== 'number')
  {
    let returnValue = Number(value);
    return returnValue;
  }
  return value;
}

console.log(convertToNumber("Hello"));   // NaN
console.log(convertToNumber(145));       // 145
console.log(convertToNumber(12n));       // 12
console.log(convertToNumber(true));      // 1
console.log(convertToNumber(null));      // 0
console.log(convertToNumber(undefined)); // NaN

Như bạn thấy, chúng ta nhận được hai NaN (Not a Number). Điều này xảy ra khi một bộ chuyển đổi không thể phân tích giá trị thành số. Chúng ta cũng có thể kiểm tra nếu một giá trị là NaN bằng cách sử dụng phương thức Number.isNaN().

Ví dụ:

Number.isNaN(NaN);       // true
Number.isNaN("hello");   // false
Number.isNaN(undefined); // false
Number.isNaN(123);       // false

Chuyển đổi BigInt

Đối với BigInt, chúng ta có thể sử dụng hàm BigInt(), nhưng không thể sử dụng với chuỗi, null hoặc undefined, vì sẽ gây ra lỗi loại.

Ví dụ:

BigInt(123);     // 123n
BigInt(12n);   // 12n
BigInt(true);    // 1n

Chuyển đổi boolean

Giống như chuỗi và số, boolean cũng có hàm Boolean() để chuyển đổi giá trị thành boolean.

Ví dụ:

function convertToBoolean(value){
  if(typeof value !== 'boolean')
  {
    let returnValue = Boolean(value);
    return returnValue;
  }
  return value;
}

console.log(convertToBoolean("Hello"));    // true
console.log(convertToBoolean(145));        // true
console.log(convertToBoolean(0));          // false
console.log(convertToBoolean(12n));        // true
console.log(convertToBoolean(true));       // true
console.log(convertToBoolean(null));       // false
console.log(convertToBoolean(undefined));  // false

Kiểu dữ liệu phức tạp

Khi làm việc với các kiểu dữ liệu không phải nguyên thủy và null, bạn không thể sử dụng toán tử typeof, vì mọi thứ sẽ trả về là đối tượng.

Ví dụ:

console.log(typeof null);        // object
console.log(typeof [1,2,3]);     // object
console.log(typeof {});          // object
console.log(typeof new Date());  // object

Điều này có thể gây rắc rối nếu bạn đang tìm kiếm một đối tượng và người dùng gửi một giá trị mảng. Vì vậy, hãy sửa lỗi này.

Khi làm việc với null, tốt nhất bạn nên kiểm tra nếu giá trị bằng null, điều này sẽ bắt tất cả các giá trị null. Nếu bạn sử dụng ba dấu bằng, nó sẽ kiểm tra cho null, nhưng nếu bạn muốn kiểm tra cho null hoặc undefined, bạn có thể sử dụng hai dấu bằng.

Ví dụ:

function checkObject(value){
  if(value === null)
  {
     return 'Tôi là null';    
  }
  if(typeof value === 'object')
  {
    return value;
  }
  return 'không phải là đối tượng';
}

console.log(checkObject(null));  // Tôi là null
console.log(checkObject({}));    // {}
console.log(checkObject([]));    // []

Kiểm tra mảng

Mảng cũng trả về dưới dạng đối tượng. Để kiểm tra xem giá trị có phải là mảng hay không, bạn có thể sử dụng phương thức Array.isArray() để xác nhận rằng giá trị trả về là đúng, xác nhận đó là một mảng.

Ví dụ:

console.log(Array.isArray([]));    // true
console.log(Array.isArray({}));    // false
console.log(Array.isArray(null));  // false

Phương pháp kiểm tra kiểu dữ liệu

Phương pháp cuối cùng là kiểm tra đối tượng, nhưng cũng có thể được sử dụng để kiểm tra tất cả các kiểu. Object.prototype.toString.call(yourValue) buộc JavaScript sử dụng toString() gốc từ Object.prototype, cung cấp một chuỗi đáng tin cậy để tiết lộ phân loại nội bộ của giá trị.

Ví dụ:

function getType(value){
  return (
    console.log(Object.prototype.toString.call(value));
  );
}

getType({});            // [object, Object]
getType([]);            // [object, Array]
getType(123);           // [object, Number]
getType("hello");       // [object, String]
getType(Symbol("id"));  // [object, Symbol]
getType(null);          // [object, Null]
getType(undefined);     // [object, Undefined]
getType(() => {});      // [object, Function]
getType(new Date());    // [object, Date]
getType(/abc/);         // [object RegExp]

Nếu bạn muốn không có chuỗi [object, value].

Ví dụ:

function getType(value){
  return (
    console.log(Object.prototype.toString.call(value).slice(8, -1));
  );
}

getType({});            // Object
getType([]);            // Array
getType(123);           // Number
getType("hello");       // String
getType(Symbol("id"));  // Symbol
getType(null);          // Null
getType(undefined);     // Undefined
getType(() => {});      // Function
getType(new Date());    // Date
getType(/abc/);         // RegExp

Những lưu ý khi xử lý kiểu dữ liệu

1. Kiểm tra kỹ kiểu dữ liệu: Luôn đảm bảo kiểm tra đúng kiểu dữ liệu trước khi thực hiện các thao tác.
2. Sử dụng các bộ chuyển đổi an toàn: Tránh sử dụng toString() cho các giá trị như null hoặc undefined.
3. Hiểu rõ về NaN: NaN là một giá trị đặc biệt và có thể gây ra nhiều vấn đề nếu không được xử lý đúng cách.

Kết luận

Việc xử lý kiểu dữ liệu trong JavaScript có thể phức tạp nhưng rất quan trọng. Hy vọng bài viết này đã cung cấp cho bạn những kiến thức cần thiết để làm việc với các kiểu dữ liệu trong JavaScript một cách hiệu quả. Hãy thử áp dụng các kỹ thuật này vào dự án của bạn và chia sẻ trải nghiệm của bạn với cộng đồng!

Câu hỏi thường gặp (FAQ)

1. Tại sao sử dụng typeof không chính xác với null?

   • Bởi vì JavaScript coi null là một đối tượng.

2. Làm thế nào để kiểm tra xem một biến có phải là mảng không?

   • Sử dụng Array.isArray() để xác định.

3. Có cách nào để chuyển đổi một giá trị thành kiểu khác một cách an toàn không?

   • Sử dụng các hàm như String(), Number(), BigInt(), Boolean() để chuyển đổi an toàn.

4. Tại sao tôi không thể chuyển đổi Symbol thành số?

   • Symbol là một kiểu dữ liệu độc nhất và không thể chuyển đổi sang kiểu số.