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>

时间: 2024-11-05 21:51:02

ES6 template string的相关文章

ES6 模板字符串Template String

1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们大多都有过拼串的经历吧. const person = { name: 'zhang', age: 18, hobby: 'coding', introduce () { console.log('hello, everyone , my name is ' + this.name + ', I a

es6 字符串String的扩展

ES6给字符串带来了很多实用性的扩展:模板字符串,标签模板,repeat函数.includes函数,startsWith函数,endsWith函数,codePointAt函数,String.fromCodePoint函数,String.raw函数. es6 字符串String的扩展:http://www.cnblogs.com/whybxy/p/7274461.html

[ES6] 11. String Templates

ECMAscript 6 lets us use string templates to gain a lot more control over strings in JavaScript. var salutation = "Hello"; var place = "New York"; var greeting =` ${salutation}, I am IN ${place} CITY `; console.log(greeting); /** Hello

2014年12月-前端开发月刊

一. JS: https://github.com/hacke2/hacke2.github.io/issues/11 霸天 月刊 1.基础知识: http://www.zhihu.com/question/20979831 有哪些经常被误用的 HTML.JavaScript.CSS 的元素.方法和属性 http://www.zhihu.com/question/19713563 如何循序渐进有效学习 JavaScript? http://www.zhihu.com/question/26920

30分钟掌握ES6核心内容

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

带你正确了解ES6

ES6全名是ECMAScript 6,是JavaScript语言的下一代标准. Babel,可以将ES6代码转为ES5代码,是一个环境执行. ES6最常用的特性:let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments let, const类似于var,是ES6的新的声明方式. 原型.构造函数,继承看起来更清晰. 1 class Anima

ES6: 字符串的扩展

1.字符的 Unicode 表示法 Javascript 允许采用 \uxxxx 形式表示一个字符,其中"xxxx"表示一个字符的码点 但是,这种表示法只限于 \u0000 -- \uffff 之间的字符.超出这个范围的字符,必须用两个双字节的形式表达 上面代码表示,如果直接在"\u"后面跟上超过 0xFFFF 的数值(比如 \u20bb7),Javascript会理解成 "u\20bb+7".由于 \u20bb 是一个不可打印字符,所以只会显示

初级前端自学react-native,必备知识点(ES6+ReactJS+flexbox)

我们在学会搭建react-native环境之后,打开项目根目录,看到很多个文件,但是最起眼的应该就是那俩js兄弟文件了 我们一看那名字就知道,我们接下来的任务就是要弄它们: 我们用编辑器打开项目根目录下的index.android.js文件,可以看到有这么个东西: 那么我们先测试一下,在手机上跑起来.不知道大家还记不记得步骤: 第一步:在项目根目录下打开两个git bash.第一个输入:react-native start        这一步是在启用服务器 第二步:在第一步成功之后,连接手机,

ES6学习入门

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 暂时,我们想赶快上手项目,则只需要了解最常用的ES6特性 let, const, class, extends, s