基本用法

在ES6之前,將字符串連接到一起的方法是+或者concat()方法,如

const student = {
  name: 'Richard Kalehoff',
  guardian: 'Mr. Kalehoff'
};

const teacher = {
  name: 'Mrs. Wilson',
  room: 'N231'
}

let message = student.name + ' please see ' + teacher.name + ' in ' + teacher.room + ' to pick up your report card.';

模板字面量用倒引號 (``)（而不是單引號 ( '' ) 或雙引號( "" )）表示，可以包含用 ${expression} 表示的占位符

let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;

多行字符串

在ES6之前，通常都依靠數(shù)組或字符串的拼接來創(chuàng)建多行字符串

var message = ["Multiline ","string"].join("\n");
let message = "Multiline \n" +"string";

ES6 的模板字面量使多行字符串更易創(chuàng)建，因?yàn)樗恍枰厥獾恼Z法，只需在想要的位置直接換行即可，此處的換行會同步出現(xiàn)在結(jié)果中

let message = `Multiline
string`;
// "Multiline
// string"
console.log(message); 
console.log(message.length); // 16

變量占位符

變量占位符由起始的 ${ 與結(jié)束的 } 來界定，之間允許放入任意的 JS 表達(dá)式。最簡單的變量占位符允許將本地變量直接嵌入到結(jié)果字符串中。

let name = "Nicholas",
message = `Hello, ${name}.`;
console.log(message); // "Hello, Nicholas."

占位符 ${name} 會訪問本地變量 name ，并將其值插入到 message 字符串中。 message變量會立即保留該占位符的結(jié)果

既然占位符是JS表達(dá)式，那么可替換的就不僅僅是簡單的變量名?？梢暂p易嵌入運(yùn)算符、函數(shù)調(diào)用等

let count = 10,
price = 0.25,
message = `${count} items cost ${(count * price).toFixed(2)}.`;
console.log(message); // "10 items cost $2.50."