直到ES6推出,JavaScript才从来没有一种优雅的方式来处理字符串。 ES6引入了一种称为模板文字的东西,它使JavaScript可以更有效,更优雅地处理多行字符串。
模板文字的语法
模板文字不打算在现有的JavaScript字符串中添加其他功能,而是尝试以新的方式解决问题。 因此,引入了新的语法。 可以使用反引号(`)来分隔字符串,而不是使用单引号或双引号。
// This is how strings were declared pre ES6
var earlierStrings = 'How strings were declared pre ES6' ;
// Declaring strings using template literals in ES6
let templateLiterals = `How strings can be declared post ES6` ;
console .log( typeof earlierStrings); // "string"
console .log( typeof templateLiterals); // "string"
模板文字是JavaScript中多行字符串的答案
在ES6之前,多行字符串一直是一个问题,因为使用双引号和单引号声明了字符串。 这是一个问题,因为当您使用双引号或单引号声明字符串时,字符串必须完全包含在一行中。 让我们看一下开发人员过去如何在JavaScript代码中插入多行HTML,以了解模板文字是如何蓬勃发展的。
var profile = '' +
' <div class="profile">\n' +
'\n' +
' <div class="name">John Doe </div>\n'
'\n' +
' <div class="designation">Web Developer</div>\n'
'\n' +
' </div>\n' ;
您当然可以看到多行连接,并且每个字符串都包含在单行中,该单行已经使用单引号声明了。 可以使用以下语法使用模板文字来简化此操作。
let profile = `
<div class="profile">
<div class="name">John Doe </div>
<div class="designation">Web Developer</div>
</div>` .trim();
使用模板文字,它非常干净和容易。 trim功能已用于消除div标记之前的空白空间,这不是强制性的。
使用模板文字替换动态填充数据
模板文字不仅是在ES6中声明字符串的一种好方法。 模板文字的真正力量可以通过替换来理解。 使用替换,您可以在使用模板文字声明的字符串中动态填充数据,就像使用模板引擎可以完成的那样。 让我们看下面的例子:
let data = {
name : 'John Doe' ,
designation : 'Web Developer'
}
let profile = `
<div class="profile">
<div class="name"> ${date.name} </div>
<div class="designation"> ${data.designation} </div>
</div>` .trim();
可以使用以下语法${}
来代替。 如果考虑以上代码示例,您将意识到替换可以在其中包含JavaScript表达式。 能够在替换内计算JavaScript表达式的功能使其真正强大,并成为ES6的诱人功能。
标记模板文字
模板文字可以在模板文字本身声明之前有一个标记。 此标记的作用类似于普通的javascript函数,该函数返回文字数组以及函数本身内的替换项。 然后可以在函数中使用文字和替换文字,并对其进行操作以返回所需的数据,这些数据将作为模板文字的最终输出。 首先让我们声明模板文字,然后为其分配标签。
let data = {
name : 'John' ,
age : '30'
}
let profile = `My name is ${data.name} and I am ${data.age} years old.`
console .log(profile);
// "My name is John and I am 30 years old."
这是一个简单的模板文字。 现在,我们可以在概要文件模板文字上添加一个新标记作为功能名称,然后可以在功能中使用文字和替换内容。 这是您的操作方式。
function tagFunction ( literals, ...substitutions ) {
console .log(literals);
// Returns: ["My name is ", " and I am ", " years old."]
console .log(substitutions);
// Returns: ["John", "30"]
}
let data = {
name : 'John' ,
age : '30'
}
let profile = tagFunction `My name is ${data.name} and I am ${data.age} years old.`
在上面的示例中,您可以看到在函数内以数组形式提供参数时提供了文字和替换。 您可以使用此信息来操作模板文字中的数据,并返回一个全新的字符串。
function tagFunction ( literals, ...substitutions ) {
return ` ${literals [ 0 ]} Steve ${literals [ 1 ]} 25 ${literals [ 2 ]} `
}
let data = {
name : 'John' ,
age : '30'
}
let profile = tagFunction `My name is ${data.name} and I am ${data.age} years old.`
console .log(profile);
// "My name is Steve and I am 25 years old."
使用上面的示例中的tagFunction()
,我们已经能够完全覆盖模板文字返回的字符串。 这只是一个小例子,但应该使您对它添加到JavaScript字符串中的功能有一个清晰的了解。
先前发布在 https://cloudaffle.com/template-literals-in-javascript/
From: https://hackernoon.com/what-are-template-literals-in-javascript-and-why-you-should-use-them-ese03yxu