JavaScript 字符串模板
JavaScript基础 2022-04-25 01:31:50小码哥的IT人生shichen
JavaScript 字符串模板
同义词：
- Template Literals
- Template Strings
- String Templates
- Back-Tics 语法
Back-Tics 语法
模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串：
示例代码：
let text = `Hello World!`;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 模板字面量</h2>
<p>模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持模板字面量。</p>
<script>
let text = `Hello world!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
运行结果：
Javascript 模板字面量
模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串：
Hello world!
Internet Explorer 不支持模板字面量。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
字符串内的引号
通过使用模板字面量，您可以在字符串中同时使用单引号和双引号：
示例代码：
let text = `He's often called "Johnny"`;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 模板字面量</h2>
<p>通过使用反引号，您可以在字符串中同时使用单引号和双引号：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持模板字面量。</p>
<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
运行结果：
Javascript 模板字面量 通过使用反引号，您可以在字符串中同时使用单引号和双引号： He's often called "Johnny" Internet Explorer 不支持模板字面量。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
多行字符串
模板字面量允许多行字符串：
示例代码：
let text =
`The quick
brown fox
jumps over
the lazy dog`;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 模板字面量</h2>
<p>模板字面量允许多行字符串：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持模板字面量。</p>
<script>
let text =
`The quick
brown fox
jumps over
the lazy dog`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
运行结果：
Javascript 模板字面量 模板字面量允许多行字符串： The quick brown fox jumps over the lazy dog Internet Explorer 不支持模板字面量。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
插值
模板字面量提供了一种将变量和表达式插入字符串的简单方法。
该方法称为字符串插值（string interpolation）。
语法
${...}变量替换
模板字面量允许字符串中的变量：
示例代码：
let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 模板字面量</h2>
<p>模板字面量允许字符串中的变量：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持模板字面量。</p>
<script>
let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
运行结果：
Javascript 模板字面量 模板字面量允许字符串中的变量： Welcome Bill, Gates! Internet Explorer 不支持模板字面量。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
用真实值自动替换变量称为字符串插值。
表达式替换
模板字面量允许字符串中的表达式：
示例代码：
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 模板字面量</h2>
<p>模板字面量允许字符串中的表达式：</p>
<p id="demo"></p>
<p>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>
运行结果：
Javascript 模板字面量 模板字面量允许字符串中的表达式： Total: 12.50 Internet Explorer 不支持模板字面量。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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 模板字面量</h2>
<p>模板字面量允许字符串中的变量：</p>
<p id="demo"></p>
<p>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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
Internet Explorer 不支持模板字面量。
第一个完全支持模板字面量的浏览器版本是：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 41 | Edge 13 | Firefox 34 | Safari 10 | Opera 29 |
| 2015 年 3 月 | 2015 年 11 月 | 2014 年 12 月 | 2016 年 9 月 | 2015 年 4 月 |
