目录

JavaScript 字符串模板

同义词:

  • 模板文字
  • 模板字符串
  • 字符串模板
  • Back-Tics 语法

Back-Tics 语法

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

示例

let text = `Hello World!`;

亲自试一试 »


字符串内的引号

字符串模板,您可以在字符串内使用单引号和双引号:

示例

let text = `He's often called "Johnny"`;

亲自试一试 »


多行字符串

字符串模板允许多行字符串:

示例

let text =
`The quick
brown fox
jumps over
the lazy dog`;

亲自试一试 »


插值法

字符串模板提供了一种将变量和表达式插入字符串的简单方法。

该方法称为字符串插值。

语法是:

${...}


变量替换

字符串模板允许字符串中的变量:

示例

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

亲自试一试 »

用实际值自动替换变量称为字符串插值


表达替换

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

示例

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

亲自试一试 »

用实际值自动替换表达式称为字符串插值


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>`;

亲自试一试 »


浏览器支持

Template Literals是一个ES6 特性(JavaScript 2015)。

所有现代浏览器都支持它:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Template LiteralsInternet Explorer 不支持。

完整的字符串参考

有关完整的字符串参考,请访问我们的:

完整的 JavaScript 字符串参考.

该参考包含所有字符串属性和方法的描述和示例。