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 = resreturn 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 = resreturn res}
const user_info = {name: "fancy_fish",age: 18,description: {name: '姓名',age:'年龄'}
}
const test_tag_str = template`${user_info}`
console.log(test_tag_str)