字符串模板

1.字符串模板基本使用

在ES6之前，想要将字符串和一些动态变量（标识符）拼接在一起，是非常麻烦的。

但是在ES6中提供了一种模板字符串 template string： 。使用 符号来编写字符串，这个字符串就称之为模板字符串。
这个使用 的模板字符串和使用普通引号括起来的字符串的最大的区别就是在``中可以使用${expression}来嵌入动态内容。
例一：

const name = 'why'
const age = 18
const height = 1.88
const message = `my name is ${name},age is ${age},height is ${height}`
1
2
3
4

例二：
不仅仅可以在${}中放入变量，还能放表达式。

const name = 'why'
const age = 18
const height = 1.88
const info = `age double is ${age * 2}`
1
2
3
4

例三：
还可以在${}中进行函数调用。

const name = 'why'
const age = 18
const height = 1.88

function doubleAge(){
  return age * 2
}

const info1 = `double age is ${doubleAge()}`
1
2
3
4
5
6
7
8
9

2.标签模板字符串的使用

模板字符串还有另外一个用法：标签模板字符串（Tagged Template Literals).
例一：
如果在函数中使用模板字符串，并且在调用的时候插入其他变量：
1）使用标签模板字符串调用函数

function foo(m, n, x) {
    console.log(m, n,x);
    
}

// 另外调用函数的方式：标签模板字符串
foo``   //不传参方式
1
2
3
4
5
6
7

2）在调用函数的同时并传参

function foo(m, n, x) {
    console.log(m, n,x);    
}
foo`Hello world` // 这里是将Hello world作为函数第一个参数m传入  ['Hello world'] undefined undefined
1
2
3
4

3）传递的参数中插入其他变量

function foo(m, n, x) {
    console.log(m, n,x);    
}

// 如果在模板字符串中加入${}
// 第一个参数依然是模板字符串中整个字符串，只是被切成多块，放到了一个数组中
// 第二个参数是模板字符串中，第一个${}中的内容
// 第三个参数就是模板字符串中，第二个${}中的内容
const name = 'why'
const age = 18
foo`Hello${name}Wo${age}rld`    // ['Hello','Wo','rld']  why 18
foo`Hello${111}W${name}o${age}rld`  
1
2
3
4
5
6
7
8
9
10
11
12