同义词:
模板文字
模板字符串
字符串模板
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>
自动用实际值替换表达式称为字符串插值。
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 字符串参考。
该参考包含所有字符串属性和方法的描述和示例。