JavaScript反引号``（模板字符串）的用法

1.模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

2.基本用法

模板字符串中的换行和空格都是会被保留的

(1)反引号可以换行

const str =  `hello 
is a \`string`
console.log(str);

//结果为
hello 
is a `string

(2)反引号里面可以格式化字符串→ ${}

const name = "张三"
const str = `我是${name}, 我的年龄是${10 + 10}, 我抽到的一个随机数是${Math.random()}`
console.log(str)
//结果为
我是张三, 我的年龄是20, 我抽到的一个随机数是0.8833563095441197

2、反引号与函数关系

(1)反引号还可以调用函数

const name = '张三';
const gender = true;
function myTagFunc(strings){
    console.log(strings)
}
const str = myTagFunc`你好!${name}是一个${gender}` 

[ ‘你好!’, ‘是一个’, ‘’ ]

观察发现规律：反引号调用函数会自动将字符串分割为列表，并且是以 为 分 隔 符 ， 将 {}为分隔符，将 为分隔符，将{}转换成[,空格]。

如果最后以${}结尾，会多出一个’’，

如果最后不是以${}结尾，则是这样的：

(2)${}可以给函数传递参数

const name = 'zs';
const gender = true;
function myTagFunc(strings,name,gender){
    console.log(strings,name,gender)
}
const str = myTagFunc`你好!${name}是一个${gender}呀` 

[ ‘你好!’, ‘是一个’, ‘呀’ ] zs true

(3)拼接参数

const name = '张三';
const gender = true;
function myTagFunc(strings,name,gender){
    const sex = gender ? '男' : '女'; // 根据true或false判断gender方法，常用必记
    return strings[0]+name+strings[1]+sex+strings[2]
}
const str = myTagFunc`${name}是一个${gender}生` 
console.log(str);

张三是一个男生