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

全栈程序员-站长 • 2022年8月21日上午6:00 • 未分类 • 阅读 13

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>