ประเภทข้อมูลใน JavaScript

บทความนี้อธิบายประเภทข้อมูลใน JavaScript

YouTube Video

ประเภทข้อมูลใน JavaScript

JavaScript มี ประเภทข้อมูล สำหรับจัดหมวดหมู่ค่า ซึ่งแบ่งได้เป็นสองประเภทหลักคือ ประเภทข้อมูลพื้นฐาน และ ประเภทออบเจกต์ ประเภทข้อมูลกำหนดว่าข้อมูลประเภทใดถูกเก็บในตัวแปร และมีผลต่อวิธีการจัดการข้อมูลดังกล่าว

ประเภทดั้งเดิม

ประเภทข้อมูลพื้นฐานคือประเภทข้อมูลที่เรียบง่ายและแสดง ค่าเดียว JavaScript มีประเภทข้อมูลพื้นฐานทั้งหมด 7 ประเภทดังนี้

number

1let num = 42;
2let pi = 3.14;
3
4console.log("Value of num:", num);
5console.log("Value of pi:", pi);

• number เป็นประเภทสำหรับจัดการค่าตัวเลข รวมถึงเลขจำนวนเต็มและเลขทศนิยม (floating-point numbers) การจัดการค่าที่เกินขอบเขตที่กำหนดจะส่งผลเป็น Infinity หรือ NaN (ไม่ใช่ตัวเลข)

1// Decimal calculations
2console.log(0.1 + 0.2 === 0.3); // false
3console.log(0.1 + 0.2); // 0.30000000000000004
4
5// Calculations with large numbers
6console.log(9007199254740991 + 1); // correct value
7console.log(9007199254740991 + 2); // incorrect value

• ในภาษา JavaScript ตัวเลขถูกแสดงผลเป็นตัวเลขทศนิยมแบบจุดลอย ผลที่ตามมาคือ ทศนิยมบางประเภท (โดยเฉพาะที่ไม่สามารถแทนค่าได้อย่างแม่นยำในระบบไบนารี่) อาจไม่สามารถแสดงผลได้อย่างถูกต้อง
• เมื่อต้องการการคำนวณที่แม่นยำ เช่น ในกรณีของค่าทางการเงิน จำเป็นต้องหลีกเลี่ยงข้อผิดพลาดจากการปัดตัวเลข ตัวอย่างเช่น คุณสามารถใช้ BigInt หรือปรับจำนวนตำแหน่งทศนิยมด้วย toFixed()

string

1let greeting = "Hello, world!";
2let char = 'A';
3const message = `"${greeting}" in JavaScript`;
4
5console.log("Value of greeting:", greeting);
6console.log("Value of char:", char);
7console.log("Value of message:", message);

