Javascript 简明教程
JavaScript - Tempate Literals
JavaScript Tempate Literals
在 JavaScript 中, template literals 在 ES6 中引入,用于动态自定义字符串。模板文字允许你在字符串中添加变量或表达式,并且该字符串会根据变量和表达式值的变化而变化。
有很多同义词可用于模板文字。例如,模板字符串、字符串模板、反引号语法等。
Examples
Example: Creating Strings with Template Literals
在下面的示例中,我们使用模板文字创建了一个包含特殊字符的字符串。
str1 字符串与我们使用单引号或双引号创建的常规字符串相同。str2 字符串包含带有该字符串的单引号。这里你可以看到,我们没有使用转义字符在字符串中添加单引号。
<html>
<body>
<div id = "output1"> </div>
<div id = "output2"> </div>
<script>
let str1 = `Hello Users!`;
let str2 = `'Tutorialspoint' is a good website`;
document.getElementById("output1").innerHTML = str1;
document.getElementById("output2").innerHTML = str2;
</script>
</body>
</html>
Hello Users!
'Tutorialspoint' is a good website
Example: Variables with Template Literals
下面的代码演示了如何通过将变量传递到模板文字字符串中,在字符串中使用动态值。
在此,我们定义了与汽车相关的变量。之后,我们使用模板文字创建了一个字符串,并添加了这些变量。
在输出中,你可以看到字符串中的变量被它们的实际值替换。
<html>
<body>
<p id = "output"> </p>
<script>
let car = "BMW";
let model = "X5";
const price = 5000000;
const carStr = `The price of the ${car} ${model} is ${price}.`;
document.getElementById("output").innerHTML = carStr;
</script>
</body>
</html>
The price of the BMW X5 is 5000000.
Example: Expressions with Template Literals
你还可以使用模板文字将表达式添加到字符串中。
在 str1 字符串中,我们在模板文字字符串中添加了表达式来执行两个数字的求和。
在 str2 中,我们调用函数调用作为表达式。它使用函数返回的值替换该表达式。
<html>
<body>
<div id = "output1"> </div>
<div id = "output2"> </div>
<script>
function func() {
return 10;
}
const str1 = `The sum of 2 and 3 is ${2 + 3}.`;
const str2 = `The return value from the function is ${func()}`;
document.getElementById("output1").innerHTML = str1;
document.getElementById("output2").innerHTML = str2;
</script>
</body>
</html>
The sum of 2 and 3 is 5.
The return value from the function is 10
JavaScript Nested Template Literals
JavaScript 允许你在其他模板文字中使用模板文字,这称为嵌套模板文字。
Example
在下面的示例中,我们在外部模板文字中添加了表达式。该表达式包含三元运算符。它检查 2 是否小于 3。根据返回的布尔值,它执行第一个或第二个嵌套表达式并打印结果。
<html>
<head>
<title>Nested Template Literals</title>
</head>
<body>
<p id = "output"> </p>
<script>
const nested = `The subtraction result is: ${2 < 3 ? `${3 - 2}` : `${2 - 3}`}`;
document.getElementById("output").innerHTML = nested;
</script>
</body>
</html>
The subtraction result is: 1
Example: Multiline String Using Template Literal
你还可以使用模板文字来定义多行字符串。
<html>
<body>
<div id = "output"> </div>
<script>
function func() {
return 10;
}
const str1 = `The sum of 2 and 3 is ${2 + 3}. <br>
The return value from the function is ${func()}`;
document.getElementById("output").innerHTML = str1;
</script>
</body>
</html>
The sum of 2 and 3 is 5.
The return value from the function is 10