วิธีใช้ตัวอักษรเทมเพลต ES6 ใน JavaScript

ในการเขียนโปรแกรมคำว่า “ตามตัวอักษร” หมายถึง สัญกรณ์ของค่า ในรหัส ตัวอย่างเช่นเราสังเกตเห็นค่าสตริงด้วย a สตริงตัวอักษร ที่มีอักขระที่อยู่ในเครื่องหมายคำพูดคู่หรือเดี่ยว ("foo", 'บาร์', "นี่คือสตริง!").

เทมเพลตตัวอักษร ถูกนำมาใช้ใน ECMAScript 6. พวกมันทำงานคล้ายกับสตริงตัวอักษร; พวกเขาผลิต ค่าเทมเพลต และ ค่าเทมเพลตดิบ, ซึ่งทั้งสองอย่างเป็นสตริง.

อย่างไรก็ตามแตกต่างจากตัวอักษรของสตริงตัวอักษรแม่แบบสามารถผลิตค่าที่ สตริงที่มีหลายแถว, สิ่งที่คุณสามารถทำได้ในสตริงตัวอักษรเท่านั้นโดย การเพิ่มอักขระบรรทัดใหม่ (\ n) กับมัน.

แม่แบบตัวอักษรยังสามารถ สร้างสตริงที่มีค่าอื่น ๆ (มาจากนิพจน์) ซึ่งคุณจะต้องใช้ บวกผู้ประกอบการ ในสตริงตัวอักษร ("id ของคุณคือ:" + idNo; ที่ไหน idNo เป็นนิพจน์ตัวแปรที่มีค่าตัวเลข).

คุณสมบัติทั้งหมดเหล่านี้ทำให้ตัวอักษรเทมเพลตเป็นที่นิยมมากกว่า สร้างค่าสตริง.

ไวยากรณ์ของเทมเพลตตัวอักษร

ตัวคั่นของเทมเพลตตัวอักษรคือ backtick ' ตัวละคร (หรือเรียกอีกอย่างว่าตัวละคร backquote หรือสัญลักษณ์เน้นเสียงร้ายแรง) นิพจน์ภายในตัวอักษร (ค่าที่เป็น ประเมินระหว่างรันไทม์ และรวมอยู่ในมูลค่าสุดท้ายที่ผลิตโดยตัวอักษร) อยู่ใน วงเล็บปีกกา กับ เครื่องหมายดอลลาร์ก่อนหน้า $.

 'string $ someExpression สตริงเพิ่มเติม' 

นี่คือบางส่วน ตัวอย่างเทมเพลตตัวอักษร การผลิต ไม่เปลี่ยนแปลง, แทน (นิพจน์ถูกแทนที่ด้วยค่าที่ประเมิน) และ หลายเรียงราย เงื่อนไข.

 console.log ( 'สวัสดี'); // hello var name = "Joan"; console.log ('สวัสดี $ name'); // hello Joan console.log ('เรียน Joan, Welcome.'); // Dear Joan, // ยินดีต้อนรับ. 

การหลบหนี & ค่าเทมเพลตดิบ

ในเทมเพลตตัวอักษร ' (backtick), \ (แบ็กสแลช) และ $ (เครื่องหมายดอลลาร์) อักขระ ควรหลีกหนี ใช้ ตัวละครหลบหนี \ ถ้าพวกเขาจะรวมอยู่ในค่าแม่แบบของพวกเขา.

