Back-Tics 语法
模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串:
let text = `Hello world!`;
let text1 = "Hello world!";
字符串内的引号通过使用模板字面量,您可以在字符串中同时使用单引号和双引号:
let text2 = `My name is "rose"`;
多行字符串模板字面量允许多行字符串
模板字面量提供了一种将变量和表达式插入字
let text =
`My name
is rose
I am
from china`;
符串的简单方法,该方法称为字符串插值${...}用真实值自动替换变量称为字符串插值。
//变量替换
let name="rose";
let fex="girl";
let text3= `My name is ${name},I am ${fex}`;
document.getElementById("demo3").innerHTML=text3;
表达式替换模板字面量允许字符串中的表达式:
//允许字符串中的表达式
let price = 20;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
document.getElementById("demo4").innerHTML = total;
HTML 模板
//HTML 模板
let header = "My name is ";
let tags = ["rose", "lucy", "tina"];
let html = `<h3>${header}</h3><ol>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ol>`;
document.getElementById("demo5").innerHTML = html;