1. สตริง
2. หมายเลข
3. บิ๊กจินต์
4. บูลีน
5. ไม่ได้กำหนด
6. ว่าง
7. สัญลักษณ์
8. วัตถุ
ประเภทข้อมูลวัตถุสามารถประกอบด้วย:
1. วัตถุ
2. อาร์เรย์
3. ออกเดท
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = "Yellow";
let lastName = "Johnson";
// Booleans
let x = true;
let y = false;
// Object:
const person = {firstName:"John", lastName:"Doe"};
// Array object:
const cars = ["Saab", "Volvo", "BMW"];
// Date object:
const date = new Date("2022-03-25"); ตัวแปร JavaScript สามารถเก็บข้อมูลประเภทใดก็ได้
ในการเขียนโปรแกรม ชนิดข้อมูลถือเป็นแนวคิดที่สำคัญ
เพื่อให้สามารถทำงานกับตัวแปรได้ สิ่งสำคัญคือต้องรู้อะไรบางอย่าง ประเภท.
หากไม่มีประเภทข้อมูล คอมพิวเตอร์จะไม่สามารถแก้ไขปัญหานี้ได้อย่างปลอดภัย:
let x = 16 + "Volvo";มันสมเหตุสมผลไหมที่จะเพิ่ม "Volvo" เป็นสิบหก? มันจะผลิต. ผิดพลาดหรือจะเกิดผล?
JavaScript จะถือว่าตัวอย่างข้างต้นเป็น:
let x = "16" + "Volvo";เมื่อเพิ่มตัวเลขและสตริง JavaScript จะถือว่าตัวเลขดังกล่าวเป็น เชือก
let x = 16 + "Volvo";ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>When adding a number and a string, JavaScript will treat the number as a string.</p>
<p id="demo"></p>
<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
let x = "Volvo" + 16;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>When adding a string and a number, JavaScript will treat the number as a string.</p>
<p id="demo"></p>
<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript ประเมินนิพจน์จากซ้ายไปขวา ลำดับที่แตกต่างกันได้ ให้ผลลัพธ์ที่แตกต่าง:
let x = 16 + 4 + "Volvo";ผลลัพธ์ :
20Volvo
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>
<p id="demo"></p>
<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
let x = "Volvo" + 16 + 4;ผลลัพธ์ :
Volvo164
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>
<p id="demo"></p>
<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
ในตัวอย่างแรก JavaScript ถือว่า 16 และ 4 เป็นตัวเลข จนกว่าจะถึง "Volvo"
ในตัวอย่างที่สอง เนื่องจากตัวถูกดำเนินการตัวแรกคือสตริง ตัวถูกดำเนินการทั้งหมดจึงเป็นเช่นนั้น ถือเป็นสตริง
JavaScript มีประเภทไดนามิก ซึ่งหมายความว่าสามารถใช้ตัวแปรเดียวกันได้ ที่จะถือ ประเภทข้อมูลที่แตกต่างกัน:
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a Stringสตริง (หรือสตริงข้อความ) คือชุดอักขระ เช่น "John Doe"
สตริงถูกเขียนด้วยเครื่องหมายคำพูด คุณสามารถใช้เครื่องหมายคำพูดเดี่ยวหรือคู่:
// Using double quotes:
let carName1 = "Volvo XC60";
// Using single quotes:
let carName2 = 'Volvo XC60';คุณสามารถใช้เครื่องหมายคำพูดภายในสตริงได้ ตราบใดที่มันไม่ตรงกับเครื่องหมายคำพูด ล้อมรอบสตริง:
// Single quote inside double quotes:
let answer1 = "It's alright";
// Single quotes inside double quotes:
let answer2 = "He is called 'Johnny'";
// Double quotes inside single quotes:
let answer3 = 'He is called "Johnny"';คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ สตริง ในบทแนะนำนี้ในภายหลัง
หมายเลข JavaScript ทั้งหมดจะถูกจัดเก็บเป็นตัวเลขทศนิยม (จุดลอยตัว)
ตัวเลขสามารถเขียนโดยมีหรือไม่มีทศนิยมก็ได้:
// With decimals:
let x1 = 34.00;
// Without decimals:
let x2 = 34; ตัวเลขขนาดใหญ่หรือเล็กพิเศษสามารถเขียนด้วยหลักวิทยาศาสตร์ได้ สัญกรณ์ (เอ็กซ์โปเนนเชียล):
let y = 123e5; // 12300000
let z = 123e-5; // 0.00123ภาษาโปรแกรมส่วนใหญ่มีหลายประเภท:
จำนวนเต็ม (จำนวนเต็ม):
ไบต์ (8 บิต), สั้น (16 บิต), int (32 บิต), ยาว (64 บิต)
จำนวนจริง (จุดลอยตัว):
float (32 บิต), สองเท่า (64 บิต)
หมายเลข Javascript จะเป็นประเภทเดียวเสมอ:
สองเท่า (จุดลอยตัว 64 บิต)
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ ตัวเลข ในบทแนะนำนี้ในภายหลัง
หมายเลข JavaScript ทั้งหมดจะถูกจัดเก็บในรูปแบบจุดลอยตัว 64 บิต
JavaScript BigInt เป็นประเภทข้อมูลใหม่ (ES2020) ที่สามารถใช้เพื่อเก็บค่าจำนวนเต็มที่มีขนาดใหญ่เกินกว่าจะแสดงได้ ด้วยหมายเลข JavaScript ปกติ
let x = BigInt("123456789012345678901234567890");คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ BigInt ในบทแนะนำนี้ในภายหลัง
บูลีนจะมีได้เพียงสองค่าเท่านั้น: true หรือ false
let x = 5;
let y = 5;
let z = 6;
(x == y)
// Returns true
(x == z) // Returns
falseลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans can have two values: true or false:</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 5;
let z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
Boolean มักใช้ในการทดสอบแบบมีเงื่อนไข
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ บูลีน ในบทช่วยสอนนี้ในภายหลัง
อาร์เรย์ JavaScript ถูกเขียนด้วยวงเล็บเหลี่ยม
รายการอาร์เรย์จะถูกคั่นด้วยเครื่องหมายจุลภาค
รหัสต่อไปนี้ประกาศ (สร้าง) อาร์เรย์ที่เรียกว่า cars ซึ่งมีสามตัว รายการ (ชื่อรถ):
const cars = ["Saab", "Volvo", "BMW"];ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array indexes are zero-based, which means the first item is [0].</p>
<p id="demo"></p>
<script>
const cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
ดัชนีอาร์เรย์เป็นแบบศูนย์ ซึ่งหมายความว่ารายการแรกคือ [0] รายการที่สองคือ [1] และอื่นๆ
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ อาร์เรย์ ในบทแนะนำนี้ในภายหลัง
อ็อบเจ็กต์ JavaScript ถูกเขียนด้วยเครื่องหมายปีกกา {}
วัตถุ คุณสมบัติถูกเขียนเป็นคู่ของชื่อ:ค่า คั่นด้วยเครื่องหมายจุลภาค
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
วัตถุ (บุคคล) ในตัวอย่างข้างต้นมีคุณสมบัติ 4 อย่าง: firstName, นามสกุล อายุ และสีตา
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ วัตถุ ในบทช่วยสอนนี้ในภายหลัง
คุณสามารถใช้ตัวดำเนินการ typeof ของ JavaScript เพื่อค้นหาประเภทได้ ของตัวแปร JavaScript
ตัวดำเนินการ typeof ส่งกลับประเภทของตัวแปรหรือนิพจน์:
typeof "" // Returns
"string"
typeof "John" // Returns
"string"
typeof "John Doe" // Returns
"string"ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "" + "<br>" +
typeof "John" + "<br>" +
typeof "John Doe";
</script>
</body>
</html>
typeof 0 // Returns
"number"
typeof 314 // Returns
"number"
typeof 3.14 // Returns
"number"
typeof (3) // Returns
"number"
typeof (3 + 4) // Returns
"number"ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof 0 + "<br>" +
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>
</body>
</html>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ typeof ในบทแนะนำนี้ในภายหลัง
ใน JavaScript ตัวแปรที่ไม่มีค่าจะมีค่าเป็น unknown ประเภทนี้ยัง unknown อีกด้วย
let car; // Value is undefined,
type is undefinedลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>
<p id="demo"></p>
<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
คุณสามารถล้างตัวแปรใดๆ ก็ได้โดยตั้งค่าเป็น unknown ประเภทดังกล่าวจะเป็น unknown ด้วย
car = undefined; // Value is undefined,
type is undefinedลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>
<p id="demo"></p>
<script>
let car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>
</body>
</html>
ค่าว่างไม่เกี่ยวข้องกับ unknown
สตริงว่างมีทั้งค่าทางกฎหมายและประเภท
let car = ""; // The value is "", the typeof is "string"ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>An empty string has both a legal value and a type:</p>
<p id="demo"></p>
<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>
</body>
</html>