一个关于模板字符串的使用技巧,以及 String.raw 函数

在做前端开发的时候,我们经常会需要在 JavaScript 文件中书写 html 或者 css。在这种场景下,使用模板字符串是个很好的方式,这样就不需要进行复杂而丑陋的字符串拼接了。

SomeHats 在 twitter 上给出了一个使用模板字符串的技巧:

仔细看两张图,应该观察到不同了吧。

直接使用模板字符串赋值 ... 时,编辑器没有对模板字符串进行语法高亮。而使用 tagged template string (例 ... ) 时,编辑器对对模板字符串进行了语法高亮显示。

我试了一下我的 vscode 1.19.3,对于 css 可以正常语法高亮,对于 html 没有语法高亮。如果需要特殊的插件,请在评论区留言。

还有一个好处就是像 Prettier 这样的格式化工具可以对其进行格式化处理。

我的测试结果是,对于 ... 作为了普通模板字符串。

我们还可以封装一下 ,把它放在单独的文件夹中:

随后作者突然意识到自己的一个错误,这两种写法并不是等价的:

是用来获取一个模板字符串的原始字面量值的。MDN 的官方例子:

我们需要修改一下之前的代码:

细看下来,这种 tagged template string 的写法很像 Github-flavoured Markdown。

It's cool.

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180207B1C80O00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券