为什么在typescript中使用${}用不了

最新推荐文章于 2024-01-19 22:39:05 发布

原创最新推荐文章于 2024-01-19 22:39:05 发布 · 4.2k 阅读

CC 4.0 BY-SA版权

文章标签：

本文分享了作者在使用TypeScript过程中遇到的关于反引号和模板字符串的使用技巧，详细解释了反引号如何替代双引号，简化字符串内变量插入，并展示了其在多行文本和表达式插入方面的优势。

作为一个初学者，因为之前没有看ES6的新语法，所以在使用ts的过程中出现了一个很难发现的问题，就是下面的代码。

function buggun(_gun:string,num:number):string{
    return "这里是捡【${_gun}】的好地方，我给你${num}把";
}
console.log(buggun('m4',2));

但是打印之后是

这里是捡【${_gun}】的好地方，我给你${num}把

这里我看了好久都没明白，终于让我发现反引号这个新天地。``
于是以下的代码完美运行

function buggun(_gun:string,num:number):string{
    return `这里是捡【${_gun}】的好地方，我给你${num}把`;
}
console.log(buggun('m4',2));

这里是捡【m4】的好地方，我给你2把

这里简单总结以下网上的反引号的使用。
1.用反引号代替最基本的双引号，如下

return "这里是捡【${_gun}】的好地方，我给你${num}把"   变成
return `这里是捡【${_gun}】的好地方，我给你${num}把`。

2.``里面的文本可以不用刻意去使用换行符。

console.log(`这里有小姐姐
真的吗？`);

打印之后是

这里有小姐姐
真的吗？

3.反引号中的${expression}占位符中expression可以为任意的JavaScript表达式，甚至为模板字符串。

`string text ${expression} string text`

4.如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以在通过该函数对模板字符串来进行操作处理。

tag `string text ${expression} string text`

以上就是我对单引号的基本理解。