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 相关文章推荐
jquery 事件执行检测代码
Dec 09 Javascript
javascript操作表格排序实例分析
May 06 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
详解vue 命名视图
Aug 14 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
解决淘宝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
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python画图学习入门教程
2016/07/01 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
python opencv之SIFT算法示例
2018/02/24 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
医院护士求职自荐信格式
2013/09/21 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers