การใช้สตริงเทมเพลตเฉพาะใน ES6

เมื่อเร็วๆ นี้ ฉันได้ใช้สตริงเทมเพลต ES6 ในโปรเจ็กต์ของฉัน ซึ่งสรุปไว้ที่นี่

1. ก่อนหน้านี้เรายังสามารถใช้ JavaScript เพื่อส่งออกสตริงเทมเพลต โดยปกติจะเป็นดังนี้:

$("#result").append(
    "เขาคือ <b>"+person.name+"</b>"+"และเราอยากรู้ว่า"+person.age+"ของเขาคือทั้งหมด" 
    );

แต่เราจะเห็นว่าแนวทางดั้งเดิมนี้ต้องใช้ "" จำนวนมาก (เครื่องหมายคำพูดคู่) และ + เพื่อต่อเข้าด้วยกันเพื่อให้ได้เทมเพลตที่เราต้องการ แต่นี่ไม่สะดวกมาก

ดังนั้น ES6 จึงจัดเตรียมสตริงเทมเพลตซึ่งมีเครื่องหมาย ` (backtick) และตัวแปรจะล้อมรอบด้วย ${} ตัวอย่างข้างต้นสามารถเขียนได้ดังต่อไปนี้โดยใช้สตริงเทมเพลต:

$("#result").append(
  `เขาคือ <b>${person.name}</b>และเราอยากจะรู้จัก ${person.age} ของเขา แค่นั้นเอง`
    );

วิธีนี้ง่ายกว่ามาก เราไม่จำเป็นต้องใช้ "" และ + จำนวนมากเพื่อประกบสตริงและตัวแปรอีกต่อไป

2. แน่นอน คุณสามารถใส่ตัวแปรลงในสตริงเทมเพลตได้ และยังสามารถไม่ใช้ตัวแปรได้อีกด้วย ดังที่แสดงด้านล่าง:

` ฉันเป็นผู้ชาย`

` ไม่ว่าคุณจะทำอะไร

ฉันเชื่อใจคุณ'

'

3. นอกจากนี้เรายังสามารถกำหนดตัวแปรก่อน แล้วจึงฝังตัวแปรในสตริงเทมเพลต:

var name="zzw";
` ${name} ไม่ว่าคุณจะทำอะไรก็ตาม
 ฉันเชื่อใจคุณ'

4. แน่นอน เนื่องจาก backtick เป็นตัวระบุของสตริงเทมเพลต ถ้าเราจำเป็นต้องใช้ backtick ในสตริง เราจำเป็นต้องหลีกเลี่ยงมัน ดังต่อไปนี้:

`ไม่ว่าคุณจะทำอะไรก็ตาม
ฉันเชื่อใจคุณ

' 5. หมายเหตุ: หากคุณใช้สตริงเทมเพลตเพื่อแสดงสตริงหลายบรรทัด ช่องว่างและการเยื้องทั้งหมดจะถูกบันทึกไว้ในเอาต์พุต! -

console.log( `ไม่ว่าคุณจะทำอะไรก็ตาม
 ฉันเชื่อใจคุณ`)

;

6. คุณสามารถใส่นิพจน์ JavaScript ใดๆ ลงในวงเล็บปีกกาใน ${} ดำเนินการ และอ้างอิงคุณสมบัติของออบเจ็กต์

วาร์ x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`);

ผลลัพธ์จะเป็นดังนี้:

7. มีประสิทธิภาพมากยิ่งขึ้น: สตริงเทมเพลตยังสามารถเรียกใช้ฟังก์ชันได้:

function string(){
  กลับ "zzw ชอบ es6!";
-
console.log(`คุณต้องการจะพูดอะไร? ก็ ${string()}`)

;

นอกจากนี้ หากผลลัพธ์ของฟังก์ชันไม่ใช่สตริง ก็จะถูกแปลงเป็นสตริงตามกฎทั่วไป:

function string(){
    กลับ 666;
  -
  console.log(`คุณต้องการจะพูดอะไร? ก็ ${string()}`)

;

ในที่นี้ ตัวเลข 666 จะถูกแปลงเป็นสตริง 666 จริงๆ

8. หากไม่ได้ตั้งชื่อตัวแปรใน ${} จะมีการรายงานข้อผิดพลาด:

console.log(`What do you want to say? Well, ${string( )}`);

ในโค้ดข้างต้น ไม่มีการประกาศฟังก์ชัน string() ดังนั้นจึงมีการรายงานข้อผิดพลาด:

9. ในความเป็นจริง เราสามารถป้อนสตริงใน ${} ได้ และผลลัพธ์ความรู้จะยังคงส่งคืนสตริง:

console.log(`คุณต้องการพูดอะไร? ก็ ${"จริงๆ แล้ว ฉันไม่ใช่ตัวแปร ~"}`) ;

ผลลัพธ์จะเป็นดังนี้:

10. หากคุณต้องการอ้างอิงสตริงเทมเพลต คุณสามารถเขียนได้ดังนี้:

Let str="return"+"`Hello! ${name}`";
ให้ func=new Function("name",str);
 console.log(func("zzw"));

ผลลัพธ์จะเป็นดังนี้: