ตัวแปร JavaScript
4 วิธีในการประกาศตัวแปร JavaScript:
- โดยใช้
var - โดยใช้
let - โดยใช้
const - ไม่ใช้อะไรเลย
ตัวแปรคืออะไร?
ตัวแปรคือคอนเทนเนอร์สำหรับจัดเก็บข้อมูล (จัดเก็บค่าข้อมูล)
ในตัวอย่างนี้ , x, yและz, เป็นตัวแปรที่ประกาศด้วยvarคีย์เวิร์ด:
ตัวอย่าง
var x = 5;
var y = 6;
var z = x + y;
ในตัวอย่างนี้ , x, yและz, เป็นตัวแปรที่ประกาศด้วยletคีย์เวิร์ด:
ตัวอย่าง
let x = 5;
let y = 6;
let z = x + y;
ในตัวอย่างนี้ , x, yและz, เป็นตัวแปรที่ไม่ได้ประกาศ:
ตัวอย่าง
x = 5;
y = 6;
z = x + y;
จากตัวอย่างทั้งหมดข้างต้น คุณสามารถเดาได้:
- x เก็บค่า 5
- y เก็บค่า 6
- z เก็บค่า 11
เมื่อใดควรใช้ JavaScript var?
ประกาศตัวแปร JavaScript ด้วยvar, let, หรือconst.
คีย์เวิร์ด ถูกvarใช้ในโค้ด JavaScript ทั้งหมดตั้งแต่ปี 1995 ถึง 2015
letและคำconstหลักถูกเพิ่มลงใน JavaScript ในปี 2015
หากคุณต้องการให้โค้ดของคุณทำงานในเบราว์เซอร์รุ่นเก่า คุณต้องใช้var.
เมื่อใดควรใช้ JavaScript const?
หากคุณต้องการกฎทั่วไป: ประกาศตัวแปรด้วยconst.
หากคุณคิดว่าค่าของตัวแปรสามารถเปลี่ยนแปลงได้ ให้letใช้
ในตัวอย่างนี้ , price1, price2และtotal, เป็นตัวแปร:
ตัวอย่าง
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
ตัวแปรทั้งสองprice1และprice2
ประกาศด้วยconstคีย์เวิร์ด
ค่าเหล่านี้เป็นค่าคงที่และไม่สามารถเปลี่ยนแปลงได้
ประกาศ ตัวแปรtotalด้วยletคีย์เวิร์ด
เป็นค่าที่สามารถเปลี่ยนแปลงได้
เช่นเดียวกับพีชคณิต
เช่นเดียวกับในพีชคณิต ตัวแปรเก็บค่า:
let x = 5;
let y = 6;
เช่นเดียวกับพีชคณิต ตัวแปรถูกใช้ในนิพจน์:
let z = x + y;
จากตัวอย่างข้างต้น คุณสามารถเดาได้ว่าผลรวมคำนวณเป็น 11
บันทึก
ตัวแปรคือคอนเทนเนอร์สำหรับเก็บค่า
ตัวระบุ JavaScript
ตัวแปร JavaScript ทั้งหมดต้อง ระบุด้วยชื่อที่ไม่ซ้ำ
ชื่อเฉพาะเหล่านี้เรียกว่าตัวระบุ
ตัวระบุอาจเป็นชื่อย่อ (เช่น x และ y) หรือชื่อที่สื่อความหมายได้มากกว่า (อายุ ผลรวม ยอดรวม)
กฎทั่วไปสำหรับการสร้างชื่อสำหรับตัวแปร (ตัวระบุเฉพาะ) คือ:
- ชื่อสามารถประกอบด้วยตัวอักษร ตัวเลข ขีดล่าง และเครื่องหมายดอลลาร์
- ชื่อต้องขึ้นต้นด้วยตัวอักษร
- ชื่อสามารถเริ่มต้นด้วย $ และ _ (แต่เราจะไม่ใช้ในบทช่วยสอนนี้)
- ชื่อจะคำนึงถึงขนาดตัวพิมพ์ (y และ Y เป็นตัวแปรต่างกัน)
- คำสงวน (เช่นคำหลัก JavaScript) ไม่สามารถใช้เป็นชื่อได้
บันทึก
ตัวระบุ JavaScript คำนึงถึงขนาดตัวพิมพ์
ผู้ดำเนินการมอบหมาย
ใน JavaScript เครื่องหมายเท่ากับ ( =) คือโอเปอเรเตอร์ "assignment" ไม่ใช่โอเปอเรเตอร์ "เท่ากับ"
ซึ่งแตกต่างจากพีชคณิต สิ่งต่อไปนี้ไม่สมเหตุสมผลในพีชคณิต:
x = x + 5
อย่างไรก็ตาม ใน JavaScript มันสมเหตุสมผลดี: มันกำหนดค่าของ x + 5 ให้กับ x
(คำนวณค่าของ x + 5 และใส่ผลลัพธ์เป็น x ค่าของ x จะเพิ่มขึ้น 5.)
บันทึก
ตัวดำเนินการ "เท่ากับ" เขียนเหมือน==ใน JavaScript
ประเภทข้อมูล JavaScript
ตัวแปร JavaScript สามารถเก็บตัวเลขเช่น 100 และค่าข้อความเช่น "John Doe"
ในการเขียนโปรแกรม ค่าข้อความจะเรียกว่าสตริงข้อความ
JavaScript สามารถจัดการข้อมูลได้หลายประเภท แต่สำหรับตอนนี้ ลองนึกถึงตัวเลขและสตริง
สตริงถูกเขียนในเครื่องหมายคำพูดคู่หรือเดี่ยว ตัวเลขเขียนโดยไม่มีเครื่องหมายคำพูด
หากคุณใส่ตัวเลขในเครื่องหมายคำพูด จะถือว่าเป็นสตริงข้อความ
ตัวอย่าง
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
การประกาศตัวแปร JavaScript
การสร้างตัวแปรใน JavaScript เรียกว่า "การประกาศ" ตัวแปร
คุณประกาศตัวแปร JavaScript ด้วยคีย์เวิร์ดvarหรือ :let
var carName;
หรือ:
let carName;
หลังจากการประกาศ ตัวแปรไม่มีค่า (ในทางเทคนิค มันคือundefined)
ในการกำหนดค่าให้กับตัวแปร ให้ใช้เครื่องหมายเท่ากับ:
carName = "Volvo";
คุณยังสามารถกำหนดค่าให้กับตัวแปรเมื่อคุณประกาศ:
let carName = "Volvo";
ในตัวอย่างด้านล่าง เราสร้างตัวแปรที่เรียกcarNameและกำหนดค่า "Volvo" ให้กับตัวแปรนั้น
จากนั้นเราจะ "ส่งออก" ค่าภายในย่อหน้า HTML ด้วย id="demo":
ตัวอย่าง
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
บันทึก
แนวทางปฏิบัติในการเขียนโปรแกรมที่ดีคือการประกาศตัวแปรทั้งหมดที่จุดเริ่มต้นของสคริปต์
หนึ่งประโยค หลายตัวแปร
คุณสามารถประกาศตัวแปรได้หลายตัวในคำสั่งเดียว
เริ่มต้นคำสั่งด้วยvarและแยกตัวแปรด้วยเครื่องหมายจุลภาค :
ตัวอย่าง
let person = "John Doe", carName = "Volvo", price = 200;
การประกาศสามารถขยายได้หลายบรรทัด:
ตัวอย่าง
let person = "John Doe",
carName = "Volvo",
price = 200;
ค่า = ไม่ได้กำหนด
ในโปรแกรมคอมพิวเตอร์ ตัวแปรมักถูกประกาศโดยไม่มีค่า ค่าสามารถเป็นสิ่งที่ต้องคำนวณ หรือสิ่งที่จะได้รับในภายหลัง เช่น การป้อนข้อมูลของผู้ใช้
undefinedตัวแปรที่ประกาศโดยไม่มีค่าจะ มีค่า
ตัวแปร carName จะมีค่าundefinedหลังจากดำเนินการคำสั่งนี้:
ตัวอย่าง
let carName;
ประกาศตัวแปร JavaScript อีกครั้ง
หากคุณประกาศตัวแปร JavaScript ที่ประกาศด้วย อีกครั้ง ตัวแปรvarจะไม่สูญเสียค่าของมัน
ตัวแปรcarNameจะยังคงมีค่า "Volvo" หลังจากดำเนินการคำสั่งเหล่านี้:
ตัวอย่าง
var carName = "Volvo";
var carName;
บันทึก
คุณไม่สามารถประกาศตัวแปรที่ประกาศด้วยletหรือconstอีกครั้ง
สิ่งนี้จะไม่ทำงาน:
let carName = "Volvo";
let carName;
JavaScript เลขคณิต
เช่นเดียวกับพีชคณิต คุณสามารถคำนวณด้วยตัวแปร JavaScript โดยใช้ตัวดำเนินการ เช่น=และ+:
ตัวอย่าง
let x = 5 + 2 + 3;
คุณยังสามารถเพิ่มสตริงได้ แต่สตริงจะถูกต่อเข้าด้วยกัน:
ตัวอย่าง
let x = "John" + " " + "Doe";
ลองสิ่งนี้ด้วย:
ตัวอย่าง
let x = "5" + 2 + 3;
บันทึก
หากคุณใส่ตัวเลขในเครื่องหมายคำพูด ตัวเลขที่เหลือจะถือเป็นสตริงและนำมาต่อกัน
ตอนนี้ลองทำสิ่งนี้:
ตัวอย่าง
let x = 2 + 3 + "5";
เครื่องหมายดอลลาร์ JavaScript $
เนื่องจาก JavaScript ถือว่าเครื่องหมายดอลลาร์เป็นตัวอักษร ตัวระบุที่มี $ จึงเป็นชื่อตัวแปรที่ถูกต้อง:
ตัวอย่าง
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
การใช้เครื่องหมายดอลลาร์นั้นไม่ธรรมดาใน JavaScript แต่โปรแกรมเมอร์มืออาชีพมักใช้เป็นนามแฝงสำหรับฟังก์ชันหลักในไลบรารี JavaScript
ตัวอย่างเช่น ในไลบรารี JavaScript jQuery ฟังก์ชันหลัก
$จะใช้เพื่อเลือกองค์ประกอบ HTML ใน jQuery $("p");หมายถึง "เลือกองค์ประกอบ p ทั้งหมด"
JavaScript ขีดล่าง (_)
เนื่องจาก JavaScript ถือว่าขีดล่างเป็นตัวอักษร ตัวระบุที่มี _ จึงเป็นชื่อตัวแปรที่ถูกต้อง:
ตัวอย่าง
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
การใช้ขีดล่างนั้นไม่ธรรมดาใน JavaScript แต่ธรรมเนียมปฏิบัติในหมู่โปรแกรมเมอร์มืออาชีพคือการใช้มันเป็นนามแฝงสำหรับตัวแปร "ส่วนตัว (ซ่อน)"