模板字符串

字符串用法

// 定义模板字符串，使用 `` 反引号
`icoding`;
// 我们可能有疑惑，模板字符串和普通字符串有什么区别呢 ？ 其实，简单写法没啥区别
// 如下常量声明：
const brand1 = "icoding"; // 普通字符串声明
const brand2 = `icoding`; // 使用模板字符串声明

// 观察 brand1 和 brand2 之间是否有区别
console.log(brand1, brand2, brand1 === brand2); // icoding icoding true
console.log(typeof brand2); // string

// 声明一个person对象
const person = {
  username: "icoding",
  age: 20,
  sex: "male",
};
// 通过普通字符串拼接
const msg =
  "我叫：" +
  person.username +
  " ，性别是：" +
  person.sex +
  "，今年：" +
  person.age +
  " 岁了";
console.log(msg); // 我叫：icoding ，性别是：male，今年：20 岁了

注意事项

输出多行字符串

模板字符串和普通字符串相同

const msg = "第1行\n第2行";
console.log(msg);

// 第一行
// 第二行

在模板字符串中，所有的空格、换行或缩进都会被保留并输出，简单说：格式会原样输出

// 模板字符串，添加空格、换行或缩进
const msg = `第1行
第2行`;
console.log(msg);
// 第一行
//      第二行

输出 ` 和 \ 等特殊字符

在模板字符串中要输出特殊字符，同样需要用到转义符 \ 反斜杠来进行转义，才能正常输出

// 输出 反引号 `
const msg = `\``;
console.log(msg); // `
// 输出 反斜杠
const msg1 = `\\`;
console.log(msg1); // \
// 输出 ' 单引号
const msg2 = `'`; // 类似 '' "" 不属于特殊字符
console.log(msg2); // '

标签模板

• 模板字符串还可以紧跟在一个函数后面，该函数将被调用，用来处理这个模板字符串，这被称为 “标签模板” 功能。
• 标签模板其实是函数的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

模板字符串中没有变量

函数后面紧跟的模板字符串中没有变量，则模板字符串为函数的参数

function tagFn(string) {
  console.log(arguments);
  console.log(arguments[0][0]);
  console.log(string);
}
tagFn`模板字符串内容`;

模板字符串中有变量

函数后面紧跟的模板字符串中包含变量，则模板字符串将会被处理成多个参数，再调用函数

function sayHello(string, value1, value2, value3) {
  // 类数组对象，其内包含一个数组，数组成员是由${...}分隔后的字符串组成的
  console.log(string);
  // string.raw为一个数组，数组成员是由${...}分隔后的字符串组成的
  console.log(string.raw);
  console.log(value1); // 对应模板字符串中${username}解析后的值
  console.log(value2); // 对应模板字符串中${city}解析后的值
  console.log(value3); // 没有对应的变量被解析，则值为undefined
}

let username = "清心";
let city = "北京";
sayHello`Hello${username},欢迎你来到${city}`;