js和html构成模板字符串,ES6: 模板字符串_JavaScript, JavaScript学习笔记, ES6, 会员专栏 教程_W3cplus...

ES6中引入了模板字符串(Template Literal)，是创建字符串的一种新方法。有了这个新特性，我们就能更好地控制动态字符串。这将告别长串连接字符串的日子。

要创建一个模板字符串，我们可以使用反引号(撇号)字符替找单引号'或"。这将产生一个新的字符串，我们可以以任何方式使用它。

基本用法：

let newString = `A string`;

多行

模板字符串最大的好处在于，可以使用它创建多行字符串。在过去，如果想要创建一个多行的字符串，必须使用\n或换行字符。

// ES5

var myMultiString = 'Some text that i want\nOn two lines!'

使用一个模板字符串，我们可以直接将换行添加到字符串中，就像我们写的那样：

var myMultiString= `This will be

on two lines!`;

这将生成一个字符串，其中包含一个换行。使用这种方式创建多行字符串，如果第二行有空白字符串的话，那么这些空白字符串都是字符串本身的一部分。比如：

var myMultiString = `This will be

on two lines`;

var myMultiString2 = `This will be

on two lines`;

console.log(myMultiString);

console.log(myMultiString.length);

console.log(myMultiString2)

console.log(myMultiString2.length);

使用表达式进行操作的能力使用模板字符串成为一种非常漂亮的模板语言，用于构建我们后成所要讲的HTML占位符是非常有用。但是连接呢？让我们看看如何动态地将值添加到新的模板文件中。

表达式

在新的模板字符串中有了表达式的功能，它们看起来像这样：${expression}。比如像下面这样的代码：

let name = `Ryan`;

console.log(`Hi my name is ${name}`);

${}允许我们在大括号中添加一个表达式，它将产生一个值。在我们的示例中，它只包含了一个字符串变量name。这里有一些需要注意的地方：如果你想添加一个值，像上面的代码一样，那么你不需要在模板字符串中使用name变量。你可以直接使用这个值。

console.log(`Hi my name is ${Ryan}`);

输出的结果是相同的。这些表达式不仅可以让我们放入包含字符串的变量，也可以放置我们想要的任何表达式。

let price = 19.99;

let tax = 1.13;

let total = `The total prices is ${price * tax}`;

console.log(total); // => The total prices is 22.588699999999996

我们也可以用于一个更为复杂的对象：

let person = {

firstName: `Ryan`,

lastName: `Christiani`,

sayName() {

return `Hi my name is ${this.firstName} ${this.lastName}`;

}

}

console.log(person.sayName()); // => Hi my name is Ryan Christiani

这里有一个person对象，对象中有一个sayName()方法。我们可以从${}语法内访问对象的属性。

HTML模板

使用多行字符串并使用模板表达式将内容添加到我们的字符串中，这使得在我们的代码中使用HTML模板变得非常简易好用。

假设我们从一个API中得到一些数据看起来像这样：

{

"id": 1,

"name": "Bulbasaur",

"base_experience": 64,

"height": 7,

"is_default": true,