浅聊: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)


相关推荐

  • 用JavaSocket编程开发聊天室,附超详细注释

    用JavaSocket编程开发聊天室,附超详细注释用JavaSocket编程开发聊天室大二下册的JavaWeb课程设计,使用的是eclipse。一、实现功能登录:用Java图形用户界面编写聊天室服务器端和客户端,支持多个客户端连接到一个服务器。每个客户端能够输入账号。群聊:可以实现群聊(聊天记录显示在所有客户端界面)。好友列表:完成好友列表在各个客户端上显示。私聊:可以实现私人聊天,用户可以选择某个其他用户,单独发送信息,接受私聊消息方可以直接弹出消息框。踢人:服务器能够群发系统消息,能够强行让某些用户下线。更新:客

  • 权限系统与RBAC模型概述[绝对经典]

    0.前言一年前,我负责的一个项目中需要权限管理。当时凭着自己的逻辑设计出了一套权限管理模型,基本原理与RBAC非常相似,只是过于简陋。当时google了一些权限管理的资料,从中了解到早就有了RBAC这个东西。可惜一直没狠下心来学习。更详细的RBAC模型非常复杂。本文只做了一些基础的理论性概述。本文资料完全来自互联网。  1.权限系统与RBAC模型概述

  • 安卓开发个人小作品(3) – 多功能音乐播放器[通俗易懂]

    安卓开发个人小作品(3) – 多功能音乐播放器[通俗易懂]这次介绍一个多功能音乐播放器,记得是大二那年寒假写的,实现的主要功能就是音乐播放,带进度条控制,扫描本地音乐,上一曲下一曲,播放类型(单曲循环,顺序播放,随机播放),APP主题换肤,背景图更换等,功能都比较基础,基本上如果你不会的话,跟着我的思路,应该都是能实现的,预计会在以后加入歌词的功能。在开始前,先放一张最后的效果图吧,我个人喜欢的风格,简约,美观。目录1.实现扫描本地音乐…

  • linux rm 命令详解,Linux rm命令使用指南「建议收藏」

    linux rm 命令详解,Linux rm命令使用指南「建议收藏」Linux系统的众多命令中,rm命令主要用于删除文件,下面小编就来详解介绍下Linux系统的rm命令,希望对初学者有一定的帮助。名称:rm使用权限:所有使用者使用方式:rm[options]name.。。说明:删除档案及目录。参数:?-i删除前逐一询问确认。-f即使原档案属性设为唯读,亦直接删除,无需逐一确认。-r将目录及以下之档案亦逐一删除。范例:删除所有C语言程式档;删除前逐一询问确…

    2022年10月29日
  • jenkinsfile docker_dockerfile创建文件夹

    jenkinsfile docker_dockerfile创建文件夹前言之前我们用docker手动安装了jenkins环境,在jenkins中又安装了python3环境和各种安装包,如果我们想要在其他3台机器上安装,又是重复操作,重复劳动,那会显得很low,这里可以

  • JS数组合并(5种)

    JS数组合并(5种)前言项目过程中,经常会遇到JS数组合并的情况,时常为这个纠结。这里整理一下。简单而实用的for最容易想到的莫过于for了。会变更原数组,当然也可以写成生成新数组的形式。letarr=[1,2]letarr2=[3,4]for(letiinarr2){arr.push(arr2[i])}console.log(arr)//[1,2,3,4]arr.concat(arr2)会生成新的数组。letarr=[1,2]let

发表回复

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

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