ตามค่าเริ่มต้น escape sequences ทั้งหมดในเทมเพลตตัวอักษรคือ ละเว้น. หากคุณต้องการรวมไว้ในผลลัพธ์คุณต้องใช้มัน ค่าเทมเพลตดิบ.

 console.log ('รหัสแบบอินไลน์ในมาร์กอัป: \' code \ "); // รหัสอินไลน์ในมาร์กอัป: 'code' var name =" Joan "; console.log ('hello \ $ name.'); / / hello $ name. console.log (String.raw'hello \ $ name. '); // hello \ $ name. 

String.raw วิธี ส่งออกค่าเทมเพลตดิบ (รูปแบบสตริงดิบของแม่แบบตัวอักษร) ในรหัสข้างต้นการเรียกใช้ฟังก์ชันของ ดิบ วิธีการที่เรียกว่า “เทมเพลตที่ติดแท็ก”.

เทมเพลตที่ติดแท็ก

เทมเพลตที่ติดแท็กคือ ฟังก์ชั่นการโทร ที่ไหน, แทนที่วงเล็บปกติ (พร้อมพารามิเตอร์เสริม) นอกเหนือจากชื่อฟังก์ชัน, มีเทมเพลตที่แท้จริง จากที่ฟังก์ชั่นได้รับการขัดแย้ง.

ดังนั้นแทนที่จะเรียกใช้ฟังก์ชันดังนี้:

 foo (ArgumentsForFoo); 

มันถูกเรียกว่าสิ่งนี้:

 foo'ATemplateStringProvidingArgumentsForFoo '; 

ฟังก์ชั่น foo เรียกว่า ฟังก์ชั่นแท็ก. อาร์กิวเมนต์แรกที่ได้รับจากเทมเพลตตัวอักษรคือ แถว เรียกว่า วัตถุแม่แบบ.

วัตถุแม่แบบ (อาร์เรย์) ถือ ค่าสตริงทั้งหมด ตีความจากเทมเพลตตัวอักษรและมี ดิบ property (อาร์เรย์อื่น) ที่เก็บ ค่าสตริง raw (un-escaped) ทั้งหมด ตีความจากตัวอักษรเดียวกัน.

หลังจากวัตถุแม่แบบข้อโต้แย้งของฟังก์ชั่นแท็กรวมถึง ทั้งหมด การประเมินผล ค่าภายนอก ปรากฏอยู่ในตัวอักษรนั้น (ที่อยู่ในวงเล็บปีกกา $ ).

ในรหัสด้านล่าง foo ฟังก์ชั่นถูกสร้างขึ้นเพื่อ เอาท์พุทข้อโต้แย้งของมัน. ฟังก์ชั่นนั้นเรียกว่า ในเทมเพลตที่ติดแท็ก, ด้วยเทมเพลตที่มีตัวอักษรสองตัว (ชื่อ และ รหัส).

 var name = "John"; var id = 478; foo'hello $ name ID ของคุณคือ: $ id. '; ฟังก์ชั่น foo () console.log (อาร์กิวเมนต์ [0]); // Array ["hello", ". id ของคุณคือ:", "." ] console.log (อาร์กิวเมนต์ [1]); // John console.log (อาร์กิวเมนต์ [2]); // 478 

อาร์กิวเมนต์แรกที่ส่งออกคือ วัตถุแม่แบบ ดำเนินการสตริงทั้งหมดตีความจากตัวอักษรแม่แบบข้อโต้แย้งที่สองและสามคือ ค่าที่ประเมิน ของการแสดงออก, ชื่อ และ รหัส.

ดิบ คุณสมบัติ

แม่แบบวัตถุมีดังต่อไปนี้ คุณสมบัติที่เรียกว่า ดิบ ซึ่งเป็นอาร์เรย์ที่มี ค่าสตริง raw (un-escaped) ทั้งหมด ตีความจากเทมเพลตตัวอักษร นี่คือวิธีที่คุณสามารถเข้าถึง ดิบ คุณสมบัติ:

 var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2 คุณเป็นอย่างไรบ้าง '; ฟังก์ชั่น foo () console.log (อาร์กิวเมนต์ [0]); // Array ["hello $ name1,", ", คุณเป็นอย่างไรบ้าง"] console.log (อาร์กิวเมนต์ [0] .raw); // Array ["hello \ $ name1,", ", คุณเป็นอย่างไรบ้าง"] console.log (อาร์กิวเมนต์ [1]); // Joan 

ใช้กรณีของเทมเพลตที่ติดแท็ก

เทมเพลตที่ติดแท็กจะมีประโยชน์เมื่อคุณต้องการ ทำลายสตริง แยกส่วนต่าง ๆ เช่นมักจะเป็นกรณีใน URL หรือในขณะที่แยกภาษา คุณจะได้พบกับคอลเลกชันของ แท็กตัวอย่างแม่แบบที่นี่.

นอกเหนือจาก IE แล้วเทมเพลตตัวอักษรคือ สนับสนุนในเบราว์เซอร์หลัก ๆ ทั้งหมด.

ด้านล่างคุณสามารถค้นหาตัวอย่างของฟังก์ชั่นแท็กด้วย ลายเซ็นที่แตกต่างกัน ที่แสดงถึงข้อโต้แย้ง:

 var name = "John"; foo'hello $ name คุณเป็นอย่างไรบ้าง '; bar'hello $ name คุณเป็นอย่างไรบ้าง '; ฟังก์ชัน foo (… args) console.log (args); // Array [Array ["hello", ", คุณเป็นอย่างไรบ้าง"], "John"] แถบฟังก์ชัน (strVals, ... exprVals) console.log (strVals); // Array ["hello", "คุณเป็นอย่างไรบ้าง?" ] console.log (exprVals); // Array ["John"] 

ใน บาร์ ฟังก์ชั่นพารามิเตอร์แรก (strVals) คือ วัตถุแม่แบบ และอันที่สอง (ที่ใช้ไวยากรณ์การแพร่กระจาย) เป็นอาร์เรย์ที่รวบรวม ค่านิพจน์ที่ประเมินทั้งหมด จากเทมเพลตตัวอักษรที่ส่งผ่านไปยังฟังก์ชัน.

ใส่สายเข้าด้วยกัน

ถ้าคุณต้องการ รับทั้งประโยค (มาจากตัวอักษร) ภายในฟังก์ชันแท็ก, เชื่อมต่อค่าทั้งหมด ของอาร์เรย์ที่มีสตริงเทมเพลตและค่านิพจน์ที่ประเมินค่า อย่างนี้:

 ฟังก์ชั่น foo (strs, … exprs) // หากมีการแสดงออกใด ๆ รวมอยู่ในตัวอักษรถ้า (exprs.length! == 0) var n = strs.length - 1, ผลลัพธ์ = "; สำหรับ (var i = 0 ; ผม < n; i++)  result += strs[i] + exprs[i];  result += strs[n]; console.log(result); //"Hello John."  // if there are no expressions included in the literal else console.log(strs[0]);  name = 'John'; foo'Hello $name.'; 

STRs อาร์เรย์ถือ สตริงทั้งหมด พบในตัวอักษรและ exprs ถือ ค่านิพจน์ที่ประเมินทั้งหมด จากตัวอักษร.

ถ้าแม้แต่หนึ่งค่านิพจน์ที่มีอยู่ต่อกันแต่ละค่าของอาร์เรย์ STRs (ยกเว้นอันสุดท้าย) ด้วยค่าดัชนีเดียวกันของ exprs. จากนั้นในตอนท้ายให้เพิ่มค่าสุดท้ายของ STRs อาร์เรย์กับสตริงที่ต่อกัน, สร้างประโยคที่สมบูรณ์ ทางนี้.