นิพจน์ใน AngularJS: อาร์เรย์, อ็อบเจ็กต์, $eval, สตริง
เจมส์ ฮาร์ทแมน
⚡ สรุปอย่างชาญฉลาด
นิพจน์ใน AngularJS คือส่วนของโค้ดที่อยู่ภายในวงเล็บปีกกาคู่ ซึ่งใช้ผูกข้อมูลเข้ากับเทมเพลตโดยตรง นิพจน์เหล่านี้ใช้ประเมินค่าตัวเลข สตริง อ็อบเจ็กต์ และอาร์เรย์ และฟังก์ชัน `$eval` ก็ใช้ประเมินค่าแบบเดียวกันจากภายในคอนโทรลเลอร์ได้เช่นกัน
AngularJS Expression คืออะไร?
นิพจน์คือตัวแปรที่เขียนอยู่ภายในวงเล็บปีกกาคู่ {{ }}พวกมันถูกใช้งานอย่างแพร่หลายใน AngularJS และปรากฏให้เห็นในบทเรียนก่อนหน้านี้ในชุดนี้
⚠️ ประกาศเกี่ยวกับการสนับสนุน: AngularJS มาถึงแล้ว สิ้นสุดชีวิตเมื่อวันที่ 31 ธันวาคม 2021 และจะไม่ได้รับการแก้ไขข้อบกพร่องหรือการแก้ไขด้านความปลอดภัยเพิ่มเติมอีกต่อไป ไวยากรณ์ด้านล่างยังคงถูกต้องสำหรับการบำรุงรักษาแอปพลิเคชัน AngularJS 1.x ที่มีอยู่ โครงการใหม่ควรใช้เวอร์ชันที่ทันสมัยกว่า เชิงมุมซึ่งวงเล็บสำหรับการแทรกค่ายังคงมีอยู่ แต่ ng-init และ $eval ทำไม่ได้
อธิบายการใช้ Expression ใน AngularJS พร้อมยกตัวอย่าง
นิพจน์ใน AngularJS จะเขียนอยู่ภายในวงเล็บปีกกาคู่ ดังนี้ {{expression}}.
ไวยากรณ์: ตัวอย่างง่ายๆ ของการแสดงออกคือ {{5 + 6}}.
นิพจน์ใน AngularJS ผูกข้อมูลเข้ากับ HTML ในลักษณะเดียวกับคำสั่ง ng-bind และ AngularJS จะแสดงข้อมูลในตำแหน่งที่วางนิพจน์ไว้อย่างแม่นยำ
ในตัวอย่างนี้ เราแสดงการบวกตัวเลขอย่างง่ายในรูปแบบนิพจน์
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app=""> Addition : {{6+9}} </div> </body> </html>
Code คำอธิบาย:
- คำสั่ง ng-app ว่างเปล่า ซึ่งหมายความว่าไม่มีโมดูลใดจัดหาตัวควบคุม สั่งหรือบริการต่างๆ ที่เกี่ยวข้องกับหน้านี้
- สูตรอย่างง่ายใช้ในการบวกเลขสองจำนวน
Output:
มีการนำ 9 และ 6 มาบวกกัน และแสดงผลลัพธ์คือ 15
AngularJS Numbers
นิพจน์ทำงานกับตัวเลข ตัวอย่างนี้เป็นการคูณตัวแปรตัวเลขสองตัว margin และ profitและแสดงผลผลิตภัณฑ์
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="margin=2;profit=200"> Total profit margin {{margin*profit}} </div> </body> </html>
Code คำอธิบาย:
- คำสั่ง ng-init กำหนดตัวแปรและค่าของตัวแปรเหล่านั้นในวิวโดยตรง คล้ายกับตัวแปรโลคอลในเว็บเบราว์เซอร์ทั่วไป ภาษาโปรแกรม. ที่นี่
marginและprofitได้รับการประกาศและกำหนดแล้ว - จากนั้นนิพจน์ดังกล่าวจะคูณตัวแปรท้องถิ่นทั้งสองตัวนั้นเข้าด้วยกัน
Output:
มีการคูณ 2 กับ 200 และแสดงผลออกมาเป็น 400
สตริง AngularJS
นิพจน์ยังสามารถใช้กับสตริงได้ด้วย ตัวอย่างนี้กำหนด firstName และ lastName และแสดงผลทั้งสองอย่าง
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="firstName='Guru';lastName='99'"> First Name : {{firstName}}<br> Last Name : {{lastName}} </div> </body> </html>
Code คำอธิบาย:
- คำสั่ง ng-init กำหนด
firstNameด้วยค่า “Guru"และlastNameโดยมีค่าเป็น “99” - นิพจน์
{{firstName}}และ{{lastName}}อ่านค่าตัวแปรเหล่านั้นและแสดงผลในมุมมอง
Output:
ค่าทั้งสองจะปรากฏบนหน้าจอ
อ็อบเจ็กต์ AngularJS
นิพจน์ทำงานร่วมกับ Javaต้นฉบับ อ็อบเจ็กต์ ซึ่งประกอบด้วยคู่ชื่อ-ค่า ไวยากรณ์ของ Javaอ็อบเจ็กต์สคริปต์มีลักษณะดังนี้:
var car = {type: "Ford", model: "Explorer", color: "White"};
ตัวอย่างนี้กำหนด person วัตถุที่เก็บคู่คีย์-ค่าสองคู่ firstName และ lastName.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}"> First Name : {{person.firstName}}<br> Last Name : {{person.lastName}} </div> </body> </html>
Code คำอธิบาย:
- คำสั่ง ng-init กำหนดวัตถุ
personด้วยคู่คีย์-ค่าfirstNameตั้งค่าเป็น “Guru"และlastNameตั้งค่าเป็น “99” - นิพจน์
{{person.firstName}}และ{{person.lastName}}อ่านค่าของสมาชิกเหล่านั้น เนื่องจากสมาชิกเหล่านั้นเป็นส่วนหนึ่งของอ็อบเจ็กต์ จึงจำเป็นต้องใช้สัญลักษณ์จุดเพื่อเข้าถึงค่าของพวกมัน
Output:
ค่าของ firstName และ lastName ปรากฏบนหน้าจอ
อาร์เรย์ AngularJS
นิพจน์ทำงานกับอาร์เรย์ ตัวอย่างนี้กำหนดอาร์เรย์ที่เก็บคะแนนของนักเรียนในสามวิชาและแสดงค่าแต่ละค่า
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="marks=[1,15,19]"> Student Marks<br> Subject1 : {{marks[0]}}<br> Subject2 : {{marks[1]}}<br> Subject3 : {{marks[2]}} </div> </body> </html>
Code คำอธิบาย:
- คำสั่ง ng-init กำหนดอาร์เรย์
marksโดยมีค่าสามค่าคือ 1, 15 และ 19 - การแสดงออกของรูปแบบ
marks[index]อ่านแต่ละองค์ประกอบ
Output:
เครื่องหมายที่กำหนดไว้ในอาร์เรย์จะถูกแสดงขึ้น
ความสามารถและข้อจำกัดของ AngularJS Expression
ความสามารถในการ
- นิพจน์ AngularJS มีลักษณะคล้ายกัน Javaนิพจน์สคริปต์มีพลังและความยืดหยุ่นคล้ายคลึงกันมาก
- ที่ไหน Javaสคริปต์แสดงข้อผิดพลาด ReferenceError หรือ TypeError เมื่อกำหนดค่าคุณสมบัติเป็น undefined แต่การประเมินค่าใน AngularJS นั้นมีความยืดหยุ่นและส่งค่า undefined หรือ null กลับมา
- สามารถใช้ตัวกรองภายในนิพจน์เพื่อจัดรูปแบบข้อมูลก่อนแสดงผลได้
- ตัวดำเนินการแบบไตรภาคได้รับการสนับสนุน ดังนั้น
{{ isReady ? 'Yes' : 'No' }}ถูกต้อง
ข้อ จำกัด
- ลูปและการจัดการข้อผิดพลาดไม่สามารถใช้ภายในนิพจน์ของ AngularJS ได้ ตรรกะแบบมีเงื่อนไขจำกัดอยู่เฉพาะตัวดำเนินการแบบเทอร์นารีเท่านั้น
ifไม่มีรายงานข้อมูล - ไม่สามารถประกาศฟังก์ชันภายในนิพจน์ได้ แม้แต่ภายในคำสั่ง ng-init ก็ตาม
- ไม่สามารถสร้างนิพจน์ปกติภายในนิพจน์อื่นได้ นิพจน์ปกติคือการรวมกันของสัญลักษณ์และอักขระที่ใช้ในการจับคู่สตริง เช่น
.*\.txt$และการตีความตามตัวอักษรเช่นนั้นจะถูกปฏิเสธ - ตัวดำเนินการคอมมา (
,) และvoidผู้ประกอบการไม่ได้รับอนุญาต
ng-bind กับวงเล็บปีกกาแบบนิพยาม: ควรใช้อันไหน
Double วงเล็บปีกกาและคำสั่ง ng-bind ให้ผลลัพธ์ที่แสดงผลเหมือนกัน ดังนั้นการเลือกใช้ระหว่างสองอย่างนี้จึงดูเหมือนไม่มีเหตุผล แต่ความจริงแล้วไม่ใช่ ทั้งสองอย่างทำงานแตกต่างกันในช่วงเวลาก่อนที่ AngularJS จะโหลดเสร็จสมบูรณ์ และความแตกต่างนั้นสามารถมองเห็นได้โดยผู้ใช้งานหน้าเว็บ
| แง่มุม | {{ expression }} | ง-ไบนด์ |
|---|---|---|
| เขียนใน | เนื้อหาองค์ประกอบ | คุณลักษณะขององค์ประกอบ |
| ก่อนที่ AngularJS จะโหลดเสร็จ | ภาพเหล็กดัดฟันดิบปรากฏขึ้นบนหน้าจอ | ไม่มีอะไรแสดงให้เห็น |
| การอ่าน | สูงขึ้น — ค่าจะอยู่ในแนวเดียวกัน | ค่าที่ต่ำกว่า — ค่าถูกซ่อนอยู่ในแอตทริบิวต์ |
| ค่าหลายค่าต่อองค์ประกอบ | มี (ใบกำกับภาษีเต็มรูปแบบ) | ไม่ ผูกเพียงอันเดียว |
| การเข้าเล่มแบบครั้งเดียว | ใช่กับ {{::value}} |
ใช่กับ ng-bind="::value" |
การปรากฏของวงเล็บปีกกาแบบดิบๆ เพียงชั่วครู่ เรียกว่า "flash of uninterpolated content" ซึ่งเกิดขึ้นเนื่องจากเบราว์เซอร์แสดงผลมาร์กอัปก่อนที่ AngularJS จะคอมไพล์ ควรใช้ ng-bind หรือเพิ่มคำสั่ง ng-cloak สำหรับเนื้อหาที่มองเห็นได้เหนือส่วนที่มองเห็นได้ทันที (above the fold) ส่วนวงเล็บปีกกาแบบปกติยังคงเป็นตัวเลือกที่ชัดเจนและอ่านง่ายกว่าในส่วนอื่นๆ โดยเฉพาะอย่างยิ่งเมื่อมีค่าหลายค่าอยู่ภายในองค์ประกอบเดียว
ความแตกต่างระหว่างนิพจน์และ $eval
การขอ $eval ฟังก์ชันจะประเมินนิพจน์จากภายในคอนโทรลเลอร์ ในขณะที่นิพจน์จะถูกประเมินในวิว $eval ประเมินผลในโค้ดคอนโทรลเลอร์
ตัวอย่างนี้ใช้ $eval เพื่อบวกตัวเลขสองตัวและนำผลลัพธ์ไปวางไว้บนวัตถุขอบเขตเพื่อให้มุมมองสามารถแสดงผลได้
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <div ng-app="sampleApp" ng-controller="AngularController"> <h1>Guru99 Global Event</h1> {{value}} </div> <script> var sampleApp = angular.module('sampleApp', []); sampleApp.controller('AngularController', function($scope) { $scope.a = 1; $scope.b = 1; $scope.value = $scope.$eval('a+b'); }); </script> </body> </html>
Code คำอธิบาย:
- ตัวแปรขอบเขตสองตัว
aและbแต่ละค่าเท่ากับ 1 $scope.$evalประเมินผลบวกและกำหนดผลลัพธ์ให้กับตัวแปรขอบเขตvalue.- จากนั้นมุมมองจะแสดงผล
value.
Output:
ผลลัพธ์แสดงค่าของนิพจน์ที่ได้รับการประเมินภายใน ตัวควบคุมโดยผลรวมของตัวแปรขอบเขตทั้งสองจะถูกส่งไปยังและแสดงในมุมมอง
