JavaScript值类型使用

字符串转义与模板字面量使用

let vv = "hello\"com"; // hello"com

转义字符

1. 不需要转义：外双内单、外单内双
2. 需要转义的情形：外双内双、外单内单
3. html中转义：
   • 单引号：'
   • 双引号："
4. js中转义：
   • 单引号：\"
   • 双引号：\

let str = "子曰：\"学而不思则罔，思而不学则殆。\"";
console.log(str); // 子曰："学而不思则罔，思而不学则殆。"

js转义符

• \n 换行符
• \t 制表符
• \r 回车符
• \\ 反斜杠

html转义符

• < <
• > >
•   空格
• & &

模板字面量嵌套使用

模板字面量中使用函数

function show() {
    return 'hello,vvvvv!'
}
console.log(`www.${show()}`); // www.hello,vvvvv!

嵌套使用

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

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

神奇的标签模板实例操作

字符串的数量是一定超过变量数量的

let name = "后盾人";
let web = "hou.com";
console.log(tag`在线教程${name},网址是${web}`);
function tag(strings, ...vars) {
    console.log(strings); //  ['在线教程', ',网址是', '', raw: Array(3)]
    console.log(vars); // ['后盾人', 'hou.com']
}

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();