一个关于模板字符串的使用技巧,以及 String.raw() 函数
2018-02-07 00:00
1471 查看
在做前端开发的时候,我们经常会需要在 JavaScript 文件中书写 html 或者 css。在这种场景下,使用模板字符串是个很好的方式,这样就不需要进行复杂而丑陋的字符串拼接了。SomeHats 在 twitter 上给出了一个使用模板字符串的技巧:
仔细看两张图,应该观察到不同了吧。直接使用模板字符串赋值
随后作者突然意识到自己的一个错误,这两种写法并不是等价的:
我们需要修改一下之前的代码:
细看下来,这种 tagged template string 的写法很像 Github-flavoured Markdown。It's cool.
仔细看两张图,应该观察到不同了吧。直接使用模板字符串赋值
consttrired=...
;时,编辑器没有对模板字符串进行语法高亮。而使用 tagged template string (例
constwired=html...
;) 时,编辑器对对模板字符串进行了语法高亮显示。我试了一下我的 vscode 1.19.3,对于 css 可以正常语法高亮,对于 html 没有语法高亮。如果需要特殊的插件,请在评论区留言。还有一个好处就是像 Prettier 这样的格式化工具可以对其进行格式化处理。我的测试结果是,对于
css...
可以正常处理,而`html`...作为了普通模板字符串。我们还可以封装一下
String.raw,把它放在单独的文件夹中:
随后作者突然意识到自己的一个错误,这两种写法并不是等价的:
String.raw是用来获取一个模板字符串的原始字面量值的。MDN 的官方例子:
String.raw `Hi\n!`;
// "Hi\\n!",这里得到的不是 Hi 后面跟个换行符,而是跟着 \ 和 n 两个字符
String.raw `Hi\u000A!`;
// "Hi\\u000A!",同上,这里得到的会是 \、u、0、0、0、A 6个字符,
// 任何类型的转义形式都会失效,保留原样输出,不信你试试.length
let name = "Bob";
String.raw `Hi\n${name}!`;
// "Hi\\nBob!",内插表达式还可以正常运行
String.raw({raw: "test"}, 0, 1, 2);
// "t0e1s2t",我认为你通常不需要把它当成普通函数来调用
我们需要修改一下之前的代码:
细看下来,这种 tagged template string 的写法很像 Github-flavoured Markdown。It's cool.
相关文章推荐
- 【C语言】编写一个函数reverse_string(char * string)(递归实现),将参数字符串中的字符反向排列,不能使用C函数库中的字符串操作函数。
- PHP - Manual手册 - 函数参考 - String 字符串处理函数 - explode使用一个字符串分割另一个字符串
- 【C语言】编写一个函数reverse_string(char * string) 实现:将参数字符串中的字符反向排列。要求:不能使用C函数库中的字符串操作函数。
- PHP - Manual手册 - CLXI. String 字符串处理函数 - str_pad使用另一个字符串将一个字符串填充到指定长度
- 编写一个函数reverse_string(char * string)(递归实现)实现:将参数字符串中的字符反向排列。要求:不能使用C函数库中的字符串操作函数。
- 编写一个函数reverse_string(char * string) 实现:将参数字符串中的字符反向排列。 要求:不能使用C函数库中的字符串操作函数
- 【c语言】编写一个函数reverse_string(char * string) 实现:将参数字符串中的字符反向排列。 要求:不能使用C函数库中的字符串操作函数
- 关于大小端的简单介绍以及使用C写一个函数判断当前系统是大端存储还是小端存储
- //4. 编写一个函数reverse_string(char * string)(递归实现) //实现:将参数字符串中的字符反向排列。 //要求:不能使用C函数库中的字符串操作函数。
- 编写一个函数reverse_string(char * string) 实现:将参数字符串中的字符反向排列。 要求:不能使用C函数库中的字符串操作函数。
- 编写一个函数reverse_string(char * string)(递归实现) 实现:将参数字符串中的字符反向排列。 要求:不能使用C函数库中 的字符串操作函数。
- 函数 Swift 使用函数多个返回值的特点完成一个count函数,该函数用于计算一个字符串中元音、辅音以及其他字母的个数。
- C语言 编写一个函数reverse_string(char * string) 实现:将参数字符串中的字符反向排列。 要求:不能使用C函数库中的字符串操作函数。
- C语言技巧--在结构体中使用函数例子(定义一个指向函数的指针)
- 自己实现的一个字符串分割截取函数,以及查找指定字符
- 使用字符串作为函数模板的实参
- 关于html布局中css的写法,以及table的使用技巧
- 关于如何使用VS高亮显示无扩展名源码文件的一个小技巧
- IDL中识别一个字符串是否是double类型的数字函数IsDoubleString
- PHP - Manual手册 - CLXI. String 字符串处理函数 - strpos查找一个字符串第一次出现的位置