String 模板

String 模板

Back-Tics 语法

模板字面量使用反引号( `)而不是("")来定义字符串

let text = `I'm handsome.`

通过使用模板字面量，可以在字符串中同时使用单引号和双引号

变量替换

let firstName = "Yao";
let lastName = "Xinyu";
let fullName = `Welcome ${firstName}, ${lastName}!`//Welcome Yao Xinyu!

表达式替换

模板字面量允许字符串中的表达式

let price = 10;
let VAT = 0.25;

let total = `Total:${(price * (1 + VAT)).toFixed(2)}`;//toFixed() 保留小数
//Total: 12.50

HTML模板

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;