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中正则表达式的全局匹配模式分析
Apr 26 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
AngularJS内置指令
Feb 04 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 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
短波问题解答
2021/02/28 无线电
ajax在joomla中的原生态应用代码
2012/07/19 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python 获取等间隔的数组实例
2019/07/04 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
银行求职信怎么写
2014/05/26 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
党员带头倡议书
2015/04/29 职场文书
天鹅湖观后感
2015/06/09 职场文书
小学教师教学反思
2016/02/24 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers