JavaScript 字符串模板

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;