当前位置:首页 > 日记 > 正文

深入浅出es6模板字符串

深入浅出es6模板字符串

本文主要介绍了深入浅出es6模板字符串,分享给大家,具体如下

作为前端开发者避免不了根据后台数据的返回,组装html,渲染页面。举个栗子

$('#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!`);

所有模板字符串的空格和换行,都是被保留的,如果你不想要前后换行,可以使用trim方法消除它。

在{}你可以写任意JavaScript表达式,包括调用函数

var x = 1;var y = 2;`${x} + ${y} = ${x + y}`// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`// "1 + 4 = 5"var obj = {x: 1, y: 2};`${obj.x + obj.y}`// "3"function fn() { return "Hello World";}`foo ${fn()} bar`// foo Hello World bar

如果变量没有声明,会报错,如果{}中是一个字符串,则原样返回

// 变量place没有声明var msg = `Hello, ${place}`;// 报错`Hello ${'World'}`// "Hello World"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

ps怎么导图色板? ps色板新增颜色的

ps怎么导图色板? ps色板新增颜色的

教程,颜色,电脑软件,ps,Photoshop强大的功能令我们对该软件痴迷,当我们使用该软件进行图片效果时,常常需要使用一些多样的颜色色板,这时我们该怎么办呢,今天我就带领大家来看看,Photoshop如何导入色板的吧。如图所示:软件名称:Adobe Photoshop 8.0…

wps文字怎么同时输入上下标wps文字

wps文字怎么同时输入上下标wps文字

输入,文字,方法,下标,标的,  wps文字怎么同时输入上下标?WPS文字是现代办公文档编辑的首选软件,因此我们都应该熟练掌握WPS文字的基本功能,精通WPS文字的操作技巧;如何实现上下标同时输入?直接在右键字体选项里设置是无法实现同时输入的,…

Vue 组件间的样式冲突污染

Vue 组件间的样式冲突污染

冲突,污染,组件,样式,电脑软件,一、污染是如何产生的?得益于 Vue-loader,在 Vue 中可以使用类似于 Web Component 的组件化写法, <template></template><style></style><script></script> ,在大多数情况下,我们希望组件间定义的样式是相互隔离…

利用Node.js编写跨平台的spawn语句

利用Node.js编写跨平台的spawn语句

语句,跨平台,详解,电脑软件,Node,前言Node.js 是跨平台的,也就是说它能运行在 Windows、OSX 和 Linux 平台上。很多 Node.js 开发者都是在 OSX 上做开发的,然后再将代码部署到 Linux 服务器上。由于 OSX 和 Linux 都是基于 Unix 的,因此两者共…

Bootstrap滚动监听组件scrollspy.j

Bootstrap滚动监听组件scrollspy.j

组件,使用方法,详解,电脑软件,Bootstrap,其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮。实现功能1、当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项2、导…

PS鼠绘一把超逼真的金属质感弯刀

PS鼠绘一把超逼真的金属质感弯刀

弯刀,质感,超逼真,电脑软件,PS,这篇教程教的PS鼠绘学习者们使用PS鼠绘超强质感弯刀,教程主要介绍的使用PS来体现弯刀的金属质感和锋利。对于学习鼠绘的朋友来说还是挺有用的,推荐过来和的朋友们一起分享,一起学习了,我们先来看看最终的效果图:下…

创建一般js对象的几种方式

创建一般js对象的几种方式

对象,几种,方式,电脑软件,js,1.对象字面量创建对象var obj = { a:1,b:2 };注意:对象字面量是一个表达式,这种表达式每次运算都会创建并初始化一个新对象,并计算这个新对象的每个属性值。所以如果在循环体内使用对象字面量,每次循环时都会创建新…

ai怎么绘制多重线条?

ai怎么绘制多重线条?

绘制,多重,线条,电脑软件,ai,AI线条的变化可以绘制出很多的图形,下面我们就来看看简单的例子。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:205MB更新时间:2014-05-111、新建一个图层2、选矩形工具画矩形设置…

excel表格怎么设置页数excel表格设

excel表格怎么设置页数excel表格设

设置,步骤,方法,页数,表格,  Excel表格中怎么设置页数,其实这很简单只要你跟着着小编的的步骤来学习,很快学会的。excel表格设置页数的步骤首先点开EXCEL表格,比如说你要写六页纸,就用鼠标圈出六个工作表。然后点击开始,开始里面有框线设置,比…

javascript算法之二叉搜索树的示例

javascript算法之二叉搜索树的示例

算法,示例代码,二叉搜索树,电脑软件,javascript,什么是二叉树二叉树就是树的每个节点最多只能有两个子节点什么是二叉搜索树二叉搜索树在二叉树的基础上,多了一个条件,就是二叉树在插入值时,若插入值比当前节点小,就插入到左节点,否则插入到右节…

NodeJS设计模式总结【单例模式,适

NodeJS设计模式总结【单例模式,适

设计模式,单例模式,装饰模式,适配器模式,观察者模式,本文实例讲述了NodeJS设计模式。分享给大家供大家参考,具体如下:1 . 单例模式顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实…

WPS文字怎么删除表格后空白页

WPS文字怎么删除表格后空白页

删除表,文字,格后,方法,空白页,  表格后的空白页删不掉让人烦恼,那么表格后的空白页该怎样去掉呢?以下是小编给大家整理的WPS文字去掉表格后空白页的技巧,希望能帮到你!WPS文字删除表格后空白页的方法难道就真的没有办法去掉这可恶的空白页…