js模版字符串-标签模版

模版字符串

js模版字符串使用``来创建模版字符串字面量，例如

const name = "yu"
console.log(`hello ${name}`)

很多人都知道。但是其实我们可以定义标签函数来自定义返回结果。

标签函数

带标签的模板是模板字面量的一种更高级的形式，它允许你使用函数解析模板字面量。标签函数的第一个参数包含一个字符串数组，其余的参数与表达式相关。你可以用标签函数对这些参数执行任何操作，并返回被操作过的字符串（或者，也可返回完全不同的内容，见下面的示例）。用作标签的函数名没有限制。

function template(str_arr,...arg_expression){
    console.log(str_arr,'字符串数组')
    console.log(arg_expression,'参数表达式')
}
const user_name = "fancy_fish"
const user_password = "password"
const test_tag_str = template`<div>用户名：${user_name} 密码：${user_password}<div>`
console.log(test_tag_str)

可以看到第一个参数为字符串数组。该字符串数组会被我们使用的末班字符串字面量分割。其余参数为模版字符串表达式。
我们可以通过这个自定义字符串返回结果。示例如下

function template(str_arr, ...arg_expression) {
    const res = str_arr.reduce((pre, cur, index) => {
        return pre + cur + (arg_expression[index] ? arg_expression[index] : "")
    }, '')
    document.body.innerHTML = res
    return res
    
}
const user_name = "fancy_fish"
const user_password = "password"
const test_tag_str = template`用户名：${user_name}密码：${user_password}`
console.log(test_tag_str)

示例二：解析对象

function template(_, ...arg_expression) {
    const obj = arg_expression[0];
    let res = ''
    for (let key in obj) {
        if (typeof obj[key] !== 'object') {
            res += obj.description[key]+ ':\t' + obj[key] + '\t'
        }
    }
    document.body.innerHTML = res
    return res
    
}
const user_info = {
    name: "fancy_fish",
    age: 18,
    description: {
        name: '姓名',
        age:'年龄'
    }
}
const test_tag_str = template`${user_info}`
console.log(test_tag_str)

总结

1. 我们可以给模版字符串定义标签，标签名等于函数名
2. 函数接受多个参数，第一个参数为被模版字符串表达式${}分割的原始字符串，其余参数为模版字符串表达式内部引用的值，函数返回参数是字符串。