您现在的位置是:群英 > 开发技术 > web开发
详解ES6之模版字符串的使用方法
Admin发表于 2022-08-31 17:30:25520 次浏览
在这篇文章中我们会学习到关于“详解ES6之模版字符串的使用方法”的知识,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。

最近在项目中使用了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.`);

输出结果如下:

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

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

结果如下所示:

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

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

结果如下所示:

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

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

结果如下所示:

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

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

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

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

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

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

结果如下所示:

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

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

结果如下:



以上就是关于“详解ES6之模版字符串的使用方法”的介绍了,感谢各位的阅读,希望文本对大家有所帮助。如果想要了解更多知识,欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: ES6
相关信息推荐
2022-07-22 17:44:57 
摘要:python打开py文件一闪而过的解决办法:首先打开py文件的相应代码;然后在程序末尾加上“input()”函数;最后双击【.py】文件的时候就可以看见打印信息。
2022-11-19 17:51:05 
摘要:v-bind怎么动态绑定style属性?本篇文章带大家详细了解一下v-bind指令动态绑定style属性的多种语法,希望对大家有所帮助!
2022-05-16 11:45:12 
摘要:随着互联网的发达,各种WEB应用也变得越来越复杂,满足了用户的各种需求,但是随之而来的就是各种网络安全的问题。作为前端开发行业的我们也逃不开这个问题。所以今天我就简单聊一聊WEB前端安全以及如何防范。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部