TS中使用模板字符串

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

1. 模板字符串

模板字符串（template string）是增强版的字符串，用反引号（``）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。解决了字符串拼接的痛点

大括号内部可以：进行运算，引入对象，调用函数，以及任意的 JavaScript 表达式。

如果大括号中的值不是字符串，将会调用toString方法，将值转换成为字符串，然后再拼接。

1.1 多行字符串

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
```
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
```
上面代码中，所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。
```
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());//去除换行
```

1.2 插入属性

通过 ${}语法，向模板字符串中插入属性。

注意：属性的toString方法和对象的toString方法不是同一个方法。

interface Person {
   name: string,
   age: number,

   toString(): string
}

let tom: Person = {
   age: 20,
   name: "tom",
    //这个toString是对象的
   toString(): string {
      return `age:${this.age},name:${this.name}`
   }
}

let str1: string = `插入变量${tom.name}`//将会调用属性的toString()方法

1.3 插入对象

如果是直接插入一个对象，则会调用对象的toString方法将对象转换为字符串，然后再拼接。

这里我们覆写了对象的toString方法，所以会调用我们覆写的方法进行转换。

let tom: Person = {
   age: 20,
   name: "tom",
   //调用我们覆写的 
   toString(): string {
      return `age:${this.age},name:${this.name}`
   }
}

let str1: string = `插入对象${tom}`//将会调用对象的toString()方法。

1.4 进行运算

在大括号内还可以进行运算。

let str1 = `进行运算：${tom.age * 20}`

1.5 使用表达式

在大括号内还可以使用表达式

let str1 = `使用表达式：${tom.age >= 18 ? '成年了' : '未成年'}}`

1.6 调用函数

可以调用函数，会将函数的返回值进行拼接

function test(): string {
   return "hello word"
}

let str = `调用函数：${test()}`

如果函数返回的不是字符串，将会调用该返回值的toString方法，和上面插入属性，插入对象是一样的。

总结

通过（``）来定义模板字符串，
在模板字符串中可以使用 ${}来拼接内容。
在大括号内可以：进行运算，引入对象/属性，调用函数，以及使用表达式
如果大括号的值不是一个字符串，将会调用toString方法将其转换为字符串，然后再拼接
模板字符串支持多行字符串，并会保留换行符和空格，如果想不用换行可以使用.trim()去除换行