JS-数据类型- 字符串 模板字面量&标签模板

1. 基础

1.字符串内部如果存在特殊字符(如'，", \等)，需要采用\来进行转义
2.使用\t输出制表符，使用\n输出回车符，使用 在html中输出空白符
3.推荐大多数情况下使用''(单引号)来声明字符串，特殊情况下(如字符串内部，或JSON)才使用""(双引号)

image.png image.png image.png

2. 模板字面量

ES5中一直缺乏许多特性，如多行字符串、字符串格式化、HTML转义等。ES6通过模板字面量的方式进行了填补 通过一些全新的方法来解决类似的问题。

模板字面量是增强版的字符串，它用反引号（`）标识

变量占位符
模板字面量看上去仅仅是普通JS字符串的升级版，但二者之间真正的区别在于模板字面量的变量占位符。变量占位符允许将任何有效的JS表达式嵌入到模板字面量中，并将其结果输出为字符串的一部分。

变量占位符由起始的 ${ 与结束的 } 来界定，之间允许放入任意的 JS 表达式。最简单的变量占位符允许将本地变量直接嵌入到结果字符串中。

1.多个字符串可以采用‘+’进行拼接（不推荐），而推荐采用``模板字符串来输出（数字1前面的键）
2.模板字符串内部不仅可以是变量，还可以是表达式,函数 甚至支持嵌套
3.使用\t输出制表符，使用\n输出回车符，使用 在html中输出空白符

4.可以实现多行字符串 在反引号之内的所有空白符都是字符串的一部分

image.png
image.png
image.png

2. 标签模板

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的是函数，紧跟在后面的模板字符串就是它的参数。

image.png
上图中，tag函数的第一个参数是一个数组，该数组的成员时模板字符串中那些没有变量替换的部分，
tag函数的其他参数都是模板字符串各个变量被替换后的值。

“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容。

function SaferHTMLx(templateData) {
    let s = templateData[0];
    for (let i = 1; i < arguments.length; i++) {
      let arg = String(arguments[i]);
 
      s += arg.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;");
      s += templateData[i]         
    }
    return s
  }
 
  let senderx = '<a>alert("abc")</a>';
  let messagex = SaferHTMLx`<p>${senderx} has sent you a message.</p>`;
  messagex  

image.png