ES6 template string
Posted 王者风范
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 template string相关的知识,希望对你有一定的参考价值。
这个东西也是非常有用,当我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库,比如mustache等等。
大家可以先看下面一段代码:
$("#result").append( "There are <b>" + basket.count + "</b> " + "items in your basket, " + "<em>" + basket.onSale + "</em> are on sale!" );
我们要用一堆的‘+‘号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:
$("#result").append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);
用反引号(`)
来标识起始,用${}
来引用变量,而且所有的空格和缩进都会被保留在输出之中,是不是非常爽?!
React Router从第1.0.3版开始也使用ES6语法了,比如这个例子:<Link to={`/taco/${taco.name}`}>{taco.name}</Link>
以上是关于ES6 template string的主要内容,如果未能解决你的问题,请参考以下文章
[ES6深度解析]4:Template strings(模板字符串)
ES6特性-带标签的模板字符串(tagged template)