JavaScript 模板文字


目录

    显示目录

同义词:

  • 模板文字

  • 模板字符串

  • 字符串模板

  • Back-Tics 语法

Back-Tics 语法

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

例子

let text = `Hello World!`;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals use back-ticks (``) to define a string:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text = `Hello world!`;
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

字符串内的引号

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

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>With back-ticks, you can use both single and double quotes inside a string:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

多行字符串

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

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows multiline strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text =

`The quick
brown fox
jumps over
the lazy dog`;

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

插值法

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

该方法称为字符串插值。

语法是:

${...}


变量替换

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

例子

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

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let firstName = "John";
let lastName = "Doe";

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

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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


表达替换

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

例子

let price = 10;
let VAT = 0.25;

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

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

document.getElementById("demo").innerHTML = total;
</script>

</body>
</html>

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


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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
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>`;
document.getElementById("demo").innerHTML = html;
</script>

</body>
</html>

浏览器支持

模板文字 是 ES6 功能 (JavaScript 2015)。

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

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Internet Explorer 不支持模板文字

完整的字符串参考

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

完整的 JavaScript 字符串参考。

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