ES6之模版字符串的具体使用


Posted in Javascript onMay 17, 2018

最近在项目中使用了ES6的模版字符串,在这里加以总结。

1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的:

$("#result").append(
    "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
    );

但是我们可以看到:这样的传统做法需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。

于是ES6中提供了模版字符串,用`(反引号)标识,用${}将变量括起来。上面的例子可以用模版字符串写成下面这样:

$("#result").append(
  `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
    );

这样的做法就简洁了很多,我们不需要再使用大量的""和+来拼接字符串和变量。

2. 当然,模版字符串可以引入变量,不使用变量也是可以的。如下所示:

` I am a man.`

` No matter what you do,

I trust you.`  

3. 我们还可以先定义变量,然后在模版字符串中嵌入变量:

var name="zzw";
` ${name},no matter what you do,
 I trust you.`

4.显然,由于反引号是模版字符串的标识,如果我们需要在字符串中使用反引号,我们就需要对其进行转义,如下所示:

`No matter\` what you do,
I trust you.`

5.注意:如果使用模版字符串表示多行字符串,所有的空格和缩进都会被保存在输出中!!

console.log( `No matter\` what you do,
 I trust you.`);

输出结果如下:

ES6之模版字符串的具体使用

6. 在${}中的大括号里可以放入任意的JavaScript表达式,还可以进行运算,以及引用对象属性。

var x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`);

结果如下所示:

ES6之模版字符串的具体使用

7.更强大的是:模版字符串还可以调用函数:

function string(){
  return "zzw likes es6!";
}
console.log(`你想说什么?嗯,${string()}`);

结果如下所示:

ES6之模版字符串的具体使用

另外,如果函数的结果不是字符串,那么,将按照一般的规则转化为字符串:

function string(){
    return 666;
  }
  console.log(`你想说什么? 嗯,${string()}`);

结果如下所示:

ES6之模版字符串的具体使用

在这里,实际上数字666被转化成了字符串666.

8.如果在${}中的变量时没有命名的,那么会报错:

console.log(`你想说什么? 嗯,${string()}`);

在上面这句代码中,string()函数没有声明,于是报错:

ES6之模版字符串的具体使用

9.其实,我们还可以在${}中输入一个字符串,知识结果仍旧会返回一个字符串:

console.log(`你想说什么?嗯,${"其实我不是变量~"}`);

结果如下所示:

ES6之模版字符串的具体使用

10.如果希望引用模版字符串本身,可以像下面这样写:

let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
 console.log(func("zzw"));

结果如下:

ES6之模版字符串的具体使用

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

Javascript 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
Javascript valueOf 使用方法
Dec 28 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 #Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 #Javascript
解决Mac安装thrift因bison报错的问题
May 17 #Javascript
Vue中的字符串模板的使用
May 17 #Javascript
快速解决brew安装特定版本flow的问题
May 17 #Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 #Javascript
通过一次报错详细谈谈Point事件
May 17 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
Three.js基础学习教程
2017/11/16 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
js实现左右轮播图
2020/01/09 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
学校督导评估方案
2014/06/10 职场文书
抗震救灾标语
2014/06/26 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
Linux中如何安装并部署Redis
2022/04/18 Servers
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers