在 javascript 的 es6 版本中，引入了文字。 javascript 包含对象文字、数组文字、数字文字、regexp 文字等。此外，它还包含字符串文字。
字符串文字允许我们创建不带任何反斜杠字符的多行字符串，在引号中添加任何单词或句子，以及在字符串之间添加变量和数学表达式。
语法用户可以按照以下语法在 ecmascript 6 中使用模板字符串文字。
let string = `this is template literal string!`;
在上面的语法中，我们使用反引号 (``) 来创建模板文字字符串。
示例 1（多行字符串）在下面的示例中，我们使用模板文字字符串来创建多行字符串。每当我们创建带引号的字符串时，我们都需要使用“
”字符来创建新行，但是使用字符串文字，我们可以通过在新行中写入字符串来实现。
在 string1 中，新行是通过在新行中写入字符串来创建的，而在 string2 中，我们使用“
”字符来创建新行。用户可以观察输出中的 string1 和 string2，它们看起来是相同的。
let string1 = `this is first line.this is the second line.this is the third line.this is the fourth line.`;console.log(string1);// added character to create a multiline string.let string2 = welcome on the tutorialspoint!;console.log(string2);
示例 2（字符串中的引号）我们可以使用模板字符串文字在字符串内添加引号。当我们创建带有双引号的字符串时，我们只能为该字符串添加单引号，而当我们创建带有单引号的字符串时，我们也只能为该字符串添加双引号。
我们使用字符串文字在 stringquote 变量的字符串中添加了单引号。
<html><body> <h2>using the <i>template string literals</i> to add quotes in the string.</h2> <div id = output></div></body><script> var output = document.getelementbyid('output'); let stringquotes = `this is a 'template string literals' with a quote.`; output.innerhtml += stringquotes + <br/>; let string1 = this is 'similar to template string literals'. + <br/>; output.innerhtml += string1;</script></html>
示例 3（字符串中的变量）在下面的示例中，我们在字符串中完成了变量替换。一般来说，要在字符串中使用变量，我们需要使用“+”运算符并连接多个字符串，但模板字符串文字允许我们直接在字符串中添加变量。我们可以在 ${} 表达式中添加变量。
在variablestr变量的值中，我们插入了name、job和timeperiod变量。
<html><body> <h2>using the <i>template string literals </i> to add variables in the string.</h2> <div id = output> </div></body><script> var output = document.getelementbyid('output'); let name = shubham; let job = content writer; let timeperiod = 1 year; let variablestr = `using template string literals :- ${name} is a ${job} at tutorialspoint from last ${timeperiod}.`; output.innerhtml += variablestr + <br/>; let string = using quotes :- + name + is a + job + at tutorialspoint from last + timeperiod + . ; output.innerhtml += string + <br/>;</script> </html>
示例 4（字符串中的表达式）在此示例中，我们将使用模板字符串文字在字符串中添加数学表达式。在 sumstring 中，我们在 ${} 内添加了数学表达式。用户可以看到我们如何在字符串中对 num1 和 num2 求和。
此外，我们还对 string2 中的 2 个值进行了乘法运算。
<html><body> <h2>using the <i> template string literals </i> to add expression in the string.</h2> <div id = output> </div></body><script> var output = document.getelementbyid('output'); let num1 = 10; let num2 = 40; let sumstring = `the sum of ${num1} and ${num2} is ${num1 + num2}`; output.innerhtml += sumstring + <br>; let string2 = `the multiplication of 20 and 5 is ${20 * 5}`; output.innerhtml += string2 + <br>;</script></html>
示例 5（字符串中的 html）我们可以使用模板字符串文字创建一行 html 并将其添加到网页中。在此示例中，我们使用字符串文字创建了 html 列表，并使用 的innerhtml 属性在网页中添加行 html。
<html><body> <h2>using the <i>template string literals</i> to add html to the document.</h2> <div id = output> </div></body><script> var output = document.getelementbyid('output'); let htmlstring = `<ul> <li> one </li> <li> two </li> <li> three </li> <li> four </li> <li> five </li> </ul>`; output.innerhtml = htmlstring;</script></html>
用户学会了在 javascript 中使用模板字符串文字。我们已经了解了如何创建多行字符串、变量和表达式替换、添加引号以及使用模板字符串文字创建行 html。
以上就是如何在 ecmascript 6 中使用模板字符串文字？的详细内容。