带标签的模板字符串 - Tagged Templates

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Tagged Templates 就是带标签的模板,你可以在模板字符串的前面添加一个标签,这个标签可以去处理模板字符串里的字符,还有插入的一些值。

这里说的标签其实就是一个函数,不过用起来跟普通的函数有点区别 .. 我们先看一下 .. 这里有一个叫 breakfast 的模板字符串 .. 在这个字符的前面,添加一个标签 .. 比如叫它 kitchen ..

然后在下面,我们再去定义这个标签函数 .. function kitchen .. 这个函数可以接收两个参数 .. 一个是 strings .. 就是模板字符串里的每个部分的字符 .. 还有一个参数可以使用 rest 的形式 ...values .. 这个参数里面是模板字符串里的值 .. 这里就是 dessert ,还有 drink ..

在这个标签函数里,可以把这两个参数输出到控制台上看一下 .. 上面这行就是 strings 参数里的值 .. 是一个数组 .. 里面包含模板字符串里的每个部分的字符 ..

今天的早餐是 .. 后面是一个插值,所以这里断开了一下 .. 接着是 与 .. 它的后面又是一个插值 .. 最后是一个 ! 号 ..

下面这行是标签函数里的 values 参数的值 .. 这里的就是在模板字符串里的使用 ${} 包装的东西 .. 蛋糕还有茶 ..

strings 参数里面还有一个 raw .. 这里是原始的没有处理过的字符 .. 在这个早餐是的后面,添加一个 \n 表示换行 ..

保存 .. 在控制台上你会看到,正常的 strings 里面,并没有出现 \n 这个字符 .. 不过在 raw 里面,你可以看到,没有处理过的,带这个 \n 的字符 ..

在标签里面,你可以分别去处理字符串里的每个部分 .. 比如去检查字符串里是否有不能包含的东西,在货币的前面添加一个货币符号,转换字符串里的 html 代码 .. 把字符串转换成其它的语言等等 ..

正常输出模板字符串里的东西可以这样 .. 在这个标签函数里先定义一个变量 .. 用 let . 名字是 result .. 它的值是一个空白 ..

然后用一个 for 循环 .. i < values.length .. 每次循环让 result 加上字符还有模板字符里的插值 ...

在循环的外面,再让 result 加上最后一部分的字符 ..

最后再返回这个 result ... 保存 .. 在控制台上,你会看到,输出的 breakfast 里的东西。

带标签的模板字符串 - Tagged Templates《 JavaScript:ES6 新功能 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点