专栏首页web前端教室JavaScript ES6 模板字符串

JavaScript ES6 模板字符串

偶然发现这个新东西,ES6也有模板了,是使用反引号`,来表示的。

这个新东西被称为字符串字面量,就是模板字符串。它使JS也有了简单的字符串插值特性。

为什么说是简单呢,因为因为它不能不能自动转义特殊字符,不能处理特殊语言格式的日期、时间什么的,也没有循环,,

所以它现在只是一个处理输出字符串的东西,目前无法替代模板引擎。

它的用法很简单,这样:

console.log( `我是 $(json.name)` );

这个$(json.name)就是模板占位符,JS会把相应的值,输出安插在一对反引号``中,对应的位置上。然后输出出来就是这样:我是尚瑞。

这种方式比传统的 += 要优雅许多。模板占位符可以是任何的JS表达式,也可以嵌套使用。

要是你想在反引号模板字符串中使用反引号,那就用\转义一下就可以了。

模板字符串还可以跨多行,就这样:

`
我是 $(name),
你是 $(name2)
`

反正它就是原样输出,你什么空格,换行,缩进都原样输出。

因为目前模板字符串功能还比较弱,ES6给它提供了另一个模板: 标签模板,它算是模板字符串的升级版。它的使用方法就是在反引号前加个SaferHTML,但这东西还不是ES6标准库的,你还得自己实现。。。

我看到这已经不想再看下去了,有学它的功夫我还不如找个好用的的JS模板呢。

谁要是有兴趣,就请自己继续研究下ES6的模板字符串吧。

javascript ES6 初次相见

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-02-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue.js的computed计算属性,表达式的“js另存为”

    简单的讲,vue的模板是基于html的,就是html里加模板语法,所以模板里的js注定不能太复杂。如果业务逻辑很复杂,就不能放在模板里了,否则这模板就成了一个业...

    web前端教室
  • 我前端零基础,照着网上刚做完一个项目,现在该怎么用它找工作?

    昨天有个同学给我留言说,“我感觉,您真懂我们这些初学者”。我觉得这句留言是对我最好的夸奖,谢谢,真心的。 我能做到很懂初前端初学者有二个原因,第一是因为我就是从...

    web前端教室
  • javascript 红皮高程(9)

    这两天把JS的Number类型过了一遍,真是遍地是坑啊,如果这里出一些面试题,我100%要栽在这里。 NaN,undefined,null,Infinity,i...

    web前端教室
  • 前端页面热更新实现方案

    腾讯NEXT学位
  • 微信服务号模板消息接口新增"设置行业"和"添加模板"及细节优化

      微信服务号模板消息可以向用户发送重要的服务通知,如信用卡刷卡通知,商品购买成功通知等。昨日,微信团队发布公告称模板消息新增“设置行业”和“添加模板”接口及细...

    ytkah
  • 如何利用Origin自制绘图模板快速批量绘制实验图

    之前给大家介绍过使用批量绘图,可以快速绘制实验图。其做法是绘制出一张图形,其他的直接进行复制图形的设置就可以了,就可以出现成图。但是,如果要应用,你只能打开源文...

    百味科研芝士
  • emlog模板制作说明(一)

    我的第一块模板,我以后也不太会无聊费劲再做新的板子了。毕竟人力有限,天天都有写不完的代码。

    phith0n
  • 编码效率提升之Pycharm活动模板(Live Templates )

    是不是效率提升了许多,简单来说,活动模板就是事先定义好代码模板,然后输入快捷命令,快速实现自定义代码补全。可以实现循环,条件,函数,代码框架等一键输入。

    吾非同
  • Phalcon入门教程之Volt模板引擎

    Marser
  • Java 设计模式系列(3) —— 模板方法模式

    模板方法模式的定义: 定义一个操作算法的框架,将一些步骤延迟到子类中,使得子类可以不改变一个算法结构,即可重新定义该算法的某些特定步骤。

    求和小熊猫

扫码关注云+社区

领取腾讯云代金券