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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
javascript定时器完整实例
Feb 10 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
JS实现百度搜索框
Feb 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
9个比较实用的php代码片段
2016/03/15 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
popdiv
2006/07/14 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python3大文件解压和基本操作
2017/12/15 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
和谐家庭演讲稿
2014/05/24 职场文书
个人委托书
2014/07/31 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2016春节慰问信范文
2015/03/25 职场文书
python xlwt模块的使用解析
2021/04/13 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
Golang获取List列表元素的四种方式
2022/04/20 Golang