• string เป็นประเภทข้อมูลที่ใช้สำหรับจัดการข้อความ โดยแสดงเป็นลำดับของอักขระ ข้อความจะแสดงโดยการครอบไว้ในเครื่องหมายอัญประกาศเดี่ยว (') หรืออัญประกาศคู่ (") ตั้งแต่ ES6 เป็นต้นมา template literals ช่วยให้สามารถฝังตัวแปรได้ง่ายโดยใช้ backticks () เพื่อฝังตัวแปร ให้ใช้ไวยากรณ์ ${}

boolean

1let isAvailable = true;
2let hasError = false;
3
4console.log("Value of isAvailable:", isAvailable);
5console.log("Value of hasError:", hasError);

• boolean แสดงค่าตรรกะและมีค่าได้เพียงสองค่าเท่านั้น: true หรือ false ใช้เป็นผลลัพธ์ของการแสดงออกแบบมีเงื่อนไข หรือเป็นตัวบ่งบอกสถานะ (flag)

null

1let result = null;
2
3console.log("Value of result:", result);

• null เป็นประเภทข้อมูลที่ระบุอย่างชัดเจนว่า 'ไม่มีค่า' null ถูกกำหนดโดยนักพัฒนาเพื่อแสดงถึงความว่างเปล่าที่ตั้งใจ

undefined

1let score;
2let subject = undefined;
3
4console.log("Value of score:", score);     // undefined
5console.log("Value of subject:", subject);

• undefined เป็นประเภทข้อมูลที่หมายถึง 'ยังไม่ได้กำหนดค่า' undefined จะถูกกำหนดอัตโนมัติเมื่อมีการประกาศตัวแปร แต่ไม่ได้กำหนดค่าให้

bigint

1let bigIntValue = 9007199254740991n;
2let anotherBigInt = 123456789012345678901234567890n;
3
4console.log("Value of bigIntValue:", bigIntValue);
5console.log("Value of anotherBigInt:", anotherBigInt);

• bigint เป็นประเภทข้อมูลสำหรับจัดการจำนวนเต็มขนาดใหญ่ bigint ช่วยให้สามารถแสดงจำนวนเต็มขนาดใหญ่ได้อย่างแม่นยำซึ่งไม่สามารถแสดงได้ด้วยประเภท number ตัวอักษร bigint จะแสดงด้วยการเพิ่ม n ที่ท้ายตัวเลข
• bigint เป็นประเภทที่ใช้จัดการจำนวนเต็มที่มีขนาดไม่จำกัด โดยไม่มีข้อจำกัดช่วงของค่า อย่างไรก็ตาม bigint และ number ไม่สามารถดำเนินการร่วมกันได้โดยตรง ดังนั้นต้องใช้ความระมัดระวัง

Symbol

1let sym1 = Symbol('id');
2let sym2 = Symbol('id');
3
4console.log("sym1 === sym2:", sym1 === sym2); // false

• Symbol เป็นชนิดข้อมูลที่ใช้สร้างตัวระบุที่ไม่ซ้ำกัน สามารถสร้างได้ด้วย Symbol() และสามารถใช้เป็นคุณสมบัติของอ็อบเจ็กต์ ต่างจากชนิดข้อมูลพื้นฐานอื่น ๆ Symbol มีค่าที่ไม่ซ้ำกัน ดังนั้นแม้จะมีเนื้อหาเดียวกันก็จะถือว่าเป็น Symbol ที่แตกต่างกัน

ชนิดข้อมูลอ็อบเจ็กต์

ชนิดข้อมูลอ็อบเจ็กต์เป็นโครงสร้างข้อมูลที่สามารถเก็บค่าหลายค่าได้ อ็อบเจ็กต์เป็นการจัดคู่คีย์-ค่า และสามารถมีคุณสมบัติและเมธอดได้

Object

1let person = {
2    name: "John",
3    age: 30,
4    isEmployee: true
5};
6console.log(person.name); // John

• Object คือกลุ่มของ คุณสมบัติ (คู่คีย์-ค่า) ที่สามารถเก็บข้อมูลประเภทต่างๆ ได้ อ็อบเจ็กต์จะแสดงด้วยวงเล็บปีกกา {} และแต่ละคุณสมบัติจะเชื่อมระหว่างคีย์และค่าด้วย :

Array

1let numbers = [10, 20, 30];
2console.log(numbers[0]); // 10
3console.log(numbers[1]); // 20
4console.log(numbers[2]); // 30
5console.log(numbers[3]); // undefined

• Array คือ รายการที่เก็บค่าหลายค่าในลำดับที่กำหนด อาเรย์จะแสดงด้วยวงเล็บเหลี่ยม [] และค่าจะแยกกันด้วยเครื่องหมายจุลภาค , องค์ประกอบแต่ละตัวจะเข้าถึงด้วยดัชนีที่เริ่มต้นที่ 0

Function

1function greet(name) {
2    return "Hello, " + name;
3}
4console.log(greet("Alice")); // Hello, Alice

• ฟังก์ชัน เป็นชนิดของอ็อบเจ็กต์และเป็นโค้ดที่สามารถนำมาใช้ซ้ำได้ ฟังก์ชันสามารถกำหนดได้โดยใช้คำสำคัญ function

ชนิดอ็อบเจ็กต์อื่น ๆ

• JavaScript ยังมีชนิดอ็อบเจ็กต์ที่สร้างขึ้นในตัว เช่น Date, RegExp, Map, และ Set สิ่งเหล่านี้จัดการข้อมูลตามกรณีการใช้งานเฉพาะ

การแปลงชนิดข้อมูล

การแปลงชนิดข้อมูลแบบ โดยนัย และ ชัดเจน ถูกดำเนินการบ่อยครั้งใน JavaScript

การแปลงชนิดข้อมูลโดยนัย

• JavaScript อาจแปลงชนิดข้อมูลโดยอัตโนมัติเมื่อดำเนินการกับชนิดข้อมูลที่แตกต่างกัน

1let result = 5 + "5"; // "55" (the number is converted to a string)
2
3console.log(result);

• ในตัวอย่างนี้ ตัวเลข 5 ถูกแปลงเป็นสตริงโดยอัตโนมัติ ส่งผลให้ได้สตริง "55"

การแปลงชนิดข้อมูลแบบชัดเจน

• นักพัฒนาก็สามารถแปลงชนิดข้อมูลได้อย่างชัดเจนเช่นกัน

1let num = "123";
2let convertedNum = Number(num); // Converts "123" to the number 123
3
4console.log(typeof num);
5console.log(typeof convertedNum);

• ในตัวอย่างนี้ ฟังก์ชัน Number() ถูกใช้เพื่อแปลงสตริง "123" ให้เป็นตัวเลข 123 อย่างชัดเจน

การตรวจสอบชนิดข้อมูล

ใน JavaScript คุณสามารถใช้ตัวดำเนินการ typeof เพื่อตรวจสอบชนิดข้อมูลของตัวแปร

 1// Output: The type of 42 is: number
 2console.log('The type of 42             is:', typeof 42);
 3
 4// Output: The type of 42 is: bigint
 5console.log('The type of 42n            is:', typeof 42n);
 6
 7// Output: The type of "hello" is: string
 8console.log('The type of "hello"        is:', typeof "hello");
 9
10// Output: The type of true is: boolean
11console.log('The type of true           is:', typeof true);
12
13// Output: The type of undefined is: undefined
14console.log('The type of undefined      is:', typeof undefined);
15
16// Output: The type of null is: object
17console.log('The type of null           is:', typeof null);
18
19// Output: The type of Symbol() is: symbol
20console.log('The type of Symbol()       is:', typeof Symbol());
21
22// Output: The type of {} is: object
23console.log('The type of {}             is:', typeof {});
24
25// Output: The type of function () {} is: function
26console.log('The type of function () {} is:', typeof function () {});

บทสรุป

• ชนิดข้อมูลพื้นฐาน รวมถึง number, string, boolean, null, undefined, และ symbol
• ชนิดข้อมูลอ็อบเจ็กต์ รวมถึง Object, Array, Function และอื่น ๆ
• เนื่องจากมีการแปลงชนิดข้อมูลทั้งแบบอัตโนมัติและแบบกำหนดเองเกิดขึ้น ดังนั้นจึงสำคัญที่จะต้องเข้าใจวิธีการใช้งานชนิดข้อมูลอย่างเหมาะสม

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video