javascript 模板_什么是Javascript中的模板文字以及为什么要使用它们

javascript 模板

在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/

翻译自: https://hackernoon.com/what-are-template-literals-in-javascript-and-why-you-should-use-them-ese03yxu

javascript 模板