ES6学习教程之模板字符串详解


Posted in Javascript onOctober 09, 2017

模板字符串(template strings)

ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来讲,就是增加了变量功能的字符串。

ES6为我们提供了模板字符串,语法使用反引号`。模板字符串具有以下三个优点:

  • 多行文本
  • 字符串中插入变量
  • 字符串中插入表达式

基本语法

模板字符串和 ES5的字符串的声明一样。

// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

多行文本

在Jquery 盛行的年代,我们经常会拼接 html 片段再进行节点替换。写一段 ES5的代码大家体会一下:

var str = '<html>'
+ '<div>啦拉拉</div>'
+ '<div>xixixi</div>'
+ '</html>';
console.log(str);// <html><div>啦拉拉</div><div>xixixi</div></html>

ES6支持多行文本,上面的代码实现起来就容易多了。

let str4ES6 = `<html>
 <div>啦拉拉</div>
 <div>xixixix</div>
</html>`;

console.log(str4ES6);

可以插入变量或表达式

// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

ES6的模板字符串实现起来就容易好多。关键语法${},其中可以插入任何的 js 表达式。

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

总结

ES6模板字符串就是这么的简单这么的好用。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
ES6学习教程之块级作用域详解
Oct 09 #Javascript
JavaScript实现短信倒计时60s
Oct 09 #Javascript
ES6学习教程之对象字面量详解
Oct 09 #Javascript
AngularJS中的路由使用及实现代码
Oct 09 #Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 #Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 #Javascript
JS实现的全排列组合算法示例
Oct 09 #Javascript
You might like
PHP5 的对象赋值机制介绍
2011/08/02 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
js CSS操作方法集合
2008/10/31 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
Python基于Faker假数据构造库
2020/11/30 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
公司员工检讨书
2014/02/08 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
甘南现象心得体会
2014/09/11 职场文书
前台文员岗位职责
2015/02/04 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
mysql主从复制的实现步骤
2021/10/24 MySQL
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python