1、反引号`用法

(1)反引号可以换行

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

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

const name = "tom"
const str = `hey, ${name}, ${1 + 1}, ${Math.random()}`
console.log(str)

2、反引号与函数关系

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

const name = 'zs';
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);

你好!张三是一个男呀

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