深入浅出es6模板字符串


Posted in Javascript onAugust 26, 2017

本文主要介绍了深入浅出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!
`);

深入浅出es6模板字符串

所有模板字符串的空格和换行,都是被保留的,如果你不想要前后换行,可以使用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"

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

Javascript 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
javascript的几种写法总结
Sep 30 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
Vue精简版风格概述
Jan 30 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 #Javascript
详解Angular4 路由设置相关
Aug 26 #Javascript
浅谈Angular路由守卫
Aug 26 #Javascript
javascript实现文字无缝滚动效果
Aug 26 #Javascript
node实现定时发送邮件的示例代码
Aug 26 #Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
get  post jsonp三种数据交互形式实例详解
Aug 25 #Javascript
You might like
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
Python3导入自定义模块的三种方法详解
2018/04/13 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
python修改FTP服务器上的文件名
2019/09/11 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python扫描线填充算法详解
2020/02/19 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
财务人员求职自荐书范文
2014/02/10 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
遗失说明具结保证书
2015/02/26 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
python中的random模块和相关函数详解
2022/04/22 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android