字符串模板

ES6字符串模板

模板字符串

语法：把字符串写在``里面，${变量、表达式、函数}：获取值

var obj ={
    name: '张三',
    age: 20
}

// 传统打印
console.log("我的名字叫" + obj.name + ",今年" + obj.age + "岁");

// ES6
console.log(`我的名字叫${obj.name},今年${obj.age}岁`);

• 如果模板字符串的变量没有声明，将报错
• 由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出
• 模板字符可以嵌套，但是没有必要

标签模板

模板模块：紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串

alert`hello` //==> alert(['hello'])

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

标签模板的变量

如果模板字符里面有变量，就不是简单的调用，而是会将模板字符串先处理成多个参数在调用函数

const person = 'Lydia';
const age = 21;

getPersonInfo`${person} is ${age} years old`;
// 等同于
getPersonInfo(["", " is ", " years old"], 'Lydia', 21);


getPersonInfo1`${person}温恩 is 温恩 ${age}温恩 1  温恩 old`;

getPersonInfo1(["", "温恩 is 温恩 ", "温恩 1  温恩 old"], 'Lydia', 21);

• 函数的参数（其实就是一个rest参数）：
  1. 第一个参数是一个数组：就是除去模板里面变量的其他字符串，按照变量所在地方进行拆分字符串，按从左往右添加到数组里面
  2. 函数的其他参数可以用rest参数代替（也可以一个一个的写）
  3. 第一个参数还有一个属性：raw属性，保存的是转义后的原字符串
• String.raw()：往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串

应用

过滤HTML字符串，防止用户输入恶意内容（测试代码如果出错就放在浏览器控制台里面测试）

var sender = '<script>alert("abc")</script>'; // 恶意代码
var message = SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData) {
    var str = templateData[0];
    for (var i = 1; i < arguments.length; i++) {
        var arg = String(arguments[i]);

        // 替换中的转义特殊字符
        str += arg.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;");

        // 不要转义模板中的特殊字符
        str += templateData[i];
    }
  return str;
}

// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

回到顶部 目录