模板字面量（模板字符串）

Posted 2021-09-10 纸 飞机

模板字面量是创建字符串的新字面量语法，使用反引号（`）来分界。有三种特性： 插值，多行和标记。

插值

使用占位符${expression} 将动态值放入创建的字符串中。

let name = "strick",
age = 29,str;
str = `name is "${name}".age is ${age}.`;
console.log(str)
//name is "strick".age is 29.

多行字符串

原生支持创建多行字符串，不需要再用加号，反斜线和换行符。能识别空白符。

let multi = `first line
second line
third line`;
console.log(multi)
//输出
first line
second line
third line

标记

一种特殊方式的函数调用，函数名后面直接跟模板字面量 ， 它一 般会包含两个参数，第一个是由没有被替换的部分组成的数组，第二个是剩余参数，包含了所有占位符中的计算结果。

//示例: 
function foo(strings,...values){
    console.log(strings)
    console.log(values)
}
const desc = 'awesome'
foo`Everything is ${desc}!]`
//["Everything is ","!"]
//[“awesome”]

//应用
//过滤html字符串，防止用户输入恶意内容
function filter(strings,...values){
    return strings.reduce((s,v,idx)=>{
        if(idx>0){
            const prev = values[idx-1]
            .replace(/</g,"&lt;")
            .replace(/>/g,"&gt;")
            s+=prev
        }
        return s+v
    })
}

const badCode = `<script>alert("abc")</script>`
const message = filter`<p>${badCode}
has been transformed safely~`
console.log(message)

输出 ：