浅聊:ES6模板字符串与一般字符串

浅聊:ES6模板字符串与一般字符串一.模板字符串与一般字符串区别二.模板字符串的一些注意事项一.模板字符串与一般字符串区别1,认识模板字符串:’xiaozhang’ //一般字符串`xiaozhang` //模板字符串(用两个反引号裹着)constusername1=’xiaozhang’;constusername2=`xiaozhang`;console.log(username1,username2,usern..

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

在这里插入图片描述

既然我已经踏上这条路,那么,任何事情都不应该妨碍我沿着这条路走下去。 —-康德

一.模板字符串与一般字符串区别
二.模板字符串的一些注意事项

一.模板字符串与一般字符串区别

1,认识模板字符串:

<script>
'xiaozhang'		//一般字符串
`xiaozhang`		//模板字符串(用两个反引号裹着)
const username1 = 'xiaozhang';
const username2 = `xiaozhang`;

console.log(username1,username2,username1 == username2);		
//xiaozhang,xiaozhang,true
</script>

2,模板字符串与一般字符串的区别:

<script>
const person ={ 
   
    username:'小张',
    age:1,
    sex:'male'
};
//用一般字符串输出
const info = '我的名字:'+ person.username +',年龄:'+ person.age +',岁了:'+ person.sex ;
console.log(info);

//模板字符串输出:
const info = `我的名字:${ 
     person.username},今年:${ 
     person.age}岁了,性别:${ 
     person.sex}`;
</script>

从上我们可以看出一般字符串有时很不方便,需多个引号、加号连接,不利于程序员书写,而模板字符串很好的克服了这一点。
同时注意到:在模板字符串中嵌入变量时,需要将变量名写在${}中(后面讲)

二.模板字符串的一些注意事项

1,输出多行字符串:

<script>
//一般字符串
 const info = '第1行\n第2行';
 console.log(info);	
 //第1行
 //第2行
 </script>
<script>
//模板字符串
const info = `第1行\n第2行`;	//(方式一)
console.log(info);	
//第1行
//第2行

const info =`第1行 第2行`	//(方式二)
console.log(info);	
//第1行
//第2行
</script>

模板字符串中,所有的空格、换行或缩进都会被保留在输出结果之中

2,输出 ` 和 \ 等特殊字符

<script>
const info =`\``;	// \表示转义
console.log(info);	// `

const info1 = `\\`;	// \表示转义
console.log(info1);	// \
</script>

3,模板字符串的注入
在模板字符串中嵌入变量时,需要将变量名写在${}中

<script>
//小案例:
 const username = 'xiaozhang';
 const person = { 
   age:1,sex:'male'};
 const getSex = function(sex){ 
   
     return sex ==='male'?'男':'女';
 }
 const info = `${ 
     username},${ 
     person.age},${ 
     getSex(person.sex)}`;
 console.log(info);
 </script>

只要最终可以得出一个值的就可以通过${}注入到模板字符串中

喜欢还请点个赞!
文中若有不足之处还请指出!

传送门:一篇文章带你走进箭头函数

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171849.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • python表白代码-表白python代码

    python表白代码-表白python代码广告关闭2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品。未来,我们一起乘风破浪,创造无限可能。七夕快到了,表白素材赶紧先准备好。。。0、委婉的表白python代码:importstringl=string.ascii_letterss=s.append(l)s.append(l)s.append(l)s.append(l)s.append(l)s.appe…

  • PE框架学习之道:PE框架——style的配置

    PE框架学习之道:PE框架——style的配置

  • 邓白氏编码申请流程(最新)「建议收藏」

    邓白氏编码申请流程(最新)「建议收藏」1.公司做医疗行业APP开发,公司的苹果账号是个人账户级别,不能发布医疗类APP(PLA1.2)。需要升级到公司级别,联系了苹果客服400-670-1855,苹果的客服大部分的人的普通话都够呛,反正能理解意思,你一定要说你就是老板,报你老板的名字,然后客服给回复了一封邮件 按照邮件如实给苹果回复邮件即可(没有邓白氏编码是不行的)。然后后续的升级方法步骤就不赘述了,苹果客服会一步步提示你的,…

    2022年10月23日
  • Maven(三):将web项目的war包热部署到远程Tomcat服务器

    Maven(三):将web项目的war包热部署到远程Tomcat服务器

  • mac安装vue开发环境_vue项目有几个环境

    mac安装vue开发环境_vue项目有几个环境一、前言因工作缘故,需要做一个移动端app,面对2016下半年至今webapp最流行的三个技术React,angular,vue,三选一,如何先,经过前期的技术选型,最后决定使用vue。具体查看本人之前的blog移动app技术选型,react,angular,vue二、vue开发环境的搭建由于本人使用的是mac,所以环境是windows的下面可以忽略……通过下面一张图对Vue的整体开发环境有

    2022年10月21日
  • mysql的日志文件在哪里_如何查看docker运行日志

    mysql的日志文件在哪里_如何查看docker运行日志linux中mysql日志文件在哪里?发布时间:2020-04-2110:47:28来源:亿速云阅读:1535作者:小新linux中mysql日志文件在哪里?相信有很多人都不太了解,今天小编为了让大家更加了解linux中mysql日志文件,所以给大家总结了以下内容,一起往下看吧。Linux中MySQL日志在哪Linux中MySQL日志一般保存在/var/log/目录下,但还需要看具体的配置文件才…

    2022年10月14日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号