【金秋打卡】第5天模板字符串

一、课程名称：前端工程师2022版

二、课程章节：ES6基础入门-模板字符串与箭头函数(1-1 课程简介-慕课网体系课 (imooc.com))

三、课程讲师：Alex

四、课程内容：

（一）模板字符串

1、认识模板字符串

（1）写法：以前的字符串采用单引号或双引号包裹，如'alex'、"alex"，而模板字符串则由反引号包裹（位置在Esc键的下方），如`alex`

const username1 = 'alex';

const username2 = `alex`;

console.log(username1); //alex

console.log(username2); //alex

console.log(username1 === username2);   //true

（2）模板字符串与一般字符串的区别

1）和其他东西一起使用的时候，使用模板字符串，方便注入，只需要使用   `一般字符串文字${需要调用的对象等}一般字符串文字`

2）其他情况下，使用模板字符串或一般字符串都行

 const person = {

        username: "Alex",

        age: 18,

        sex: "male",

 };

// 一般字符串

const info = "我的名字是" + person.username + "，性别" + person.sex + ",今年" + person.age + "岁了";

console.log(info);

//  模板字符串：使用反引号包裹，需要引用的地方使用美元符号$和花括号{}包裹

const infos = `我的名字是${person.username}，性别${person.sex}，今年${person.age}岁了`;

console.log(infos);

2、模板字符串的注意事项

（1）输出多行字符串：模板字符串中，所有的空格、换行或缩进都会被保留在输出之中，所以书写的时候需要注意是否有换行、空格、缩进等

1）一般字符串，使用/n来实现换行

2）模板字符串

写法1:将单引号改为反引号，继续使用\n

写法2:直接换行

（2）输出'和\等特殊字符：只需要使用反斜杠转义一下就可输出，注意需要判断是否是特殊字符，比如单引号在这里就不是特殊字符，可以直接输出

const info1 = `\``;

console.log(info1);

const info2 = `\\`;

console.log(info2);

const info3 = `'`;

console.log(info3);

（3）模板字符串的注入（即什么可以放进${}中）：只要最终可以得出一个值，就可以通过${}注入到模板字符串中

const username ='alex';

const person = {age:18,sex:'male'};

const getSex = function(sex){

            return sex === 'male'?'男':'女';

        }

const info= `${username},${person.age},${person.age + 2},${person.sex},${getSex(person.sex)}`;

console.log(info); //alex,18,20,male,男

3、模板字符串的应用

使用${}进行注入

五、课程收获：

今天学习了模板字符串，在拼接字符串这一块真的是非常便利，它的相关知识点也比较容易理解，接下来的箭头函数继续加油！