ตัวแปร JavaScript สามารถประกาศได้ 4 วิธี:
โดยอัตโนมัติ
ใช้ var
ใช้ ให้
ใช้ const
ในตัวอย่างนี้แรก x, <รหัส class="w3-codespan">y และ z เป็นตัวแปรที่ไม่ได้ประกาศ
จะมีการประกาศโดยอัตโนมัติเมื่อใช้ครั้งแรก:
x = 5;
y = 6;
z = x + y;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
ถือเป็นแนวทางปฏิบัติในการเขียนโปรแกรมที่ดีในการประกาศตัวแปรก่อนใช้งานเสมอ
จากตัวอย่างคุณสามารถเดาได้:
x เก็บค่า 5
y เก็บค่า 6
z เก็บค่า 11
var x = 5;
var y = 6;
var z = x + y;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
คำหลัก var ถูกใช้ในโค้ด JavaScript ทั้งหมดตั้งแต่ปี 1995 ถึง 2015
คำหลัก let และ const ถูกเพิ่มลงใน JavaScript ในปี 2015
คำหลัก var ควรใช้ในโค้ดที่เขียนสำหรับเบราว์เซอร์รุ่นเก่าเท่านั้น
let x = 5;
let y = 6;
let z = x + y;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
ตัวแปรทั้งสอง price1 และ price2 ถูกประกาศด้วยคีย์เวิร์ด const
ค่าเหล่านี้เป็นค่าคงที่และไม่สามารถเปลี่ยนแปลงได้
ตัวแปร total ได้รับการประกาศด้วยคีย์เวิร์ด let
ค่า total สามารถเปลี่ยนแปลงได้
1. ประกาศตัวแปรเสมอ
2. ใช้ const เสมอหากไม่ควรเปลี่ยนค่า
3. ใช้ const เสมอหากไม่ควรเปลี่ยนประเภท (อาร์เรย์และวัตถุ)
4. ใช้ let เท่านั้น หากคุณไม่สามารถใช้ const
5. ใช้ var เท่านั้น หากคุณต้องรองรับเบราว์เซอร์รุ่นเก่า
เช่นเดียวกับในพีชคณิต ตัวแปรเก็บค่า:
let x = 5;
let y = 6;เช่นเดียวกับในพีชคณิต ตัวแปรถูกใช้ในนิพจน์:
let z = x + y;จากตัวอย่างข้างต้น คุณสามารถเดาได้ว่าผลรวมจะคำนวณเป็น 11
ตัวแปรเป็นคอนเทนเนอร์สำหรับจัดเก็บค่า
ตัวแปร JavaScript ทั้งหมดต้องเป็น ระบุด้วยชื่อที่ไม่ซ้ำ
ชื่อเฉพาะเหล่านี้เรียกว่า ตัวระบุ
ตัวระบุอาจเป็นชื่อสั้น (เช่น x และ y) หรือชื่อที่สื่อความหมายมากกว่านี้ (อายุ ผลรวม TotalVolume)
กฎทั่วไปสำหรับการสร้างชื่อสำหรับตัวแปร (ตัวระบุที่ไม่ซ้ำกัน) คือ:
ชื่อสามารถประกอบด้วยตัวอักษร ตัวเลข ขีดล่าง และเครื่องหมายดอลลาร์
ชื่อต้องขึ้นต้นด้วยตัวอักษร
ชื่อสามารถขึ้นต้นด้วย $และ _ ได้ (แต่เราจะไม่ใช้ในบทช่วยสอนนี้)
ชื่อต้องคำนึงถึงขนาดตัวพิมพ์ (y และ Y เป็นตัวแปรที่แตกต่างกัน)
คำสงวน (เช่น คำสำคัญ JavaScript) ไม่สามารถใช้เป็นชื่อได้
ตัวระบุ JavaScript คำนึงถึงขนาดตัวพิมพ์
ใน JavaScript เครื่องหมายเท่ากับ (=) เป็นตัวดำเนินการ "การมอบหมาย" ไม่ใช่ ตัวดำเนินการ "เท่ากับ"
สิ่งนี้แตกต่างจากพีชคณิต ต่อไปนี้ไม่สมเหตุสมผลใน พีชคณิต:
x = x + 5 อย่างไรก็ตาม ใน JavaScript มันสมเหตุสมผลดี: มันกำหนดค่า x + 5 ให้กับ x.
(คำนวณค่า x + 5 แล้วนำผลลัพธ์ไปไว้ใน x ค่าของ x เพิ่มขึ้นทีละ 5)
ตัวดำเนินการ "เท่ากับ" เขียนเหมือน == ใน JavaScript
ตัวแปร JavaScript สามารถเก็บตัวเลข เช่น 100 และค่าข้อความ เช่น "John โด้".
ในการเขียนโปรแกรม ค่าข้อความจะเรียกว่าสตริงข้อความ
JavaScript สามารถจัดการข้อมูลได้หลายประเภท แต่สำหรับตอนนี้ แค่คิดถึงตัวเลขและสตริงเท่านั้น
สตริงถูกเขียนภายในเครื่องหมายคำพูดคู่หรือเดี่ยว มีการเขียนตัวเลข โดยไม่มีเครื่องหมายคำพูด
หากคุณใส่ตัวเลขในเครื่องหมายคำพูด จะถือเป็นสตริงข้อความ
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
การสร้างตัวแปรใน JavaScript เรียกว่า "การประกาศ" ตัวแปร
คุณประกาศตัวแปร JavaScript ด้วยคีย์เวิร์ด var หรือ let:
var carName;let carName;หลังจากการประกาศ ตัวแปรไม่มีค่า (ในทางเทคนิคแล้วคือ unknown)
หากต้องการกำหนดค่าให้กับตัวแปร ให้ใช้เครื่องหมายเท่ากับ:
carName = "Volvo";คุณยังสามารถกำหนดค่าให้กับตัวแปรเมื่อคุณประกาศมัน:
let carName = "Volvo";ในตัวอย่างด้านล่าง เราสร้างตัวแปรชื่อ carName และกำหนดค่า “วอลโว่” ไปเลย
จากนั้นเรา "ส่งออก" ค่าภายในย่อหน้า HTML ด้วย id="demo":
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
แนวทางปฏิบัติที่ดีในการเขียนโปรแกรมคือการประกาศตัวแปรทั้งหมดที่ตอนต้นของสคริปต์
คุณสามารถประกาศตัวแปรได้หลายตัวในคำสั่งเดียว
เริ่มแถลงการณ์ ด้วย let และแยกตัวแปรด้วย ลูกน้ำ:
let person = "John Doe", carName = "Volvo", price = 200;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
การประกาศสามารถขยายได้หลายบรรทัด:
let person = "John Doe",
carName = "Volvo",
price = 200;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
ในโปรแกรมคอมพิวเตอร์ ตัวแปรมักถูกประกาศโดยไม่มีค่า มูลค่า อาจเป็นสิ่งที่ต้องคำนวณหรือสิ่งที่จะให้มา ในภายหลัง เช่น การป้อนข้อมูลของผู้ใช้
ตัวแปรที่ประกาศโดยไม่มีค่าจะมีค่า ไม่ได้กำหนด.
ตัวแปร carName จะมีค่า unknown หลังจากดำเนินการตามคำสั่งนี้:
let carName;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
หากคุณประกาศตัวแปร JavaScript ที่ประกาศด้วย var อีกครั้ง ตัวแปรนั้นจะไม่สูญเสียค่า
ตัวแปร carName จะยังคงมีค่าเป็น "Volvo" หลังจากดำเนินการตามคำสั่งเหล่านี้:
var carName = "Volvo";
var carName;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
คุณไม่สามารถประกาศตัวแปรอีกครั้งด้วย let หรือ const
สิ่งนี้จะไม่ทำงาน:
let carName = "Volvo";
let carName;เช่นเดียวกับพีชคณิต คุณสามารถคำนวณทางคณิตศาสตร์ด้วยตัวแปร JavaScript ได้โดยใช้ ตัวดำเนินการเช่น = และ :
let x = 5 + 2 + 3;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
คุณยังสามารถเพิ่มสตริงได้ แต่สตริงจะถูกต่อเข้าด้วยกัน:
let x = "John" + " " + "Doe";ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
ลองสิ่งนี้ด้วย:
let x = "5" + 2 + 3;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
หากคุณใส่ตัวเลขในเครื่องหมายคำพูด ตัวเลขที่เหลือจะถือเป็นสตริงและต่อกัน
ตอนนี้ลองสิ่งนี้:
let x = 2 + 3 + "5";ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
เนื่องจาก JavaScript ถือว่าเครื่องหมายดอลลาร์เหมือนตัวอักษร ตัวระบุที่มี $จึงเป็นชื่อตัวแปรที่ถูกต้อง:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
การใช้เครื่องหมายดอลลาร์นั้นไม่ใช่เรื่องธรรมดาใน JavaScript แต่โปรแกรมเมอร์มืออาชีพมักจะใช้มัน เป็นนามแฝงสำหรับฟังก์ชันหลักในไลบรารี JavaScript
ในไลบรารี JavaScript jQuery เช่นฟังก์ชันหลัก $ ใช้ในการเลือกองค์ประกอบ HTML ใน jQuery $ ("p"); หมายถึง "เลือกองค์ประกอบ p ทั้งหมด"
เนื่องจาก JavaScript ถือว่าขีดล่างเป็นตัวอักษร ตัวระบุที่มี _ จึงเป็นชื่อตัวแปรที่ถูกต้อง:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
การใช้ขีดล่างนั้นไม่ค่อยพบเห็นได้ทั่วไปใน JavaScript แต่แบบแผนในหมู่โปรแกรมเมอร์มืออาชีพคือการใช้มันเป็นนามแฝง ตัวแปร "ส่วนตัว (ซ่อน)"