深入浅出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 相关文章推荐
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
详解小程序云开发数据库
May 20 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
二级域名转向类
2006/11/09 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Django 视图层(view)的使用
2018/11/09 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
python 连续不等式语法糖实例
2020/04/15 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
敬老院献爱心活动总结
2014/07/08 职场文书
检讨书大全
2015/01/27 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
迎国庆主题班会
2015/08/17 职场文书
python实现简单反弹球游戏
2021/04/12 Python
基于Python的EasyGUI学习实践
2021/05/07 Python
浅谈JS的原型和原型链
2021/06/04 Javascript