为了账号安全,请及时绑定邮箱和手机立即绑定

ES6扫盲:标签模板字面量

标签:
JavaScript

前言

最近在读《你不知道的js》下册,看到了关于标签模板字面量的内容,平常用的不多,比较陌生,相信也是大多数初学者会遇到的知识盲点。不过,平常不写是一码事,会不会是另一码事,在读别人代码的过程中也难免会遇到,知识不怕少,只怕不精。

基础示例

function foo(strings,...values){    console.log(strings)    console.log(values)
}const desc='awesome'foo`Everything is ${desc}!]`;// ["Everything is ","!"]// ["awesome"]

foo函数中strings是一个由所有普通字符串(插入表达式之间的部分)组成的数组。使用...gather/rest运算符,把所有参数值都收集到values中。

换一种说法也就是,values中的值是分隔符,就好像用它们连接了strings中的值,然后把他们都连接在一起,就得到了一个完整的字符串。

应用

上面的基础示例不能展现标签模板字面量的强大之处。一般情况,字符串字面量标签函数(上个示例中的foo)要计算出一个字符串并将其返回。

把目标字符串中的数值格式化为美元

function format(strings,...values){    return strings.reduce((s,v,idx)=>{        if(idx>0){            const prev=values[idx-1]            if(typeof prev==='number'){
                s+=`$${prev.toFixed(2)}`
            }else{
                s+=prev
            }
        }        return s+v
    },'')

}const item='orange'const price=3.5554const text=format`the ${item}'s price is ${price}`console.log(text)// the orange's price is $3.56

过滤HTML字符串,防止用户输入恶意内容

大部分的网站都提供有评论模块以供用户发表自己的观点,一般防止用户恶意输入,如<script>alert('恶意代码')</script>,都会把<替换为&lt;;把>替换为&gt;

function filterSpitefulCode(strings,...values){   return strings.reduce((s,v,idx)=>{       if(idx>0){           const prev=values[idx-1].replace(/</g,"&lt;")
           .replace(/>/g,"&gt;")
           s+=prev
       }       return s+v
   },'')
}const badCode= '<script>alert("abc")</script>'const message=filterSpitefulCode`<p>${badCode} has been transformed safely~`console.log(message)// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has been transformed safely~

原始字符串

在上面的代码中,标签函数接受第一个名为strings的参数,这是一个数组,也包括了一些额外的数据:所有字符串的原始未处理版本。可以像下面通过.raw属性访问这些原始字符串:

function showraw(strings,...values){
    console.log(strings.raw)
}

showraw`Hello
World`// ["HelloWorld"]
console.log(`Hello
World`)
// Hello
// World

原始版本的值保留了原始的转义码序列,而处理过的版本把它当作是一个单独的换行符。



作者:mytac
链接:https://www.jianshu.com/p/c65b9930dd11


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消