องค์ประกอบใหม่ที่เพิ่มใน ES6 คือตัวอักษรของเทมเพลต เป็นประเภทใหม่สำหรับการสร้างสตริงใน JavaScript ที่เพิ่มคุณลักษณะใหม่ที่สำคัญหลายอย่าง เช่น ความสามารถในการสร้างสตริงหลายบรรทัดและรวมนิพจน์ในสตริง ในฐานะนักพัฒนา ฟีเจอร์ทั้งหมดเหล่านี้สามารถปรับปรุงความสามารถของคุณในการจัดการสตริงและช่วยให้คุณสร้างสตริงไดนามิกได้
โพสต์นี้จะแสดงตัวอย่างเทมเพลตและวิธีใช้งานใน JavaScript
JavaScript Template Literals (Template Strings) คืออะไร?
“ เทมเพลต Literals ” เป็นที่รู้จักกันทั่วไปว่า “ สตริงเทมเพลต ” พวกเขาถูกล้อมรอบด้วย backtick ( “ ) เมื่อเทียบกับเครื่องหมายคำพูดในสตริง ตัวยึดตำแหน่งจะแสดงด้วยเครื่องหมายดอลลาร์ ' $ ” และดัดฟัน {} ชอบ ' ${การแสดงออก} ” เป็นที่ยอมรับในตัวอักษรเทมเพลต หากคุณต้องการใช้นิพจน์ คุณสามารถใส่ใน “ ${การแสดงออก} ” กล่องด้านใน backticks.
เทมเพลตที่เป็นตัวอักษรคือเวอร์ชันปรับปรุงของสตริง JavaScript มาตรฐาน การแทนที่ทำให้เกิดความแตกต่างอย่างมีนัยสำคัญระหว่างเทมเพลตตามตัวอักษรและสตริงธรรมดา คุณสามารถรวมตัวแปรและนิพจน์ลงในสตริงได้โดยใช้การแทนที่ ตัวแปรและนิพจน์เหล่านี้จะมีค่าแทนที่โดยอัตโนมัติด้วยเอ็นจิ้น JavaScript
ไวยากรณ์
ใช้ไวยากรณ์ด้านล่างเพื่อประกาศสตริงเดียวโดยใช้ตัวอักษรเทมเพลต:
` ข้อความสตริง `
สำหรับหลายบรรทัด ให้ทำตามไวยากรณ์ที่กำหนด:
` สตริงข้อความบรรทัด 1
สตริงข้อความบรรทัด
หากคุณต้องการเพิ่มนิพจน์ภายใน backticks ไวยากรณ์ต่อไปนี้จะถูกใช้:
ดูตัวอย่างต่อไปนี้เพื่อพัฒนาความเข้าใจที่ดีขึ้นของแนวคิดที่ระบุไว้
ตัวอย่างที่ 1: ประกาศสตริงบรรทัดเดียวโดยใช้ JavaScript Template Literals
โดยปกติ ในการสร้างสตริง จะต้องใช้เครื่องหมายคำพูดเดี่ยวหรือคู่ แต่ในตัวอักษรเทมเพลต คุณสามารถสร้างสตริงได้ดังนี้:
console.log ( ` Linuxคำแนะนำ ` ) ;
ผลลัพธ์แสดงให้เห็นว่าการทำงานเหมือนกันกับการสร้างต่อยอย่างง่ายโดยใช้อัญประกาศเดี่ยวหรือคู่:
ตัวอย่างที่ 2: ประกาศสตริงหลายบรรทัดโดยใช้ JavaScript Template Literals
โดยปกติ สำหรับการพิมพ์หลายบรรทัด เราใช้ตัวดำเนินการต่อ (+) และเพื่อเพิ่มบรรทัดใหม่ (\n) สามารถใช้ได้ ซึ่งมักจะทำให้โค้ดซับซ้อน:
console.log ( 'ยินดีต้อนรับสู่ LinuxHint \n ' + 'เว็บไซต์ที่ดีที่สุดสำหรับทักษะการเรียนรู้' ) ;
ในขณะที่ใช้เทมเพลตตัวอักษร คุณสามารถเริ่มบรรทัดใหม่โดยกด Enter จากแป้นพิมพ์ในบล็อก backticks:
เว็บไซต์ที่ดีที่สุด สำหรับ ทักษะการเรียนรู้ ` ) ;
เอาท์พุต
ตัวอย่างที่ 3: สตริงที่มีการแทนที่นิพจน์
ที่นี่ก่อนอื่นเราจะสร้างสองตัวแปร ' x ' และ ' Y ” ด้วยค่า “ ยี่สิบ ' และ ' สิบห้า ” ตามลำดับ:
วาร์ x = ยี่สิบ ;วา y = สิบห้า ;
จากนั้นสร้างตัวแปร “ ผลรวม ” สำหรับการเพิ่ม “ x ' และ ' Y ”:
ถ้าคุณต้องการเพิ่มตัวเลขสองตัวและแสดงผลรวมของตัวเลขเหล่านี้บนคอนโซล โดยปกติแล้ว จำเป็นต้องเชื่อมสตริงและตัวแปรในรูปแบบสตริงปกติ ซึ่งมักจะสร้างความยุ่งยากในการใช้อัญประกาศเดี่ยวหรือคู่ซ้ำๆ กับสตริงและรวมเข้าด้วยกัน ซึ่งกันและกันและกับตัวแปรโดยใช้ ( + ):
ในขณะที่ใช้เทมเพลตตัวอักษร คุณจะต้องระบุสตริงที่มีตัวแปรเป็นนิพจน์ภายใน ' ${} ” ในบล็อก backtick:
เอาท์พุต
เราได้รวบรวมข้อมูลที่จำเป็นทั้งหมดที่เกี่ยวข้องกับตัวอักษรของเทมเพลต
บทสรุป
“ เทมเพลต Literals ” หรือที่เรียกว่า “ สตริงเทมเพลต ” เป็นเวอร์ชันปรับปรุงของสตริง JavaScript มาตรฐานที่ล้อมรอบด้วยเครื่องหมายย้อนกลับ ( “ ) เมื่อเทียบกับเครื่องหมายคำพูดในสตริง อนุญาตให้สร้างสตริงบรรทัดเดียวและหลายบรรทัดโดยไม่ต้องใช้ตัวดำเนินการ concatenation และรวมนิพจน์ในสตริง โพสต์นี้ได้กล่าวถึงเทมเพลตตัวอักษรใน JavaScript พร้อมตัวอย่างที่อธิบาย