JavaScript基础篇：模板字面量与标签函数

JavaScript模板字面量与标签函数

引自JavaScript学习课程0401

一、模板字面量：将表达式/插值嵌入到字符串

// 由如下两个值组成
// 1.所有字符串字面量组成的数组
// 2.插值组成的数组
let menus = ["首页", "视频", "文章"];
let htmlstr = `
      <nav>
      <a href="">${menus[0]}</a>
      <a href="">${menus[1]}</a>
      <a href="">${menus[2]}</a>
      </nav>
`;
console.log(htmlstr);
document.body.insertAdjacentHTML("beforeend", htmlstr);

---

二、标签函数：自定义模板字面量的一些行为

参数约定

第一个参数：所有字符串字面量组成的数组
第二个参数：插值组成的数组

let sum = (strs, a, b) => {
  let a = 45;
  let b = 28;
  console.log(strs);  // ['', ' + ', ' = ']
  console.log(a, b);  //45 28
};
sum`${a} + ${b} = `;  //调用标签函数

三、标签函数：第二个参数之归并函数

rest:归并函数

sum = (strs, ...args) => {
	console.log(strs);  //  ['', '+', '+', '=']
	console.log(args);  //Array(3) 0: 45  1: 28  2: 38
	let a = 45;
    let b = 28;
	let c = 38;
};
sum`${a}+${b}+${c}=`;

如果本文对您有帮助，记得留下你的小赞窝！