$ {} (เครื่องหมายดอลลาร์และเครื่องหมายปีกกา) หมายความว่าอะไรในสตริงใน Javascript


160

ฉันไม่เห็นอะไรที่นี่หรือใน MDN ฉันแน่ใจว่าฉันเพิ่งพลาดบางสิ่ง จะต้องมีเอกสารเกี่ยวกับเรื่องนี้อยู่ที่ไหนสักแห่ง?

ฟังก์ชั่นดูเหมือนว่าจะช่วยให้คุณสามารถซ้อนตัวแปรภายในสตริงโดยไม่ต้องต่อข้อมูลโดยใช้+โอเปอเรเตอร์ ฉันกำลังมองหาเอกสารเกี่ยวกับคุณสมบัตินี้

ตัวอย่าง:

var string = 'this is a string';

console.log(`Insert a string here: ${string}`);


คุณสามารถให้บริบทกับสิ่งที่คุณถามได้ไหม คำถามนี้ไม่ชัดเจนเท่าที่เขียน
Sam Hanley


5
นี่ไม่ใช่คำถามที่ไม่ดี มันเป็นคุณสมบัติใหม่และฉันแน่ใจว่าไม่สามารถหาสิ่งที่ซ้ำกันใน SO แม้ว่าตัวอย่างของสิ่งที่เห็นว่าจะดี

@ squint— เห็นด้วย แต่โค้ดตัวอย่างและการอ้างอิงถึงแหล่งข้อมูลจะมีประโยชน์
RobG

ตัวอย่างที่เพิ่มเข้ามา การอ้างอิงอยู่ในความท้าทายในการเขียนโค้ด แต่เป็นข้อมูลที่ให้มาราวกับว่าเป็นสิ่งที่คุณเพิ่งใช้ ไม่เห็นอะไรเลยและไม่พบอะไรเลย (ในช่วงหลายปีที่ผ่านมาฉันไม่เคยถามคำถามที่นี่ดังนั้นดูเหมือนว่าจะมีเกือบทุกอย่างตอนนี้ ... )
Darren Joy

คำตอบ:


192

คุณกำลังพูดถึงตัวอักษรแม่แบบ

อนุญาตสำหรับทั้งสตริงหลายบรรทัดและการแก้ไขสตริง

สตริงหลายเส้น:

console.log(`foo
bar`);
// foo
// bar

การแก้ไขสตริง:

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar


67
สิ่งหนึ่งที่ทำให้ฉันสับสนเป็นเวลานานคือตัวอักษรเทมเพลตใช้ backtick ซึ่งอยู่ทางซ้ายของ "1" บนคีย์บอร์ดแทนที่จะเป็นเครื่องหมายคำพูดเดี่ยว (')
ซิดนีย์

19
เจ๋ง: คุณสามารถ "ฉีด" รหัส:console.log(`Your array:\n ${arr.join('\n ')}`)
T4NK3R

5
มันแปลกที่Template Literalไม่รองรับใน IE หรืออาจเป็นเรื่องปกติสำหรับ IE ที่จะไม่สนับสนุนสิ่งดีๆ อ่านเพิ่มเติม
Mohammad Musavi

12

ดังที่ได้กล่าวไว้ในความคิดเห็นด้านบนคุณสามารถมีนิพจน์ภายในสตริง / ตัวอักษรเทมเพลต ตัวอย่าง:

const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3


ถูกต้องหรือไม่ที่จะบอกว่าสตริงเทมเพลตสามารถใช้ฉีดโค้ดลงในสตริงได้หรือไม่?
carloswm85

คุณกำลังฉีดนิพจน์และนิพจน์เป็นรหัส คุณไม่สามารถแทรกโค้ดประเภทใดก็ได้ แต่มีเพียงนิพจน์ JavaScript เท่านั้น
Joel H

ฉันจะพยายามที่จะเฉพาะเจาะจงมากขึ้น เมื่อใช้ตัวอักษรสตริงฉันสามารถฉีดนิพจน์เช่นobj.valueภายในสตริงใด ๆ โดยใช้เครื่องหมาย $ {} ขวา?
carloswm85

ใช่และคุณสามารถลองด้วยตัวเองในคอนโซลเช่นhey ${obj.name}
Joel H

0

คุณยังสามารถทำการแปลงประเภทโดยนัยด้วยตัวอักษรเทมเพลต ตัวอย่าง:

let fruits = ["mango","orange","pineapple","papaya"];

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.