模板字面量、标签模板和标签函数

模版字面量

ES6 所提出的模板字面量不是单纯指用来给变量赋值的值，也不单单只是指字符串体系，而是可以达到 HTML 转义、格式化输出、多行字符串等功能的字符串的新模式。
语法：使用反引号 ` 包裹

需要严格注意空格的使用，和缩进的控制，因为这些都会保留在原格式中，ES6 会按照用户给定的格式来输出。

// 实现格式化输出
let username = `第一行
第二行
第三行`;
console.log(username);

//以上会输出三行

使用 ` ...` 符号包裹的字符串中可以写入引入变量与表达式

let url = 'houdunren.com';
console.log(`后盾人网址是${url}`); //后盾人网址是houdunren.com

支持换行操作不会产生错误

let url = 'houdunren.com';
document.write(`后盾人网址是${url}
大家可以在网站上学习到很多技术知识`);

使用表达式

function show(title) {
    return `后盾人`;
}
console.log(`${show()}`)

模板字面量支持嵌套使用

let lessons = [
    {title: '媒体查询响应式布局'},{title: 'FLEX 弹性盒模型'},{title: 'GRID 栅格系统'}
];

function template() {
  return `<ul>
      ${lessons.map((item)=>`
          <li>${item.title}</li>
      `).join('')}
  </ul>`;
}
document.body.innerHTML = template();

 

标签模板

标签模板是提取出普通字符串与变量，交由标签函数处理

let lesson = 'css';
let web = '后盾人';
tag `访问${web}学习${lesson}前端知识`;

function tag(strings, ...values) {
    console.log(strings); //["访问", "学习", "前端知识"]
    console.log(values); // ["后盾人", "css"]
}

 下面例子将标题中有后盾人的使用标签模板加上链接

let lessons = [
  { title: "后盾人媒体查询响应式布局", author: "后盾人向军" },
  { title: "FLEX 弹性盒模型", author: "后盾人" },
  { title: "GRID 栅格系统后盾人教程", author: "古老师" }
];

function links(strings, ...vars) {
  return strings
    .map((str, key) => {
      return (
        str +
        (vars[key]
          ? vars[key].replace(
              "后盾人",
              `<a href="https://www.houdunren.com">后盾人</a>`
            )
          : "")
      );
    })
    .join("");
}

function template() {
  return `<ul>
    ${lessons
      .map(item => links`<li>${item.author}:${item.title}</li>`)
      .join("")}
　　</ul>`;
}
document.body.innerHTML += template();

标签函数

上面的template函数就是标签函数

用来自定义模板字面量中的插值的行为
插值：模板字面量之中的变量或者表达式。
语法：function 函数名(模板字面量中的原始字符串数值 插值 1 插值 2…）
PS：1.第一个参数必须是模板字面中的原始字符串的内容组成的数组
PS: 2.从第二个开始,与模板字面量中的插值一一对应

 

String.raw()

String.raw() 是一个模板字符串的标签函数